Problem targetting only specified element
<p>I've been working on a small jQuery plugin that creates an iPhoto-like preview when hovering over images. It all works great if I only have one set of images. As soon as I add more than one .preview set to the markup my plugin finds all of them and displays the total amount of indicators below each image.</p>

<p>Here is the JS:</p>

<pre><code>$(document).ready(function() {
    // launch preview browser
    $('.preview').previewBrowser();
});

(function($) {
    $.fn.previewBrowser = function() {
     return this.each(function() {
      // get dom
      var $viewport = $(this).css('overflow', 'hidden'),
       $container = $viewport.children('ul'),
       $items = $container.children('li'),
       $single = $items.filter(':first');

      // set viewport to correct size
      $viewport.css({ height: $single.height(), width: $single.width() });

      // set container to correct width
      $container.css({ height: $single.height(), width: $items.length * $single.width() });

      // float items
      $items.css({ float: 'left' });

      // add indicator to dom
      var indicator = '';

      for (i = 0; i &lt; $items.length; i++) {
       indicator += '&lt;li class="left"&gt;O&lt;/li&gt;';
      }

      $(indicator).appendTo('.indicator');

      // set default indicator
      $('.indicator li:eq(0)').css('color', 'red');

      // set scrolling position while mouseover
      $viewport.bind('mousemove.previewBrowser', function(evt) {
       x = evt.pageX - this.offsetLeft;

       offset = Math.floor(x / ($single.width() / $items.length)) * $single.width();

       $(this).animate({ scrollLeft: offset }, 1);

       // get current item
       currentItem = (offset / $single.width());

       // set current color
       $('.indicator li').not('.indicators li:eq(' + currentItem + ')').css('color', 'black');
       $('.indicator li:eq(' + currentItem + ')').css('color', 'red');

       return false;
      });

      // set default image on mouseout
      $viewport.bind('mouseleave.previewBrowser', function(evt) {
       $(this).animate({ scrollLeft: 0 }, 1);

       // set current color
       $('.indicator li').not('.indicator li:eq(0)').css('color', 'black');
       $('.indicator li:eq(0)').css('color', 'red');
      });
     });
    };
})(jQuery);
</code></pre>

<p>And here is the markup:</p>

<pre><code>&lt;div id="content"&gt;
    &lt;div class="entry"&gt;
     &lt;div class="preview"&gt;
      &lt;ul class="container"&gt;
       &lt;li&gt;&lt;img height="350" src="images/digitalsamba_1.png" width="800" /&gt;&lt;/li&gt;

       &lt;li&gt;&lt;img height="350" src="images/digitalsamba_2.png" width="800" /&gt;&lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;&lt;!-- end preview --&gt;

     &lt;div class="description"&gt;
      &lt;div class="caption"&gt;
       &lt;h2&gt;CloudApp&lt;/h2&gt;

       &lt;p&gt;
        &lt;strong&gt;Product:&lt;/strong&gt; CloudApp / &lt;strong&gt;Type:&lt;/strong&gt; Development, Icon, Interface
       &lt;/p&gt;
      &lt;/div&gt;&lt;!-- end caption --&gt;

      &lt;div&gt;
       &lt;ul class="indicator"&gt;&lt;/ul&gt;
      &lt;/div&gt;&lt;!-- end indicator --&gt;
     &lt;/div&gt;&lt;!-- end description --&gt;
    &lt;/div&gt;&lt;!-- end entry --&gt;

    &lt;div class="entry no_border"&gt;
     &lt;div class="preview"&gt;
      &lt;ul class="container"&gt;
       &lt;li&gt;&lt;img height="350" src="images/digitalsamba_1.png" width="800" /&gt;&lt;/li&gt;

       &lt;li&gt;&lt;img height="350" src="images/digitalsamba_2.png" width="800" /&gt;&lt;/li&gt;
      &lt;/ul&gt;
     &lt;/div&gt;&lt;!-- end preview --&gt;

     &lt;div class="description"&gt;
      &lt;div class="caption"&gt;
       &lt;h2&gt;Canon Lense&lt;/h2&gt;

       &lt;p&gt;
        &lt;strong&gt;Product:&lt;/strong&gt; Canon / &lt;strong&gt;Type:&lt;/strong&gt; Icon
       &lt;/p&gt;
      &lt;/div&gt;&lt;!-- end caption --&gt;

      &lt;div class="indicator"&gt;&lt;/div&gt;&lt;!-- end indicator --&gt;
     &lt;/div&gt;&lt;!-- end description --&gt;
    &lt;/div&gt;&lt;!-- end entry --&gt;
&lt;/div&gt;&lt;!-- end content --&gt;
</code></pre>

<p>I know I am targeting the items wrong but I just can't figure out how to do it correctly.</p>
