Author Topic: [TUT] Using the Lightbox 'overlay' effect in 4images  (Read 42645 times)

0 Members and 1 Guest are viewing this topic.

Offline plasticphyte

  • Newbie
  • *
  • Posts: 13
    • View Profile
[TUT] Using the Lightbox 'overlay' effect in 4images
« on: June 24, 2008, 12:44:20 PM »
- 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*
« Last Edit: July 23, 2009, 08:26:54 AM by plasticphyte »

Offline Sunny C.

  • Addicted member
  • ******
  • Posts: 1.808
  • I ♥ 4I
    • View Profile
Re: [TUT] Using the Lightbox 'overlay' effect in 4images
« Reply #1 on: June 24, 2008, 02:04:27 PM »
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?

Offline plasticphyte

  • Newbie
  • *
  • Posts: 13
    • View Profile
Re: [TUT] Using the Lightbox 'overlay' effect in 4images
« Reply #2 on: June 24, 2008, 10:55:30 PM »
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.

Offline GeO3x

  • Newbie
  • *
  • Posts: 15
    • View Profile
    • Photopedia
Re: [TUT] Using the Lightbox 'overlay' effect in 4images
« Reply #3 on: July 05, 2008, 04:56:50 PM »
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>

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

Offline plasticphyte

  • Newbie
  • *
  • Posts: 13
    • View Profile
Re: [TUT] Using the Lightbox 'overlay' effect in 4images
« Reply #4 on: July 13, 2008, 01:35:53 PM »
Change it to just
Code: [Select]
rel="lightbox".

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

Offline lanman_de

  • Pre-Newbie
  • Posts: 2
    • View Profile
Re: [TUT] Using the Lightbox 'overlay' effect in 4images
« Reply #5 on: August 18, 2008, 12:35:54 PM »
Thx for that cool mod !

Offline siLenTia

  • Pre-Newbie
  • Posts: 1
    • View Profile
    • Mirandus-Arts
Re: [TUT] Using the Lightbox 'overlay' effect in 4images
« Reply #6 on: January 27, 2009, 01:19:22 PM »
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?

Offline spookypld

  • Pre-Newbie
  • Posts: 8
    • View Profile
Re: [TUT] Using the Lightbox 'overlay' effect in 4images
« Reply #7 on: February 06, 2009, 07:23:29 AM »
I'm very confused. People thank You and I don't any Lightbox on the site You mentioned. Weird.


Offline whosthis.ee

  • Newbie
  • *
  • Posts: 32
    • View Profile
Re: [TUT] Using the Lightbox 'overlay' effect in 4images
« Reply #8 on: April 25, 2009, 03:17:00 PM »
the same is not working

instead all images are opening in new window

Offline plasticphyte

  • Newbie
  • *
  • Posts: 13
    • View Profile
Re: [TUT] Using the Lightbox 'overlay' effect in 4images
« Reply #9 on: July 23, 2009, 08:25:18 AM »
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.

Offline Steffen13

  • Newbie
  • *
  • Posts: 23
    • View Profile
Re: [TUT] Using the Lightbox 'overlay' effect in 4images
« Reply #10 on: January 24, 2010, 02:28:03 PM »
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?
« Last Edit: January 25, 2010, 12:26:24 PM by Steffen13 »