Then open the page you would like to add the lightbox gallery to in Dreamweaver.
Paste this code right under the <!– TemplateBeginEditable name=”head” –>
<script src=”/include_files/plugins/jquery-lightbox-0.5/js/jquery.lightbox-0.5.js” type=”text/javascript”></script>
<link href=”/include_files/plugins/jquery-lightbox-0.5/css/jquery.lightbox-0.5.css” media=”screen” rel=”stylesheet” type=”text/css”></link>
<script type=”text/javascript”>
$(function() {
$(‘#gallery a’).lightBox();
});
</script>
<style type=”text/css”>
/* jQuery lightBox plugin – Gallery style */
#gallery {
background-color: #fff;
padding: 10px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #fff;
border-width: 5px;
}
#gallery ul a:hover img {
border: 5px solid #3e3e3e;
border-width: 5px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
Then paste this code where you want the thumbnails to show up and replace the path to the image, description, path to your thumbnail image, and alt tag.
<div id=”gallery”>
<ul>
<li><a href=”path-to-your-big-image-goes-here.jpg” title=”Description of your image here, which will show up below the image once clicked”><img src=”path-to-your-thumbnail-image-goes-here.jpg” width=”100″ height=”100″ alt=”Description of your image here” /></a>
</li>
</ul>
</div>
For each image you have you will want to copy and paste the whole <li> tag. For example if you have four images you will need to have four <li> tags.
<li><a href=”path-to-your-big-image-goes-here.jpg” title=”Description of your image here, which will show up below the image once clicked“><img src=”path-to-your-thumbnail-image-goes-here.jpg” width=”100″ height=”100″ alt=”Description of your image here” /></a>
</li>
<li><a href=”path-to-your-big-image-goes-here.jpg” title=”Description of your image here, which will show up below the image once clicked“><img src=”path-to-your-thumbnail-image-goes-here.jpg” width=”100″ height=”100″ alt=”Description of your image here” /></a>
</li>
<li><a href=”path-to-your-big-image-goes-here.jpg” title=”Description of your image here, which will show up below the image once clicked“><img src=”path-to-your-thumbnail-image-goes-here.jpg” width=”100″ height=”100″ alt=”Description of your image here” /></a>
</li>
<li><a href=”path-to-your-big-image-goes-here.jpg” title=”Description of your image here, which will show up below the image once clicked“><img src=”path-to-your-thumbnail-image-goes-here.jpg” width=”100″ height=”100″ alt=”Description of your image here” /></a>
</li>
View an example of lightbox being used, https://wou.edu/las/creativearts/theater_dance/dance/photodance_test.php
Please let me know if you have further questions gauntzd@wou.edu or 503-838-8215