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:
var fileBottomNavCloseImage = "images/closelabel.gif";
..you need to change this to:
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:
..you add the following:
<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.
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
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
IMPORTANT: I've now moved to ultranerds.co.uk, and the .com will no longer work!
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package (plugins total "value" $3,325 & rising, for just $350)| GLinks ULTRA Package PRO (plugins total "value" $5,625 & rising, for just $500)
Support Forum | Links SQL Plugins | DMOZ Dumps | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Compare our different Plugin packages *new* Free CSS Templates
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
IMPORTANT: I've now moved to ultranerds.co.uk, and the .com will no longer work!
Want to give me something back for my help? Please see my Amazon Wish List
GLinks ULTRA Package (plugins total "value" $3,325 & rising, for just $350)| GLinks ULTRA Package PRO (plugins total "value" $5,625 & rising, for just $500)
Support Forum | Links SQL Plugins | DMOZ Dumps | UltraNerds | ULTRAGLobals Plugin | Pre-Made Template Sets | FREE GLinks Plugins!
Compare our different Plugin packages *new* Free CSS Templates
. 
. 
