Smoothgallery-like Slideshow Script with Text Overlay and jQuery

jQuery Add comments

Impressed by fellow Chiang Mai expat’s site gt-rider.com I was looking for an gallery/slideshow javascript similar to JonDesign’s SmoothGallery (jdgallery), but working with jQuery rather than mootols. jdgallery combines slideshow, image title overlay and many different transitions in an aesthetically appealing package.

The search led me to the conclusion that the transitions (slideshow functionality) should be handled by a different script than the actual image display. For the former there is the excellent jQuery Cycle plugin.

So how do we get text displayed over the image?

One solution might be to use a jQuery gallery plugin that can do titles over images. fancybox is such a package. For an impressive mashup of fancybox and cycle you might check out this site and look at the source code, js and css. You just need the two plugins (fancybox and cycle) and then call

$('#your_element_collection').cycle();

I found all this a bit thick and heavy for my needs, but certainly useful to keep in mind and add to the toolset. Then there was the recent image title demo by Chris Coyier from css-tricks.com which demonstrates a simple technique to display a text title on top of the image via a custom jQuery plugin, which improves on the common h2 + spans technique. In the comments David Chambers posted a pure-css image title solution, using a an html definition list. This is arguably a more semantic markup than the commonly used h2 tag.

Anyway, I mashed this up with the cycle plugin and created a small demo app which you can check out from github. or watch the demo. This might be a powerful and easy to implement way of getting text overlays over images, and then animating a slide show with the extremely powerful and versatile jQuery cycle plugin. YMMV.

=-=-=-=-=
Powered by Bilbo Blogger

[Slashdot] [Digg] [Reddit] [del.icio.us] [Facebook] [Technorati] [Google] [StumbleUpon]

2 Responses to “Smoothgallery-like Slideshow Script with Text Overlay and jQuery”

  1. David Peers Says:

    This blog helped me somewhat in solving some problems with the latest release, Why do they always seem to leave out vital information when they release a new version? It may be trivial to them but not to me. I’m sure i’m not alone either.

  2. Jeduan Cornejo Says:

    Thanks a lot for this, had been wrestling with styles and cycle plugin for hours until I found your site.

Leave a Reply