I have created a slideshow using the jquery cycle plugin with previous and next buttons. What i am trying to do is when the user hovers the previous or the next button to get a tooltip with a preview of the previous or the next image respectively. Any ideas on how to achive something like that?
+1
A:
For the tooltip: http://craigsworks.com/projects/qtip/
For the next/previous image, you'll need to keep the data somewhere before showing it - like a hidden div. Qtip takes a 'content' parameter that you can populate with inner-html from any element on the page using jQuery(selector).html().
I.E:
jQuery(next_button_selector).qtip(
{
content:{
text: jQuery(hidden_div_that_wraps_image_selector).html()
}
});
Koobz
2010-01-29 08:27:32
Well i guess that's the easy part, what i don't know is how to select the previous and next image at any point in the slideshow and keep it somewhere
tsiger
2010-01-29 09:08:54
Depends on your slideshow. Read the docs on it. See if they've got any kind of callback, something you can hook into. Otherwise they'll usually do something like set a url fragment (index.html#fragment), or stash data in some attribute. Other times it's a progressive enhancement thing (turn this boring <li> into a gallery, using the nested images as the gallery images). In which case, with jQuery, you'll simply need to traverse around (next(), prev(), closest() ... etc) accordingly.
Koobz
2010-01-29 09:36:35
To help with all of this, make sure you have Firebug installed. If you enable the script debugger, you can actually watch how the gallery behaves when **it** needs to figure out what the next image is going to be. You can then copy it, or maybe learn something along the way like:"Oh, right before it opens the next image, it triggers an event which I have to listen for jQuery(document).bind('onNextImage',function(evt,data){ ... }); And it gives me the url I'm looking for!"
Koobz
2010-01-29 09:40:02