View Single Post
Old 05-04-2013, 12:48 PM  
fris
Too lazy to set a custom title
 
fris's Avatar
 
Industry Role:
Join Date: Aug 2002
Posts: 55,350
You can do something like this.

css

Code:
.hoverthumb {
    position: absolute;
    border: 1px solid #ccc;
    background: #333;
    padding: 5px;
    display: none;
    color: #fff;
}
jquery

Code:
jQuery(document).ready(function($) {

    xOffset = 10;
    yOffset = 30;

    $("a.thumbnail").hover(function(e) {
        this.t = this.title;
        this.title = "";
        var c = (this.t != "") ? "<br/>" + this.t : "";
        $("body").append("<p class='hoverthumb'><img src='" + this.rel + "' />" + c + "</p>");
        $(".hoverthumb").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("fast");
    },

    function() {
        $(".hoverthumb").remove();
    });

    $("a.thumbnail").mousemove(function(e) {
        $(".hoverthumb").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px");
    });
});
add to your wp functions.php file

Code:
<?php

function custom_hover_scripts() {
	wp_enqueue_script('jquery');
	wp_enqueue_script('jquery_hover', get_stylesheet_directory_uri() . '/js/hover.js');
	wp_enqueue_style('jquery_hover', get_stylesheet_directory_uri() . '/css/hover.css');
}

add_action('wp_enqueue_scripts','custom_hover_scripts');

function hover_thumbnail($atts,$content) {
	global $post;
	$thumbnail = wp_get_attachment_url(get_post_thumbnail_id($post->ID));
	$content = '<a href="'. get_permalink($post->ID) . '" class="thumbnail" rel="'. $thumbnail . '">'.get_the_title().'</a>';
	return $content;
}

add_shortcode('hoverthumb', 'hover_thumbnail');
you can download it from here from my dropbox.

https://dl.dropboxusercontent.com/u/33687580/hover.zip
__________________
Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence.


WP Stuff
fris is offline   Share thread on Digg Share thread on Twitter Share thread on Reddit Share thread on Facebook Reply With Quote