Adding a simple lightbox effect to images generated by repeating table function

Hello,

I am working on a photo gallery site (using DataBridge), which will be available only for the distributors for our business.

First I made an insert page with a function of uploading multiple sizes of an image (detail and thumbnails.)

The gallery pages show these thumbnails from database, using repeating table function.
I'd like to add a light box effect, so you can click on a thumbs and shows a detail size image, and right click and download it.

I did not use PowerGallery since I didn't want any ribbon or slideshow.
I just want light box effect.

How would I make this?
Can PowerGallery do this? Or can I add JQuery's lightbox somehow?

Any advice is welcome!

Rika

You would use a jquery lightbox script like slim box:

slimbox/

refer to the slimbox documentation for details on how to implement it in your site.

This post has been deleted.

Hi Jason,

Thank you, this works great!

But I have a question on Slimbox this time, so I opened a new thread.
[Activate right click --> "Save as" on Slimbox]
showthread.php?p=137105#post137105


Here is what I did -----------

Firstly I added necessary file links (for css and javascripts) within the header.

I had this code just to show thumbnails for my gallery/catalogue page;
<img src="images/Thumbs/<?php echo $row_race2012['Thumbs']; ?>" alt="<?php echo $row_race2012['Thumbs']; ?>" />

To activate slimbox to this, I have to make a link to open a detail(large) image, and also must add rel="lightbox" to this link. The link should look like this (for example);

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

So after I apply my code to above format, it would look like;

<a href="images/detail/<?php echo $row_race2012['FileName']; ?>" rel="lightbox-detail" title="<?php echo $row_race2012['Title']; ?>" ><img src="images/Thumbs/<?php echo $row_race2012['Thumbs']; ?>" alt="<?php echo $row_race2012['Thumbs']; ?>" /></a>


"FileName" is where I store detail(large) image file name in database.

rel="lightbox-detail" activates slimbox, and "-detail" is added so I can group the entire photos on this page.
You have to have "-" between "lightbox" and whatever name you come up with.

see my response to the other thread you started.