Most of the light box jquery effects are
very heavy weight with lots of lines of code. I have come across a light box
plugin Lightbox JS v2.0 , which is very easy to use and has very few lines of
code.
11)
Download the plugin LightBox JS
v2.0 on your systems.
22)
Add the following 4 lines in
your <head> tag
<link rel="stylesheet" href="css/lightbox.css"
type="text/css" media="screen" />
<script src="js/prototype.js"
type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder"
type="text/javascript"></script>
<script src="js/lightbox.js"
type="text/javascript"></script>
33) add rel=”lightbox” to the link
tag where you what the effect to appear. Eg
<a href="images/image-1.jpg"
rel="lightbox" title="my caption">image #1</a>
44)
if you have a image set which
you want to group,add an attribute name with lightbox in square brackets:
<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>
And you are done…
J
No comments:
Post a Comment