4images Modifications / Modifikationen > Tutorials

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

(1/3) > >>

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: ---{thumbnail}

--- End code ---

3 - Modify it to look like this

--- Code: ---<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>

--- End code ---

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: ---<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>

--- End code ---

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   

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

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

plasticphyte:
Change it to just
--- Code: ---rel="lightbox"
--- End code ---
.

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

Navigation

[0] Message Index

[#] Next page