How to add Lightbox2 to gallery of images
First of all, I'm pretty new in the Drupal world, only a few weeks of experience, so I don't know if there is already a module to do this.
I wanted to show in a page the thumbnails of some images that I added to my site by using the Image module and that when those thumbnails where clicked the full size image where shown in a lightbox.
I tried by attaching the images with Image Assist and enabling the automatic features of lightbox2. But at the time of this writing there are issues with the latest versions of Image, Image Assist and Lightbox2 for Drupal 6 so it didn't worked, the image's thumbnail are shown inline but when I click on them it takes me to the image node instead of showing the image in a lightbox.
There is another problem with that approach and is that if you want to add more than two or three images it is a lot of work to use Image Assist for each one of them, and if I want to add more latter? or if I want to change one of them? then edit the page, add and/or delete, insert the new ones, etc.
Then I thought that if I group the images in a gallery, with Image Gallery, I can then grab them all from the database and create the proper links that show the thumbnail and open in a lightbox when clicked, even better if I change, add or delete an image in the gallery the page is updated automatically.
Here is the code I wrote to do that:
<span class="inline inline-left">
<?php
$gallery_tid=4;
$result= db_query ("select n.title as title, f1.filepath as originalpath, f2.filepath as thumbpath from {files} f1, {files} f2, {node} n, {image} i, {image} i2, {term_node} tn where tn.tid=%d and i.nid=tn.nid and i.image_size='_original' and i2.image_size='thumbnail' and n.nid=tn.nid and f1.fid=i.fid and f2.fid=i2.fid and i.nid=i2.nid", $gallery_tid);
while ($img = db_fetch_object($result)) {
echo '<a href="/'.$img->originalpath.'" rel="lightbox[secadores]['.$img->title.']"><img src="/'.$img->thumbpath.'" width="100" title="'.$img->title.'"/></a><br/>';
}
?>
</span>
Now you can add that code to any page in which you want to show thumbnails of a gallery, all you have to do is change the value of $gallery_tid to the tid of the gallery you want to show, you can get the tid from the gallery's URL, as an example if you load a gallery and the url is: http://{hostname}/image/tid/4 then that gallery's tid is 4. You must also change the group name in the lightbox brackets.
Of course you must have authorization to insert PHP code in order to use this.
Note that the images are grouped inside a <span> with the classes inline inline-left, that is to show the images in a column at the left of the text. You can modify the HTML in order to show the images the way you want.
Examples of this can be seen at: http://sgautomatizacion.com/node/1 and http://sgautomatizacion.com/node/7
I hope this can be useful for somebody else ;)
Help improve this page
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion