Cert IV in IT (Web Design)

Category Archive

The following is a list of all entries from the Javascript category.

Comments (0)

Creating a Lightbox for your images




The links look like the following:<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>Now the order is important.For now we are ready.The head section will look similar to this: Any other CSS and JavaScript can be placed after line 8 in the sample shown.Now we can turn our attention to the actual images.In the main body of your page, if you wish to use a lightbox effect on any image then you do the following steps.Insert the image as normal.Insert the image’s thumbnail immidiately to the right of the image. For example the code below shown the flow2a and flow2a-thm files insertedintot he code:<img src=”photos/flow2a.jpg” alt=”TheFlow” width=”639″ height=”510″ /><imgsrc=”photos/flow2a-thm.jpg” alt=”The flow thumbnail” width=”100″ height=”100″ />Now we modify the code to create our lightbox link:we start by changing the first img src into an a href, removing the widthadn height sections, plus the / before the > <a href=”photos/flow2a.jpg” alt=”The Flow”><img src=”photos/flow2a-thm.jpg” alt=”The flow thumbnail” width=”100″ height=”100″ /> Now change the alt to title and if you wish extend the title of the image:<a href=”photos/flow2a.jpg” title=”The Flow, and image “>We now add the rel=”lightbox” attribute to the a href.

Comments (0)

Further Links – CSS and more