Hello,
I want to build in Lightbox 2.03 in my future website, so when people click on a picture they see the picture in bigger size. I downloaded the software. But after that I really don't know what to do. They have an installation instruction, but I really don't understand any of that. I will post the instruction below, maybe someone can explain it to me in normal words what to do.
Many many thanks,
This is the instruction:
<script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects"></script><script type="text/javascript" src="js/lightbox.js"></script><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /(now where is the head section of the page?)
I want to build in Lightbox 2.03 in my future website, so when people click on a picture they see the picture in bigger size. I downloaded the software. But after that I really don't know what to do. They have an installation instruction, but I really don't understand any of that. I will post the instruction below, maybe someone can explain it to me in normal words what to do.
Many many thanks,
This is the instruction:
Step 1: Insert the below code in the HEAD section of your page:
<script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects"></script><script type="text/javascript" src="js/lightbox.js"></script><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /(now where is the head section of the page?)
Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library.
The rel attribute is mandatory in order to activate the effect for this particular image. The "title" attribute is optional, and when defined, adds a caption beneath the enlarged image.
The "href" attribute obviously should contain the path to the enlarged image.
If you wish a particular caption ("title") to be hyperlinked to a specific URL, throw in a "rev" attribute pointing to the desired URL. For example:
Step 2: Create your "thumbnail" image links, for example:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
The rel attribute is mandatory in order to activate the effect for this particular image. The "title" attribute is optional, and when defined, adds a caption beneath the enlarged image.
The "href" attribute obviously should contain the path to the enlarged image.
If you wish a particular caption ("title") to be hyperlinked to a specific URL, throw in a "rev" attribute pointing to the desired URL. For example:
<a href="images/image-1.jpg" rel="lightbox" title="my caption" rev="http://www.dynamicdrive.com">image #1</a>
LightBox version 2 also adds the ability to group multiple image links together, so an image gallery is created out of the enlarged images:
<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>
As you can see, to group image links together, simply modify the "rel" attribute to be "lightbox[roadtrip]" instead, where "roadtrip" is an
arbitrary but unique name for that group. You can have multiple groups of images on the same page- just use a unique group name in each case.
Grouped images can be cycled through by clicking on the right/left edges of each enlarged image.
LightBox version 2 also adds the ability to group multiple image links together, so an image gallery is created out of the enlarged images:
<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>
As you can see, to group image links together, simply modify the "rel" attribute to be "lightbox[roadtrip]" instead, where "roadtrip" is an
arbitrary but unique name for that group. You can have multiple groups of images on the same page- just use a unique group name in each case.
Grouped images can be cycled through by clicking on the right/left edges of each enlarged image.
(well I didn't even get through step 1, so this is even more bla bla to me:P)
many many thanks
Moad Chekh
Comment