Photo Gallery Demo
- Create a folder in your root directory and name it assets
- Copy the gallery.css to the assets folder (right click as save link as)
- copy the jquery.galleria.js and galleria_enhanced.js to the assets folder (right click as save link as for each)
- In your header add these lines of code:
- 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>
- 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>
- link to the stylesheet for the galleria
<link type="text/css" href="/~webclass/yourname/assets/galleria.css" rel="stylesheet" media="screen">
- 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>
- Test and modify gallery.css until you're happy with the look
- For more information see The Galleria Demo site