Lightbox or prettyphoto

Question

I am teaching myself how to build a gallery website for my artwork using CSS, and Dreamweaver as the script editor. I have found some good pdf's and the site was coming along nicely until I tried to incorporate Lightbox or prettyphoto. My thumbnails change to fullsreen but the effects aren't there. Are there any tutorials to show which files go where and examples of code?

Answer 1

Both of the options come with their own documentation, and typically an example download that you can view. If this isn't present, examine the source of of online demos to see how CSS files are referenced.

Lightbox / How to use?

# reference both jQuery and lightbox
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.4.js"></script>

# reference the stylesheet
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.4.css" />

# indicate which links are lightbox links
<a href="bigImage.jpg" class="lightbox">
  <img src="littleImage.jpg" />
</a>

# activate lightbox on lightbox links
$("a.lightbox").lightBox();

Prettyphoto / How to use?

# reference both jQuery and prettyphoto
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>

# reference the stylesheet
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" />

# indicate which links are prettyphoto link
<a href="bigImage.jpg" rel="prettyPhoto">
  <img src="littleImage.jpg" />
</a>

# activate prettyphoto on prettyphoto links
$("a[rel^='prettyPhoto']").prettyPhoto();