Duplicating jquery to display mulitiple galleries
<p>Hey you guys, I'm trying to create 4 galleries with the same display but I find that when I replicate the codes it ruins the functionality in the other galleries... I'm sure it has to do with the Javascript and selector and defining when to display images but I am really at a loss in Javascript. Here is what one gallery looks like-  To clarify, what I mean is I tried duplicating the code shown below 4 times, in an attempt to recreate the galleries 4 times in 4 separate locations, but when I do that the first gallery will work and the rest will just stay idle with the loading function.</p>

<blockquote>
  <p><a href="http://i4.photobucket.com/albums/y132/Gio_21/Picture2-26.png" rel="nofollow"><img src="http://i4.photobucket.com/albums/y132/Gio_21/Picture2-26.png" width="100" height="100"></a> (Click to enlarge)</p>
</blockquote>

<p>The javascript code I use is shown in the first posting, and I basically copied that 4 times just in placed them in different divs and changed the hyperlinks. Here is the html:</p>

<blockquote>
  <p><a href="http://i4.photobucket.com/albums/y132/Gio_21/Picture5-11.png" rel="nofollow"><img src="http://i4.photobucket.com/albums/y132/Gio_21/Picture5-11.png" width="100" height="100"></a> (Click to enlarge)</p>
</blockquote>

<p>The original coding I am using comes from this site:
<a href="http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/" rel="nofollow">http://tympanus.net/codrops/2011/01/19/sweet-thumbnails-gallery/</a></p>

<pre><code>        /*
        the images preload plugin
        */
        (function($) {
            $.fn.preload = function(options) {
                var opts    = $.extend({}, $.fn.preload.defaults, options),
                    o       = $.meta ? $.extend({}, opts, this.data()) : opts;
                return this.each(function() {
                    var $e  = $(this),
                        t   = $e.attr('rel'),
                        i   = $e.attr('href'),
                        l   = 0;
                    $('&lt;img/&gt;').load(function(i){
                        ++l;
                        if(l==2) o.onComplete();
                    }).attr('src',i);   
                    $('&lt;img/&gt;').load(function(i){
                        ++l;
                        if(l==2) o.onComplete();
                    }).attr('src',t);   
                });
            };
            $.fn.preload.defaults = {
                onComplete  : function(){return false;}
            };
        })(jQuery);
</code></pre>

<hr>

<pre><code>        $(function() {
            //some elements..
            var $ps_container       = $('#ps_container'),
                $ps_image_wrapper   = $ps_container.find('.ps_image_wrapper'),
                $ps_next            = $ps_container.find('.ps_next'),
                $ps_prev            = $ps_container.find('.ps_prev'),
                $ps_nav             = $ps_container.find('.ps_nav'),
                $tooltip            = $ps_container.find('.ps_preview'),
                $ps_preview_wrapper = $tooltip.find('.ps_preview_wrapper'),
                $links              = $ps_nav.children('li').not($tooltip),
                total_images        = $links.length,
                currentHovered      = -1,
                current             = 0,
                $loader             = $('#loader');

            /*check if you are using a browser*/    
            var ie              = false;
            if ($.browser.msie) {
                ie = true;//you are not!Anyway let's give it a try
            }
            if(!ie)
                $tooltip.css({
                    opacity : 0
                }).show();


            /*first preload images (thumbs and large images)*/
            var loaded  = 0;
            $links.each(function(i){
                var $link   = $(this);
                $link.find('a').preload({
                    onComplete  : function(){
                        ++loaded;
                        if(loaded == total_images){
                            //all images preloaded,
                            //show ps_container and initialize events
                            $loader.hide();
                            $ps_container.show();
                            //when mouse enters the pages (the dots),
                            //show the tooltip,
                            //when mouse leaves hide the tooltip,
                            //clicking on one will display the respective image 
                            $links.bind('mouseenter',showTooltip)
                                  .bind('mouseleave',hideTooltip)
                                  .bind('click',showImage);
                            //navigate through the images
                            $ps_next.bind('click',nextImage);
                            $ps_prev.bind('click',prevImage);
                        }
                    }
                });
            });

            function showTooltip(){
                var $link           = $(this),
                    idx             = $link.index(),
                    linkOuterWidth  = $link.outerWidth(),
                    //this holds the left value for the next position
                    //of the tooltip
                    left            = parseFloat(idx * linkOuterWidth) - $tooltip.width()/2 + linkOuterWidth/2,
                    //the thumb image source
                    $thumb          = $link.find('a').attr('rel'),
                    imageLeft;

                //if we are not hovering the current one
                if(currentHovered != idx){
                    //check if we will animate left-&gt;right or right-&gt;left
                    if(currentHovered != -1){
                        if(currentHovered &lt; idx){
                            imageLeft   = 75;
                        }
                        else{
                            imageLeft   = -75;
                        }
                    }
                    currentHovered = idx;

                    //the next thumb image to be shown in the tooltip
                    var $newImage = $('&lt;img/&gt;').css('left','0px')
                                               .attr('src',$thumb);

                    //if theres more than 1 image 
                    //(if we would move the mouse too fast it would probably happen)
                    //then remove the oldest one (:last)
                    if($ps_preview_wrapper.children().length &gt; 1)
                        $ps_preview_wrapper.children(':last').remove();

                    //prepend the new image
                    $ps_preview_wrapper.prepend($newImage);

                    var $tooltip_imgs       = $ps_preview_wrapper.children(),
                        tooltip_imgs_count  = $tooltip_imgs.length;

                    //if theres 2 images on the tooltip
                    //animate the current one out, and the new one in
                    if(tooltip_imgs_count &gt; 1){
                        $tooltip_imgs.eq(tooltip_imgs_count-1)
                                     .stop()
                                     .animate({
                                        left:-imageLeft+'px'
                                      },150,function(){
                                            //remove the old one
                                            $(this).remove();
                                      });
                        $tooltip_imgs.eq(0)
                                     .css('left',imageLeft + 'px')
                                     .stop()
                                     .animate({
                                        left:'0px'
                                      },150);
                    }
                }
                //if we are not using a "browser", we just show the tooltip,
                //otherwise we fade it
                //
                if(ie)
                    $tooltip.css('left',left + 'px').show();
                else
                $tooltip.stop()
                        .animate({
                            left        : left + 'px',
                            opacity     : 1
                        },150);
            }

            function hideTooltip(){
                //hide / fade out the tooltip
                if(ie)
                    $tooltip.hide();
                else
                $tooltip.stop()
                        .animate({
                            opacity     : 0
                        },150);
            }

            function showImage(e){
                var $link               = $(this),
                    idx                 = $link.index(),
                    $image              = $link.find('a').attr('href'),
                    $currentImage       = $ps_image_wrapper.find('img'),
                    currentImageWidth   = $currentImage.width();

                //if we click the current one return
                if(current == idx) return false;

                //add class selected to the current page / dot
                $links.eq(current).removeClass('selected');
                $link.addClass('selected');

                //the new image element
                var $newImage = $('&lt;img/&gt;').css('left',currentImageWidth + 'px')
                                           .attr('src',$image);

                //if the wrapper has more than one image, remove oldest
                if($ps_image_wrapper.children().length &gt; 1)
                    $ps_image_wrapper.children(':last').remove();

                //prepend the new image
                $ps_image_wrapper.prepend($newImage);

                //the new image width. 
                //This will be the new width of the ps_image_wrapper
                var newImageWidth   = $newImage.width();

                //check animation direction
                if(current &gt; idx){
                    $newImage.css('left',-newImageWidth + 'px');
                    currentImageWidth = -newImageWidth;
                }   
                current = idx;
                //animate the new width of the ps_image_wrapper 
                //(same like new image width)
                $ps_image_wrapper.stop().animate({
                    width   : newImageWidth + 'px'
                },350);
                //animate the new image in
                $newImage.stop().animate({
                    left    : '0px'
                },350);
                //animate the old image out
                $currentImage.stop().animate({
                    left    : -currentImageWidth + 'px'
                },350);

                e.preventDefault();
            }               

            function nextImage(){
                if(current &lt; total_images){
                    $links.eq(current+1).trigger('click');
                }
            }
            function prevImage(){
                if(current &gt; 0){
                    $links.eq(current-1).trigger('click');
                }
            }
        });
</code></pre>
