Gossamer Forum
Home : Products : Gossamer Links : Development, Plugins and Globals :

[TUTORIAL] Using Lightbox in Thumb_Images (or even just images)

Quote Reply
[TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
Hi,

Recently, I was pointed in the direction of Lightbox. Its a really cool CSS/JS freebie, which does some pretty cool stuff =)

To see what it can do (before reading more =)), please go to this URL, and then scroll down to the "Screenshots" section. Then, just click on one of the images., You should see a black box appear, with the full image.

http://www.ultranerds.com/...rsion/GooglePR_L204/

Ok, now here is what you need to do to set it up on GLinks;

1) Download from http://www.huddletogether.com/.../lightbox2/#download - and open the ZIP.
2) Make a new directory in your www folder (public_html, or whatever you use), inside the /images folder. For example - if your images are saved in /www/images/, you need a new directory called /www/images/lightbox/
2) Open /js/lightbox.js, and find:

Code:
var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";

..you need to change this to:

Code:
var fileLoadingImage = "/images/lightbox/images/loading.gif";
var fileBottomNavCloseImage = "/images/lightbox/images/closelabel.gif";

3) Then upload all the files from the ZIP into your newly created folder, /www/images/lightbox/.

Once you have done that, you need to edit you're include_common_head.html, so that below:

Code:
<%if theme%><link type="text/css" rel="stylesheet" href="<%config.build_static_url%>/<%t%>/<%theme%>.css" /><%endif%>

..you add the following:

Code:
<script type="text/javascript" src="/images/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="/images/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/images/lightbox/js/lightbox.js"></script>
<link rel="stylesheet" href="/images/lightbox/css/lightbox.css" type="text/css" media="screen" />

Then, that should be all the required codes in place.

Now, to make an image open up in Lightbox, you need to edit the <a href=...>..</a> tag.

This is a standard format for showing an image in Thumb_Images.

Code:
<%if Photo%>
Photo:
<a href="<%Plugins::Thumb_Images::ThumbFullURL($ID,'Photo','Category')%>">
<img src="<%Plugins::Thumb_Images::ThumbURL($ID,'Photo','Category')%>" border="0"><br/>View Image
</a>
<%endif%>

..and here is an example of how it can be edited to work with Lightbox:L
Code:
<%if Photo%>
Photo:
<a href="<%Plugins::Thumb_Images::ThumbFullURL($ID,'Photo','Category')%>" rel="lightbox[myimages]">
<img src="<%Plugins::Thumb_Images::ThumbURL($ID,'Photo','Category')%>" border="0"><br/>View Image
</a>
<%endif%>

Hopefully thats complete enough, if not - please let me know, and I'll do my best to help you along =)

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
Indeed - using both together looks very slick Cool.

You can also add a title attribute to the link which will be used as the caption on the large image e.g.:

Code:
title="<%Title%>, submitted by <%LinkOwner%>"
Quote Reply
Re: [aus_dave] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
Hi,

Glad you like =) Were you using it before I did that tutorial though? :P (can't remember who it was who referred me to it =))

For our site, we have a caption field for each of the images, so we have Image1, and then Image1_Caption. That way, we aren't restricted by what we can put in really :)

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
Andy wrote:
Were you using it before I did that tutorial though? :P (can't remember who it was who referred me to it =))
I mentioned it to you a while back when I bought that plugin...probably was me Wink.
Quote Reply
Re: [aus_dave] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
haha thought so =)

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
Hi,

I am already using slimbox...another cut down version of lightbox. I have about 40000 photos on my site but about 10 percent have a character space.
It works o.k with FF and Netscape but in IE6 it just hangs the opening of the picture. I'm trying to find a way in Perl to substitute the character space to something else that will work. Is this possible?

Would I do this as a global? would anyone have any idea for the syntax for this? I'm not at all versed in Perl so i am just guessing with everything I try
:(
Quote Reply
Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
Hi Andy,
I'm just trying to group some images in lightbox.
I have two categories with images

What do you think? Is this the best way?

<%if Full_Name contains "Category_1"%>rel="lightbox[images_1]
<%elsif Full_Name contains "Category_2"%>rel="lightbox[images_2]<%endif%>

How do you group your images for a plugin on ultranerds?

Thanks
Matthias

Matthias
gpaed.de
Quote Reply
Re: [Matthias70] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
Hi,

I'm a little confused as to what your trying to do?

I just use:

<%if Full_Name contains "Category_1"%>rel="lightbox[images]
<%elsif Full_Name contains "Category_2"%>rel="lightbox[images]<%endif%>

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
Hi Andy,
I just saw that the user only can click through all images, even in two categories, when he activates lightbox on my new links page.
In category pages it works fine.
Thanks
Matthias

Andy wrote:
I just use:

<%if Full_Name contains "Category_1"%>rel="lightbox[images]
<%elsif Full_Name contains "Category_2"%>rel="lightbox[images]<%endif%>

But why are you using an if-statement, when your "rel="lightbox[images]" stays the same?

Thanks
Matthias

Matthias
gpaed.de
Quote Reply
Re: [Matthias70] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
Quote:
Hi Andy,
I just saw that the user only can click through all images, even in two categories, when he activates lightbox on my new links page.
In category pages it works fine.
Thanks

Sorry?

Quote:
But why are you using an if-statement, when your "rel="lightbox[images]" stays the same?

I don't - I just edited your code =)

I used several images for each screenshot - and then the user can just go from one to another, by clicking the "next" and "prev" images - so all my links to images, have rel="lightbox"

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
Hey Andy!

Thanks for the extremely helpful tutorial.

I've been having trouble getting Lightbox to work with your Thumb_Images plug.

EDIT:

Nevermind. Found the problem I believe...

With the latest version of Lightbox you need to change the following code:

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


Add the part in red.

Last edited by:

Jonze: Apr 3, 2008, 8:17 PM
Quote Reply
Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
Quote:
I used several images for each screenshot - and then the user can just go from one to another, by clicking the "next" and "prev" images - so all my links to images, have rel="lightbox"

But most users do not know unless they place their cursor on the top of the image that they can navigate like that (next-prev) and will see the next-preve buttons. So, it would be nice if you can put a note at the bottom somewhere for the photo gallery plugin saying that NOTE: to see additional images place your cursor on top right corner of the image.
Quote Reply
Re: [socrates] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
While looking for lightbox mods I found some interesting alteratives. Useful for displaying other forms of content like movies, iframes, ect...

http://stickmanlabs.com/lightwindow/

http://vikjavev.no/highslide/

http://orangoo.com/labs/?page_id=5
Quote Reply
Re: [socrates] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
Hi,

Quote:
So, it would be nice if you can put a note at the bottom somewhere for the photo gallery plugin saying that NOTE: to see additional images place your cursor on top right corner of the image.

Afraid I'm not sure where you would do that :P

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
Hi Andy,
there are many updates to the lightbox javascript code.
Actually there is version 2.05 out.

Is it possible to just replace the new javascript file with the old?

Thanks

Matthias
gpaed.de
Quote Reply
Re: [Matthias70] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
Hi,

Yup, that should work just fine :)

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
Andy wrote:
Hi,

Yup, that should work just fine :)

Thanks for the reply.
With the new version I had problems to show the close image in the bottom of the popup. Maybe a bug?
So I will stay with the old version.

Matthias
gpaed.de
Quote Reply
Re: [Matthias70] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
Ah weird - I would say I would take a look - but its almost 7pm here now, and I've been working all day - I'm shattered :(

Cheers

Andy (mod)
andy@ultranerds.co.uk
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package | GLinks ULTRA Package PRO
Links SQL Plugins | Website Design and SEO | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Quote Reply
Re: [Matthias70] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
I had reload the entire think over again also changed the Head coding t get it to work for me.


Sandra Roussel
Chonsa Group Design - Fresh Start Housing
Quote Reply
Re: [Matthias70] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
Matthias70 wrote:
With the new version I had problems to show the close image in the bottom of the popup.

You need to edit lines 49 and 50 of lightbox.js to link to your image directory where 'loading.gif' and 'close.gif' are stored.

Code:
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
Quote Reply
Re: [MJB] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) In reply to
MJB wrote:
Matthias70 wrote:
With the new version I had problems to show the close image in the bottom of the popup.


You need to edit lines 49 and 50 of lightbox.js to link to your image directory where 'loading.gif' and 'close.gif' are stored.

Code:
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

Hi MJB,
I was always looking into the css file, where the next and previous buttons are defined.
lightbox.js is the file for loading and close gif.
Thanks for your help Smile

Matthias
gpaed.de