Demo site: http://www.stellapower.net/lightbox2

Adding a basic lightbox

Adding a lightbox to your images couldn't be easier. Just add rel="lightbox" attribute to any link tag to activate the lightbox. For example:

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

Optional: To show a caption either use the title attribute or put in the second set of [] of the rel attribute.

Grouping images

If you have a set of related images that you would like to group, then you will need to include a group name between square brackets in the rel attribute. For example:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip][caption 2]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip][caption 3]">image #3</a>

There are no limits to the number of image sets per page or how many images are allowed in each set.

If you have a set of images that you would like to group together in a lightbox, but only wish for one of these images to be visible on your page, you can assign the "lightbox_hide_image" class to hide the additional images. This is not available in the 4.7.x version but should be easy to reproduce. For example:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]" class="lightbox_hide_image">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]" class="lightbox_hide_image">image #3</a>

Turning the caption into a link

If you wish to turn the caption into a link, format your caption in the following way:

<a href="images/image-1.jpg" rel='lightbox[][<a href="http://www.yourlink.com">View Image Details</a>]'>image #1</a>

Comments

rcalzada’s picture

I used Search google to test in my site and works, then...

Inserted image on page and linked with the rel="lightbox"
I used this sample (putting my correct path to my image):

But the link to the image doesn't work. Lightbox window only shows the sample image of the program. My image is in the root folder inside images folder. Do I'm missing something? Help...

javilete’s picture

Hi, I am having the same problem. If I tried to open a lightbox with an image, even the image is located in the same folder, it doesnt display it, just the default view (a camera picture), but on the other way, if I do it with a web link, it works perfectly, what am I doing wrong?? Should I add anything to my page??
I would appreciate any help!!
Thanks in advance!!!

javilete’s picture

Anybody knows the reason of the last post???
Thanks!!!

javilete’s picture

If it helps anybody... I got the solution checking most of the code from the .module file and .js. The problem was the path, so you have to check the path that you add to your href="". Once you have check that, you just set the right one and it works. You can see this in the .js file showing a message or an alert with the variable "original_image", which contains the path of it.
Hope I have explain myself properly!!!!

baseball’s picture

Dear:
in the folowing code,what is the grouping name?
and sould i set the config of GROUP DISPLAY SETTINGS?
thx.

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip][caption 2]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip][caption 3]">image #3</a>
zeke_’s picture

Here's an example of what worked for me.

1. Upload image
2. Insert image at full size and change the code to the anchor stuff and add rel="lightbox"
3. Insert the image, at whatever size you want it to appear on the page
4. Add your closing anchor tag

<a href="/sites/default/files/field/image/dash2.jpg" width="1600" height="900" rel="lightbox"><img src="/?q=sites/default/files/styles/large/public/field/image/dash2.jpg&itok=QrhPI_S4" width="480" height="270" alt="" class="image-large" /></a>