[SOLVED] JS for Thumbnail Gallery to Slide Show - almost there

[UUDDLRLRBA]

Hi everyone,

Great site. I searched the forums for my problem but I haven't seen an answer to my specific question.

I'm attempting to make a photo gallery, in which, once the link is clicked, a pop up appears with a thumbnail gallery, and once a thumb is clicked the gallery in the pop up, changes to a slide show, and the image that appears is indicative of the thumb that was clicked.

Eg. I click on thumb 4/16 in the gallery and image 4/16 is displayed, because it's corresponding thumb was clicked. (Along with slide show navigation buttons.)

I have everything working now, however, the same image will appear regardless of the thumb that is clicked. Now, I know why it is doing this. It's because there is an image specified in the...

<td colspan="3"> <div align="center"><img src=Nebula00.gif name=PictureBox width=667 height=500>
</div></td>

If I take it out, it's blank when the pop up launches.

How can I get my thumb, to dictate what picture shows up in the popup slide show?

I know I could just make separate .htm pages for each pic but there has to be a JS that does this.

Here's the JS I'm using for the slide show.

http://www.codelifter.com/main/javas...lideshow4.html

Here's what my the code looks like for any given thumb.

<td valign="middle"><a href="asampleslideshow.htm"><!--img src="http://www.webforumz.com/images/thumbs/5-008.jpg" width="128" height="96" border="0"></a></td>

The thumb gallery is just batch photoshopped images in a table with a touch of css.

I've searched for a JS that does this specifically, but I haven't seen it yet.

Any help?

Thanks,

P.S. the "Read the forum rules" link in the intro admin PM doesn't work.

Regards

[Monie]

Here is some of the latest JavaScript Slide Show Image Viewer - [Light Box 2.0]
You might want to check that out! The code that you use is too old and the link I gave you is much more interesting.

Cheers..

[UUDDLRLRBA]

That looks like it might do the trick. I'll have to reconsider the layout because the thumbs won't be able to be in the pop up, but I'll just have to make the table of thumbs more narrow so it fits.

Cool that it works in all browsers.

Thanks.

[Monie]

Great..!

Or you want something like this [Hoverbox]
Cheers..

[alexgeek]

Originally Posted by UUDDLRLRBA

That looks like it might do the trick. I'll have to reconsider the layout because the thumbs won't be able to be in the pop up, but I'll just have to make the table of thumbs more narrow so it fits.

Not sure, but I don't think you will have to as lightbox appears over the rest of your site.

Solved!

[UUDDLRLRBA]

Originally Posted by Monie

Great..!

Or you want something like this [Hoverbox]
Cheers..

Naa. Although that may be useful for future projects.

Originally Posted by alexgeek

Not sure, but I don't think you will have to as lightbox appears over the rest of your site.

Solved!

You see, I had already created about 10 .htm pages of thumbs that were to be in popup forum (no global nav or header etc.) but now I'll have to squeeze the thumbs into a .htm page that has the nav and header etc.

It won't be a lot of work really, just a will have to be set up differently.

The end product should look pretty sharp.

Thanks again.

[UUDDLRLRBA]

I'm tinkering with lightbox now. It seems to work great, however, the Prev and Next tags don't show up.

They're in the correct folders, relative to the page.

When the instructions say "Check the CSS and make sure the referenced prevlabel.gif and nextlabel.gif files are in the right location. Also, make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location."

Does that mean the location relative to the page, or location by changing the properties of the styles?

E.g.
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}

or

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


...have to be set?

The .gifs are in the images folder within the root folder.

[Monie]

The LightBox v2.0 link that I gave you explains it all and you still have problem with that huh? Well.. you just need to opens up your eyes a bit wider...

If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

<a href="http://www.webforumz.com/images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="http://www.webforumz.com/images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="http://www.webforumz.com/images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

So, looking at your code here:

HTML: Select all

<a href="http://www.webforumz.com/images/animals/2005-010.jpg" rel="lightbox"><img src="http://www.webforumz.com/images/thumbs/2005-010.jpg"></a>

just need to modify all your image link to this one. Notice the [catCollection] is your image group name..

HTML: Select all

<a href="http://www.webforumz.com/images/animals/2005-010.jpg" rel="lightbox[catCollection]"><img src="http://www.webforumz.com/images/thumbs/2005-010.jpg"></a>

[UUDDLRLRBA]

I thought "group images" would display several at once or something.

Makes perfect sense now, and works great.

Thanks again.

[Monie]

Good to know you've actually solved it Now you can move on...
Cheers...