[TUT] Using the Lightbox 'overlay' effect in 4images

[plasticphyte]

- first only a englisch version ...
- eine deutsche Version kommt bald ... oder später ... ... zwischenzeitlich nutze diese Deutsche-Google-Übersetzung ...

Hi guys,

I've noticed a lot of image galleries using the Lightbox v2 effect that can be found here - as a great fan of the fantastic 4images gallery, I wanted to implement it into my website.

Here's the quick and dirty method (please note I'm working from memory, so if this doesn't work first time, please post what has gone wrong and I'll try my best to help).
Please note, Lightbox v2 can only handle .jpg files. This will not work with any other type of file, so implement this 'mod' at your own risk.

1 - Install it using the methods outlined in the website (you'll need to download it from the website listed above).

2 - Open up thumbnail_bit.html and look for this bit

Code: [Select]

{thumbnail}

3 - Modify it to look like this

Code: [Select]

<a href="./data/media/{cat_id}/{thumbnail_file_name}" rel="lightbox[{cat_id}]" title="{image_name}"><img src="./data/thumbnails/{cat_id}/{thumbnail_file_name}" /></a>

Now save it and upload it.

4 - Open up header.html and insert this code before the </head> tag, making sure the paths are correct.

Code: [Select]

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

Upload this file, and you're done.

As far as the lightbox CSS and so forth goes, I've appended it to my own stylesheet.



*Edit 23 July 2009 - Removed link to my website. No longer using 4images.
*Edit 5/9/2008 - Removed steps that have been found to be uneccessary to the process.
*Edit 25/6/2008 - Updated step 7 to remove an error which would cause the session ID to appear in the the thumbnail box*

[Sunny C.]

Sollte das nicht auch mit mehreren Dateitypen gehen?

Das heisst, wenn ich das jetzt einbaue, und jemand auch PNG oder GIF Bilder lädt, dass man die Bilder nicht mehr öffnen kann bzw. sehen kann da es nur JPG Bilder annimmt und somit der Mod dann quasie wieder ausgebaut werden muss?

[plasticphyte]

Sorry, I don't understand Dutch/German, so Google translate will have to do.

Lightbox 2 can't handle filetypes outside of JPG. It doesn't say whether it can handle GIF or PNG, but I presume it can since it loads GIF's into the js file for overlaying on the image for prev/next navigation.
Hence why use this at your own peril.

[GeO3x]

Great tut.. but I dont want it in thumbs! In details page I want to have this JavaScript!
I want picture to be smaller to fit the layout and when I click on the image to expand and have image set - prev & next image like a slide show.. from the details page not from category view..

I've enetered into detail and replaced {image} with   

<a href="{media_src}" target="_blank" rel="lightbox[{cat_id}]" title="{image_name}">{image}</a>

I thought that if I put rel="lighbox[{cat_id}]  it will show...
Can u help me?

[plasticphyte]

Change it to just

Code: [Select]

rel="lightbox".

The [{cat_id}] part only works if displaying from the thumbnail page.

[lanman_de]

Thx for that cool mod !

[siLenTia]

Thank you for the tutorial, it works fine!

I have a question: is it possible to show the categorie under the image in the lightbox window?

[spookypld]

I'm very confused. People thank You and I don't any Lightbox on the site You mentioned. Weird.

[whosthis.ee]

the same is not working

instead all images are opening in new window

[plasticphyte]

Hi to new posters. I no longer use 4images on my website. Updating the OP to reflect this. The technique provided does work.
You can't have the category display within the lightbox as is. Only the image title.

[Steffen13]

Hi,

i implemented it in the details.html.

Code: [Select]

                <a href="{media_src}" target="_blank" rel="lightbox[{cat_id}]" title="{image_name}">{image}</a>

and what must I do to appear the next or prev


Kannmir jemand dabei behilflich sein, dass es funktioniert, so dass man ein Bild anklickt, und dann alle aus der Kategorie ansehen kann, wenn man auf prv klickt?