title: jquery next previous for images
body: <p>I want to make one image gallery where I just click anywhere in left half of image for previous photo and anywhere in  right side of photo for next photo.
   I have issue in setting up jQuery</p>
  
  <p>I have this html code </p>
  
  <pre><code>&lt;tr&gt;&lt;td align="center" width="6%"&gt;&lt;span id="picviewer-prev" class="picviewer-area"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;strong&gt;&lt;a id="picviewer-prev" onclick="jQuery.image({ ajax:    'http://way2enjoy.com/jquery/photolove/785' });return false;" href="#"&gt;&lt;img align="absmiddle" src="js/left.png"&gt;&lt;/a&gt;&lt;/strong&gt;&lt;/td&gt;&lt;td width="57%" align="center"&gt;
  &lt;div id="imgtag" style="width:600px;"&gt;&lt;img src="/upload/media_files/00/00/00/47/51/4751.photo.jpg" style="max-width:600px;margin-bottom:-3px;"&gt;&lt;/div&gt;&lt;/td&gt;&lt;td align="top" width="6%"&gt;&lt;span id="picviewer-next" class="picviewer-area"&gt;&lt;span&gt;&lt;/span&gt;&lt;/span&gt;&lt;strong&gt;&lt;a id="picviewer-next" onclick="jQuery.image({ ajax: 'http://way2enjoy.com/jquery/photolove/787' });return false;" href="#"&gt;&lt;img align="absmiddle" src="js/right.png"&gt;&lt;/a&gt;&lt;/strong&gt;&lt;/td&gt;&lt;td width="31%" valign="top" style="background:#fff;overflow:hidden;"&gt;&lt;/td&gt;&lt;td width="400" valign="top" style="padding-left:30px"&gt;&lt;div class="hr"&gt;&lt;/div&gt;&lt;/td&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>CSS code  </p>
  
  <pre><code>  &lt;style&gt;
    #picviewer-prev 
    {
        left: -150px;
        right: 50%;
    }
    .picviewer-area {
        bottom: 0;
        cursor: pointer;
        display: block;
        position: absolute;
        top: 0;
        z-index: 10;
    }
  
    #picviewer-next {
     left: 50%;
     right: -150px;
    }
    .picviewer-area {
     bottom: 0;
     cursor: pointer;
     display: block;
     position: absolute;
     top: 0;
     z-index: 10;
    }
    &lt;/style&gt;
  </code></pre>
  
  <p>jQuery</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;$(document).ready(function()
  
        { $("#picviewer-prev").click( prev );
       $("#picviewer-next").click( prev );
  
       });&lt;/script&gt;
  </code></pre>
  
  <p>but when I click on image nothing happens. I think my jQuery is wrong.</p>