title: jquery multiple slideshow on the same page
body: <p>I'm using a jquery code to display an image slideshow on my website, with a counter.</p>
  
  <p>When clicking on the image, img swicth between show and hide.</p>
  
  <p>here is the jquery code i'm using :</p>
  
  <pre><code>$(document).ready(function () {
      var count = $('.image_news').length;
      $("#total").text(count);
      // set display:none for all members of ".pic" class except the first
      $('.image_news:gt(0)').hide();
  
      // stores all matches for class="pic"
      var $slides = $('.image_news');
  
      $slides.click(function () {
          // stores the currently-visible slide
          var $current = $(this);
          if ($current.is($slides.last())) {
              $("#current").text("1");
              $current.hide();
              $slides.first().show();
          }
          // else, hide current slide and show the next one
          else {
              $("#current").text($current.next().index()+1);
              $current.hide().next().show();
          }
      });
  });
  </code></pre>
  
  <p>it works fine with one slideshow, but I would like to have several sildeshow on the same page, and I don't know how many so I can't add a unique ID to my images ('.image_news')...
  is there a way of doing it using $this ? I need also to have unique counter for each slideshow, and the slideshow to be fully independant... when clicking on first slideshow to navigate, only the first slideshow should slide.</p>
  
  <p>hope someone can help me with this, or maybe there's another way of doing it...</p>
  
  <p>here is a jsfiddle to see it in action :</p>
  
  <p><a href="http://jsfiddle.net/XRpeA/19/" rel="nofollow">http://jsfiddle.net/XRpeA/19/</a></p>
  
  <p>thanks for your help</p>