info343/lectures/special-effects/files/gallery.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
   <head>
      <!--
      gallery.html
      Sliding image gallery example, Lecture 8: Special Effects
      INFO 343, Autumn 2012
      Morgan Doocy
      -->
      <title>gallery</title>
      
      <link href="gallery.css" type="text/css" rel="stylesheet" />
      
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
      <script src="gallery.js" type="text/javascript"></script>
   </head>

   <body>
      <h1>Image Gallery</h1>
      
      <div id="gallery">
         <div id="slider">
            <img src="photos/mountains.jpg" alt="Mountains" />
            <img src="photos/fish.jpg" alt="Fish" />
            <img src="photos/stones.jpg" alt="Stones" />
            <img src="photos/mountains2.jpg" alt="Mountains" />
         </div>
      </div>
      
      <ul id="nav">
         <!-- The 'javascript:' url is a bit of a hack. It executes empty
              JavaScript code when clicked, making the link do nothing. -->
         <li><a href="javascript:">Image 1</a></li>
         <li><a href="javascript:">Image 2</a></li>
         <li><a href="javascript:">Image 3</a></li>
         <li><a href="javascript:">Image 4</a></li>
      </ul>
   </body>
</html>