3

I've been searching for hours now but can't get any tutorial on this.

I have these thumbnails on my homepage which are the first images of their corresponding posts.

What I want is that when I mouse-over a post on the homepage... the corresponding thumbnail should also show/rotate the other images of that particular post... bit like a sneak-peak image rotator...

Does anyone know where I can get a tutorial regarding this? How's this called?

It seems like I'm searching for the wrong keywords on google as I can't find anything.

DisgruntledGoat
  • 21,588
  • 5
  • 54
  • 101
Gerben
  • 81
  • 3
  • 1
    Why do you think this has a specific name? I've never seen this done at all, never mind enough that it'd have a name. (Do you have any example links? Might just be a plugin) It sounds like it could be done with just about any image rotator and a little custom templating to put the markup in the necessary spots, though. – Su' Apr 02 '12 at 22:09
  • carousel might be a useful keyword. – William Jackson Jun 05 '12 at 19:13

2 Answers2

2

You need to have static and animated version of each thumbnail. One of simplest solutions would be to use:

<div style='width:100p; height:100px; background:url(static_thumb.gif)'></div>

and then to all such divs apply:

$('your divs').hover(
function(){ $(this).html('<img src='+process($(this).css('background-image'))+'>')},
function(){ $(this).empty() }
);

and lastly you need to specify the process function, that will change url(static_thumb.gif) into something like ani_thumb.gif.

neak
  • 107
  • 4
0

What you are looking for is basically a combination of a dynamic tooltip, and an image rotator/slideshow. I'm not sure if I've ever seen them combined, but if you're familiar enough with PHP you could find each of those separately and combine them yourself.

Sherwin Flight
  • 1,421
  • 8
  • 12