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
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!
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!