Photo Gallery Demo

  1. Create a folder in your root directory and name it assets
  2. Copy the gallery.css to the assets folder (right click as save link as)
  3. copy the jquery.galleria.js and galleria_enhanced.js to the assets folder (right click as save link as for each)
  4. In your header add these lines of code:
    1. link to the jquery javascript file up on the google site (this link is to latest build of version 1):
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    2. link to the two galleria javascript files (the enhanced gives the fade technique on the thumbnails and makes the call to jquery)
      <script type="text/javascript" src="/~webclass/yourname/assets/jquery.galleria.js"></script>
      <script type="text/javascript" src="/~webclass/yourname/assets/galleria_enhanced.js"></script>
    3. link to the stylesheet for the galleria
      <link type="text/css" href="/~webclass/yourname/assets/galleria.css" rel="stylesheet" media="screen">
  5. In your body, add your list of images: create an unordered list with images and give the ul a class of "gallery"
    <ul class="gallery"><li><img [snip] /></li></ul>
  6. Test and modify gallery.css until you're happy with the look
  7. For more information see The Galleria Demo site