Cert IV in IT (Web Design)

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.

Further Links – CSS and more

• CSS Help Pile: Links and Discussion About the Best CSS Resources on the web
• CSS Basics – Making Cascading Style Sheets Easy to Understand
• Writing cross-browser CSS | 456 Berea Street
• Dnevnik eklektika · CSS Stamps
• johnoxton.co.uk: Scalable logos
• SkimCSS – Skim Everything (CSS) Cascading Style Sheet Related!
• 24 ways: Centered Tabs with CSS
• Friendly Bit » Cross-browser strategies for CSS
• Managing HTML and CSS to Keep Clients Happy and Avoid ‘Disaster’ – Part One
• Zimbra™ – Zimbra Ajax Toolkit Download
• Semantic Typography: Bridging the XHTML gap : Journal : Mark Boulton | Information design
• Become a better Standardista | Muffin Research Labs
• PHP + CSS Dynamic Text Replacement (P+C DTR) – CSS Help Pile
• wg:Printing CSS background images (sort of)
• Lightbox JS

Books and Resources

When studying this course most of the lecturers will not specify a text book for youi to use. As a result we will list books that may be useful.

The following is a starter list, but will be extended. If you find a resource that is suitable, add the detaisl to the comments.

Designing Web usability

Jakob Nielsen [New Riders, 2000]

Elements of Web Design, 2nd Ed

Darcy DiNuccie [Peachpit, 1998]

Macromedia Dreamweaver MX, training from the source

[Macromedia Press, 2003]

Usability: The site speaks for itself

Braun, Gadney, Haughley, Roselli, Synstelien, Walter, Wertheimer [glasshaus, 2002]

Macromedia Dreamweaver MX, complete concepts and techniques

Shelly, Cashman & Wells [Thomson Course Technology, 2004]