GoFuckYourself.com - Adult Webmaster Forum - Is there a plugin that shows a thumb preview when you mouse over a post title like tool tips

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

Is there a plugin that shows a thumb preview when you mouse over a post title like tool tips

Anyone know of a plugin for wordpress that when you mouse hover a post title it shows a preview thumb? either a thumb of the featured image or the thumb of the first image of the blog post?

I have installed the skinnytip tools tip plugin and have been trying to edit my content.php to get this to work but it's giving me problems.

I see websites that have thumbnails pop up when you mouse over the gallery title link. Just wondering if there was an easy way to do tis?

Thank!

Quote:

Originally Posted by mromro (Post 19610954)

I don't know of any, but ask Fris, he's the resident WP plugin god. If it doesn't exist as a plugin, it's extremely easy to do it with just a small change in your WP template and 2 lines of JQuery. Simply add a hidden div (using display: none) with the_post_thumbnail() inside it and change display on hover using Jquery.

Edit: thinking on it, you can do it with just pure CSS

Thanks for the reply. I guess I have to do more messing around with the code.

you could grab the image via the post thumbnail, and do this via jquery like harvey said.

ill do some code up later if i have time and you havent got it yet.

best to do the html/css on a standalone static page then implement it into wp

Go to a Fusker site | right click | view source.

http://floatboxjs.com/demo

Scroll down to Popup Thumbnails and Enhanced Tooltips :upsidedow
Edit: I read what you're looking for wrong.. :(

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

Thanks Guys.....I got it working pretty much what I wanted. Just gotta mess with the thumb size. Thanks!

Quote:

Originally Posted by mromro (Post 19612024)

Thanks Guys.....I got it working pretty much what I wanted. Just gotta mess with the thumb size. Thanks!

if you want to replace your permalink title with the hover kind you can simply modify your permalink in your template code to something like this.

Code:

function get_hover_permalink($postid) {

        $thumbnail = wp_get_attachment_url(get_post_thumbnail_id($postid));

        if($thumbnail)         $content = '<a href="'. get_permalink($postid).'" title="'. get_the_title($postid) . '" class="thumbnail" rel="'. $thumbnail .'">'.get_the_title($postid).'</a>';

        else $content = '<a href="'. get_permalink($postid).'" title="Permalink to '. get_the_title($postid) . '" rel="bookmark">'.get_the_title($postid).'</a>';

        return $content;

}

it will only do the hover if a featured image exists.

http://i.imgur.com/KsdBogi.jpg

like so.

Fris, you are without a doubt the most helpful dude on any message board.