My first gallery app

My first gallery app

Hi there

I have been experimenting with jQuery for the first time this past week. I thought that I understood it well enough, but now something isn't clicking. I tried to write a simple image gallery but it just does not seem to do what I expected it to.

Here is my code:

  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Untitled Document</title>
  5. <script type="text/javascript" src="jQuery.js"></script>
  6. <style>
  7.     ul li{
  8.         display:none;
  9.         list-style-type:none;
  10.     }
  11. </style>
  12. <script type="text/javascript">
  13.     $(function() {
  14.         var i=0;
  15.         $('#imageList li:eq(0)').slideDown('fast');
  16.         $('#next').click(function (){
  17.             $('#imageList li:eq(i)').slideUp('fast');
  18.             i++;
  19.             $('#imageList li:eq(i)').slideDown('fast');
  20.         });
  21.         $('#prev').click(function (){
  22.             $('#imageList li:eq(i)').slideUp('fast');
  23.             i--;
  24.             $('#imageList li:eq(i)').slideDown('fast');
  25.         });
  26.     });
  27. </script>
  28. </head>
  29. <body>
  30.     <ul id="imageList">
  31.         <li><img src="1.jpg" /></li>
  32.         <li><img src="2.jpg" /></li>
  33.         <li><img src="3.jpg" /></li>
  34.         <li><img src="4.jpg" /></li>
  35.     </ul>
  36.     <a href="#" id="prev">Prev</a>
  37.     <a href="#" id="next">Next</a>
  38. </body>
  39. </html>

The problem seems to be that it does not accept the variable 'i' as a parameter for li:eq() on lines 17, 19, 22 and 24. I've output i's value to the console and it looks fine. If I replace it with numerical values it works fine, but then I can't change which image I'm showing and hiding.

Does anyone have any suggestions why this is not working?