PDA

View Full Version : LIGHTBOX help


newbie23
09-16-2011, 02:20 PM
Hi Guys

I am desperately trying to figure out how to incorporate Lightbox into my website. At the moment I have images showing by thumbnails into a larger viewing box with a mouseover system. I would like to change this to lightbox.
I just can't quite figure out the code to use.
This is what I have at the moment....what do I need to do?

<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style2 {font-size: 18px}
.style3 {font-size: 14px}
-->
</style>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style4 {color: #C7DF13; font-family: Georgia, "Times New Roman", Times, serif;}
-->
</style>
</head>

<div id="Accordion1" class="Accordion" tabindex="0">

<div class="AccordionPanel">
<div class="AccordionPanelTab">CELEBRATIONS</div>
<div class="AccordionPanelContent">
<div class="thumb">
<p><img src="images/Gallery images/70 x 70 for web/Celebration/Celebration19_sml.jpg" onmouseover="document.getElementById('bigimg_occ').src = 'images/Gallery images/350 x 350 for web/Celebration/Celebration19_web.jpg';" onmouseout="document.getElementById('bigimg_occ').src = 'images/Gallery images/350 x 350 for web/Logo_gallery.jpg';" >
<img src="images/Gallery images/70 x 70 for web/Celebration/Celebration18_sml.jpg" onmouseover="document.getElementById('bigimg_occ').src = 'images/Gallery images/350 x 350 for web/Celebration/Celebration18_web.jpg';" onmouseout="document.getElementById('bigimg_occ').src = 'images/Gallery images/350 x 350 for web/Logo_gallery.jpg';" >
<img src="images/Gallery images/70 x 70 for web/Celebration/Celebration2_sml.jpg" onmouseover="document.getElementById('bigimg_occ').src = 'images/Gallery images/350 x 350 for web/Celebration/Celebration2_web.jpg';" onmouseout="document.getElementById('bigimg_occ').src = 'images/Gallery images/350 x 350 for web/Logo_gallery.jpg';" >
<br />

Corrosive
09-16-2011, 03:49 PM
Follow the instructions here; http://www.lokeshdhakar.com/projects/lightbox2/

domedia
09-16-2011, 04:16 PM
And make sure you delete the current code before you start following the Lightbox instructions.