title: Target a single instance of a class element
body: <p>I have a list of classified ads with multiple images.I have php creating the thumbs and I simply want to do a image gallery where clicking on the thumbs change the image in the main div. My problem is that there is a looping situation with multiple ads, so I have a problem targeting the main div since the .class attibute target all instances of the class.
  A div '.annonce' englobes the images in separate divs <code>.annoncephoto1</code>, <code>.annoncephoto2</code> etc...
  The images have the same name except for the prefix 120__ or 600__ depending if it is intended for the main window or the thumb window. So how to target the current main div?
  Here is my javascript codes which works but changes the image in all the main div on the page.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('.thumbs img').click(function(){
      $('.bigimage').attr('src',$(this).attr('src').replace('120__','600__'));    
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Thanks to  Lazarevic Ivan for this code base that I found on stackoverflow.
  As asked here is the html:</p>
  
  <pre><code>foreach($results as $book){
  $specialtexts = preg_replace($patterns,$reps,$book[8]);  
  echo '&lt;div class="annonces"&gt;';
  if ($book[9])
  {
  $p = new phMagick();
  $imageUrl = $p-&gt;onTheFly('annonce/' . $book[10], 120);
  $imageUrl = $p-&gt;onTheFly('annonce/' . $book[10], 600);
  echo '&lt;div class="annoncephoto1" id="id1" &gt;&lt;img class="bigimage" src="' . $imageUrl . '" /&gt;&lt;/div&gt;';
  } 
  echo '&lt;div class="thumbs" &gt;';
  if ($book[10])
  {$p = new phMagick();
  $imageUrl = $p-&gt;onTheFly('annonce/' . $book[10], 600);
  $imageUrl = $p-&gt;onTheFly('annonce/' . $book[10], 120);
  ?&gt;
  &lt;?php echo '&lt;img src="' . $imageUrl . '" /&gt;';
  }
  </code></pre>
  
  <p>etc...
  $imageUrl = $p->onTheFly resizes the image if the image doesn't already exist.</p>
  
  <p>Here is a simplified jsfiddle version: <a href="http://jsfiddle.net/qwhat/trrwygdv/" rel="nofollow">http://jsfiddle.net/qwhat/trrwygdv/</a>. Clicking the two images on the right should change the bigger image immediately to the left.</p>