4images Forum & Community
Welcome, Guest. Please login or register.
Did you miss your activation email?
November 19, 2018, 10:42:50 AM

Login with username, password and session length
Search:     Advanced search
You're looking for some 4images templates and styles? Then visit this thread to show websites with 4images templates to download.
Togle to toolbar
Translate this page with =>
Translate this page >
* Home Help Search Login Register
 
+  4images Forum & Community
|-+  4images Modifications / Modifikationen
| |-+  Mods & Plugins (Releases & Support)
| | |-+  Tutorials (Moderators: mawenzi, Rembrandt)
| | | |-+  [TUT] Using the Lightbox 'overlay' effect in 4images
0 Members and 1 Guest are viewing this topic. « previous next »
Pages: [1] Print
Current Topic Rating: *
Author Topic: [TUT] Using the Lightbox 'overlay' effect in 4images  (Read 32716 times)
plasticphyte
Newbie
*
Offline Offline

Posts: 13

Thank You
-Given: 0
-Receive: 1


View Profile
« on: June 24, 2008, 12:44:20 PM »

- first only a englisch version ...
- eine deutsche Version kommt bald ... oder später ... Wink ... 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
1
{thumbnail}

3 - Modify it to look like this
1
<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.
1
2
3
<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 » Logged
Sumale.my
Addicted member
******
Offline Offline

Posts: 1773

Thank You
-Given: 169
-Receive: 86

Neverdie


View Profile
« 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?
Logged
plasticphyte
Newbie
*
Offline Offline

Posts: 13

Thank You
-Given: 0
-Receive: 1


View Profile
« 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.
Logged
GeO3x
Newbie
*
Offline Offline

Posts: 15

Thank You
-Given: 0
-Receive: 0


View Profile WWW
« 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  [Expand]
<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?
Logged
plasticphyte
Newbie
*
Offline Offline

Posts: 13

Thank You
-Given: 0
-Receive: 1


View Profile
« Reply #4 on: July 13, 2008, 01:35:53 PM »

Change it to just
1
rel="lightbox"
.

The [{cat_id}] part only works if displaying from the thumbnail page.
Logged
lanman_de
Pre-Newbie

Offline Offline

Posts: 2

Thank You
-Given: 0
-Receive: 0


View Profile
« Reply #5 on: August 18, 2008, 12:35:54 PM »

Thx for that cool mod !
Logged
siLenTia
Pre-Newbie

Offline Offline

Posts: 1

Thank You
-Given: 0
-Receive: 0


View Profile WWW
« 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?
Logged
spookypld
Pre-Newbie

Offline Offline

Posts: 8

Thank You
-Given: 0
-Receive: 0


View Profile
« 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.

Logged

whosthis.ee
Newbie
*
Offline Offline

Posts: 32

Thank You
-Given: 0
-Receive: 0


View Profile
« Reply #8 on: April 25, 2009, 03:17:00 PM »

the same is not working

instead all images are opening in new window
Logged
plasticphyte
Newbie
*
Offline Offline

Posts: 13

Thank You
-Given: 0
-Receive: 1


View Profile
« 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.
Logged
Steffen13
Newbie
*
Offline Offline

Posts: 23

Thank You
-Given: 6
-Receive: 0


View Profile
« Reply #10 on: January 24, 2010, 02:28:03 PM »

Hi,

i implemented it in the details.html.

1
                <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 » Logged
Pages: [1] Print 
« previous next »
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF | SMF © 2015, Simple Machines Valid XHTML 1.0! Valid CSS!
Page created in 0.116 seconds with 20 queries.
Post your comments here