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

mromro · 05-03-2013, 06:00 PM

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!

harvey · 05-03-2013, 06:07 PM

Quote:

Originally Posted by mromro

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!

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

mromro · 05-04-2013, 09:46 AM

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

fris · 05-04-2013, 09:53 AM

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

helterskelter808 · 05-04-2013, 10:04 AM

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

Colmike9 · 05-04-2013, 12:41 PM

http://floatboxjs.com/demo

Scroll down to Popup Thumbnails and Enhanced Tooltips

Edit: I read what you're looking for wrong..

fris · 05-04-2013, 12:48 PM

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

mromro · 05-04-2013, 06:26 PM

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

fris · 05-05-2013, 06:03 AM

Quote:

Originally Posted by mromro

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.

like so.

DWB · 05-05-2013, 06:53 AM

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

05-03-2013, 06:00 PM	#1
mromro So Fucking Banned Industry Role: Join Date: Jan 2011 Posts: 770	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!

05-04-2013, 09:53 AM	#4
fris Too lazy to set a custom title Industry Role: Join Date: Aug 2002 Posts: 55,372	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 __________________ Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence. WP Stuff

05-04-2013, 12:41 PM	#6
Colmike9 (>^_^)b Industry Role: Join Date: Dec 2011 Posts: 7,224	http://floatboxjs.com/demo Scroll down to Popup Thumbnails and Enhanced Tooltips Edit: I read what you're looking for wrong.. __________________ Join the BEST cam affiliate program on the internet! I've referred over $1.7mil in spending this past year, you should join in. I make a lot more money in the medical field in a lab now, fuck you guys. Don't ask me to come back, but do join Chaturbate in my sig, it still makes bank without me touching shit for years.. Last edited by Colmike9; 05-04-2013 at 12:45 PM..

05-04-2013, 09:46 AM	#3
mromro So Fucking Banned Industry Role: Join Date: Jan 2011 Posts: 770	Thanks for the reply. I guess I have to do more messing around with the code.

05-04-2013, 10:04 AM	#5
helterskelter808 So Fucking Banned Industry Role: Join Date: Sep 2010 Posts: 3,405	Go to a Fusker site \| right click \| view source.

05-04-2013, 06:26 PM	#8
mromro So Fucking Banned Industry Role: Join Date: Jan 2011 Posts: 770	Thanks Guys.....I got it working pretty much what I wanted. Just gotta mess with the thumb size. Thanks!

05-05-2013, 06:53 AM	#10
DWB Registered User Industry Role: Join Date: Jul 2003 Location: Encrypted. Access denied. Posts: 31,779	Fris, you are without a doubt the most helpful dude on any message board.