Thumbnail Gallery 2 Tutorial

A thumbnail image gallery with a caption and text option
This gallery uses two images one for the large and one for the thumbnail
That allows for faster page loading when you use a lot of images
It can be used multiple times on a page
Uses a few lines of jQuery made for RSD

Gallery 2 Example
Gallery 2 Step by Step Tutorial

Refresh/Reload your browser to see the new updates

Alter Eagle
Thanks for this. It is much more like the one I currently use outside of rsd.
http://www.buxtonmethodistcircuit.org.u … llery.html
When I get time I'll do a trial using your gallery.
Thanks again.

Russ

No problem Russ, thanks for saying so.
I didn't add too many bells & whistles since I wrote it just as a option with adding a couple of lines in the footer. Most of that styling you can do in RSD, even the scrolling thumbnails... I go over that in gallery 1. Good thing is it's inside RSD foundation with no add on and keeps you on your page so great for seo.

Hi Alter Eagle
This may appear to be a stupid question, and call me stupid if you like

Is there a way to have the thumbs on the left of the big picture, I can get it to work when on the right,, but it doesn't work when they are on the left,, I am guessing it is to do with the script, & that thingy "closest" followed by "prev" which I assume is short for previous.. can that "prev" be replaced by something like "next" so that it looks for the next closest column. I have a requirement for a site that this gallery would be ideal, a clean simple one (only 4 images/thumbs, but at least 100 pages with that gallery on each page, but the thumbs definitely need to be on the left. I have tried re-designing the layout to accommodate the thumbs on the right of the big pic,, but cant get it to look right.

Thanks

Wayan

IDID IT
What a magician this Alter Eagle is even whilst asleep in the world of JS dreams, he came to me & showed me the way

Amazing
so for anyone wanting the thumbs to appear above or to the left, you need place the column holding the container that holds the thumbnails before the column that holds the large image
then place the following js script in the footer of that page

<script>
$('.thumb-box a').click(function() {
var changeSrc = $(this).attr('href');
var changeCaption = $(this).find('img').attr('alt');
var changeText = $(this).attr('title');
$(this).closest('.columns').next('.columns').find('.bigpic img').attr("src", changeSrc);
$(this).closest('.columns').next('.columns').find('.image-caption').html(changeCaption);
$(this).closest('.columns').next('.columns').find('.image-text').html(changeText);
return false;
});
</script>

Pretty good Wayan, you'll be writing these scripts in no time.

You are right though I was trying to get too succinct, so I re-wrote it to work anywhere in the same row. That way anyone can put them in any layout you like within the same row and even change the layout on the same page.

Here is the code to use:
I'll update the TUTORIAL