DataLife Engine English Support Site » Javascript Image Lightbox
Welcome,. Enter Username, or register.
Welcome,. Enter Username, or register.
ApadanaGroup's Hosting Services available now with Unbelievable LOW
PRICES,
Unlimited SPACE AND Unlimited Transfer ....Check it out !!!
http://unlimitpackage.net/
Javascript Image Lightbox
---26 August 2006.
Click on the image below once this page has fully loaded.
How to Use:
Part 1 - Setup
1. Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.
upload all .js files to engine/ajax/
2. Include the Lightbox.CSS file (or append your active stylesheet with the Lightbox styles).
Upload this file to the css folder of the theme you use.
Put above code in the main.tpl just under tag. Point the url above to the /theme/folder/css folder it is in.
3. Check the .CSS file and make sure the referenced prev.gif and next.gif images are pointing in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.
Part 2 - Activate
1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:
I enter the above code using the BBCODE editor in DLE not the wysiwyg, or it wont work.
Optional: Use the title attribute if you want to show a caption.
2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!
Only registered users can upload files.
How to Use:
Part 1 - Setup
1. Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.
<script type="text/javascript" src="/engine/ajax/prototype.js"></script>
<script type="text/javascript" src="/engine/ajax/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/engine/ajax/lightbox.js"></script>
<script type="text/javascript" src="/engine/ajax/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="/engine/ajax/lightbox.js"></script>
upload all .js files to engine/ajax/
2. Include the Lightbox.CSS file (or append your active stylesheet with the Lightbox styles).
Upload this file to the css folder of the theme you use.
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
Put above code in the main.tpl just under tag. Point the url above to the /theme/folder/css folder it is in.
3. Check the .CSS file and make sure the referenced prev.gif and next.gif images are pointing in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.
Part 2 - Activate
1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:
<a href="PATH/cat.jpg" rel="lightbox" title="Caption- cute cat!"><img src="PATH/cat_thumb.jpg" /></a>
I enter the above code using the BBCODE editor in DLE not the wysiwyg, or it wont work.
Optional: Use the title attribute if you want to show a caption.
2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!
Only registered users can upload files.
Your are currently a guest on this site. Please click here to register
- views: 1090
-
Print
|
|
 |
|
| |
#3 
midoodj
midoodj
Joined: 8.09.2006 | ICQ: --
#1 Tak
Tak
User Group: Editor
Seems to work, but the editor can play hell with it if you try to edit it after a post. If you post it with the bbcode editor and do it right the first time it will work. Otherwise the DLE editor changes the bloody tags around every time you edit the article and screws the javascript. 
--------------------
On Holidays for over a year ;) Joined: 3.06.2006 | ICQ: --
Information
Members of Guest cannot leave comments.
Users: 0
User Group: Member