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!
Subject Author Views Date
Thread [TUTORIAL] Using Lightbox in Thumb_Images (or even just images) Andy 14542 Sep 10, 2007, 9:43 AM
Thread Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
aus_dave 14253 Sep 12, 2007, 12:21 AM
Thread Re: [aus_dave] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
Andy 14156 Sep 12, 2007, 1:46 AM
Thread Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
aus_dave 14199 Sep 12, 2007, 2:16 AM
Thread Re: [aus_dave] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
Andy 14188 Sep 12, 2007, 2:43 AM
Post Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
chapelier 13925 Oct 8, 2007, 8:00 AM
Thread Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
Matthias70 13762 Mar 27, 2008, 5:56 AM
Thread Re: [Matthias70] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
Andy 13785 Mar 27, 2008, 5:59 AM
Thread Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
Matthias70 13822 Mar 27, 2008, 6:17 AM
Thread Re: [Matthias70] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
Andy 13774 Mar 27, 2008, 6:20 AM
Post Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
Jonze 13690 Apr 3, 2008, 8:04 PM
Thread Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
socrates 13800 Apr 3, 2008, 8:51 PM
Post Re: [socrates] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
Jonze 13724 Apr 3, 2008, 10:33 PM
Thread Re: [socrates] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
Andy 13856 Apr 4, 2008, 1:26 AM
Thread Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
Matthias70 13320 Mar 26, 2011, 10:51 AM
Thread Re: [Matthias70] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
Andy 13218 Mar 26, 2011, 10:54 AM
Thread Re: [Andy] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
Matthias70 13264 Mar 26, 2011, 11:55 AM
Post Re: [Matthias70] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
Andy 13235 Mar 26, 2011, 11:56 AM
Post Re: [Matthias70] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
SandraR 13203 Mar 27, 2011, 11:28 AM
Thread Re: [Matthias70] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
MJB 13102 Apr 14, 2011, 11:06 AM
Post Re: [MJB] [TUTORIAL] Using Lightbox in Thumb_Images (or even just images)
Matthias70 13126 Apr 14, 2011, 12:03 PM