Can we use same jquery plugin twice in a single page?

Question

Ive been trying to add a slider model to the webpage and I want to add the sliders in two different divs.. Ive tried renaming the elements and class names..bt it doesnt wrk... Is there a solution for this???is it possible to use a jquery plug in twice in same page??

I am trying to add the plugin code


      var currentPosition1 = 0;
                  var slideWidth1 = 900;
                  var slides1 = $('.slider1');
                  var numberOfSlides1 = slides1.length;

                  // Remove scrollbar in JS
                  $('#slidesContainer1').css('overflow', 'hidden');

                  // Wrap all .slides with #slideInner div
                  slides1
                    .wrapAll('')
                    // Float left to display horizontally, readjust .slides width
                    .css({
                      'float' : 'left',
                      'width' : slideWidth1
                    });

                  // Set #slideInner width equal to total width of all slides
                  $('#slideInner1').css('width', slideWidth1 * numberOfSlides1);

                  // Insert controls in the DOM
                  $('#slideshow1')
                    .prepend('Clicking moves left')
                    .append('Clicking moves right');

                  // Hide left arrow control on first load
                  manageControls1(currentPosition1);

                  // Create event listeners for .controls clicks
                  $('.control')
                    .bind('click', function(){
                    // Determine new position
                    currentPosition1 = ($(this).attr('id')=='rightControl1') ? currentPosition1+1 : currentPosition1-1;

                    // Hide / show controls
                    manageControls1(currentPosition1);
                    // Move slideInner using margin-left
                    $('#slideInner1').animate({
                      'marginLeft' : slideWidth1*(-currentPosition1)
                    });
                  });

                  // manageControls: Hides and Shows controls depending on currentPosition
                  function manageControls1(position1){
                    // Hide left arrow if position is first slider2
                    if(position1==0){ $('#leftControl1').hide() } else{ $('#leftControl1').show() }
                    // Hide right arrow if position is last slider2
                    if(position1==numberOfSlides1-1){ $('#rightControl1').hide() } else{ $('#rightControl1').show() }
                  }

in to the div Panel1

<div class="panel1">
    <div id="slideshow1">
       <div id="slidesContainer1">




          <div class="slider1">
                <table style="margin-bottom:50px;"><tbody id="facetPrsnRslt"></tbody></table>
           </div>
           <div class="slider1">
               <p>This is the END my Friend...</p>
           </div>
      </div>
    </div>


</div>

, there is another div panel 2, i want to add the same slider plugin in to panel2, bt no luck...

What you tried? What doesn't work? Why you think it doesnt work (Error, Exception)? — Ajinkya
i am trying to add the slider feature... so slider in the first div wrks perfectly, bt the slider will not wrk in the second div..It doesnt giv any error message.. — Sam
Im using demo 1 inside awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin — Sam

Joseph Joseph · Accepted Answer · 2012-04-02T11:59:52

so you have a set of code that does what you want it to do, but want to use it in more than one element? What you have there is just plain "user-script" - a set of codes that does something you want... and that's it, magic is done. If you want to make it reusable and scalable, try building a real plugin, something that can do:

$('set_of_elements').myOwnPlugin({option:'foo'});

If you want to delve into the specifics of plugin development, take a look into this article which explains it thoroughly (and it may be confusing at first). They, after you get a hang of the basics, you might want to get a "template" for building the structure of the plugin code. There are 2 boilerplates I personally use, this one and this one. the former uses a modified version of the one in the jQuery article, the other uses a OOP approach.

Can we use same jquery plugin twice in a single page?

2 Answers