Multiple instances of plugin

Multiple instances of plugin

Hey there,

I'm trying to figger out how to make a simple plugin, and make it work for multiple sections on my current project.
 
Let's say, I've got two sets of images that I want to horizontally scroll when I click on there own navigation-arrows. The markup could look something like this:

  1. <div id="container_1" class="container">
  2. <div class="nav">
  3. <a href="#" class="prev">previous</a>
  4. <a href="#" class="prev">next</a>
  5. </div>
  6. <div class="item"><img src="" alt="" /></div>
  7. <div class="item"><img src="" alt="" /></div>
  8. <div class="item"><img src="" alt="" /></div>
  9. <div class="item"><img src="" alt="" /></div>
  10. <div class="item"><img src="" alt="" /></div>
  11. </div>

  13. <div id="container_2" class="container">
  14. <div class="nav">
  15. <a href="#" class="prev">previous</a>
  16. <a href="#" class="prev">next</a>
  17. </div>
  18. <div class="item"><img src="" alt="" /></div>
  19. <div class="item"><img src="" alt="" /></div>
  20. <div class="item"><img src="" alt="" /></div>
  21. <div class="item"><img src="" alt="" /></div>
  22. <div class="item"><img src="" alt="" /></div>
  23. </div>

Now.. Using jQuery, I want to call something like:

  1. $("#container_1").scroller();
  2. $("#container_2").scroller();

or even better:
  1. $(".container").scroller();

I've kinda got this working, but there's defiantly something wrong. Here's what I got (simplified):

  2. (function($)
  3. {
  4. $.fn.scroller = function(options) {
  5. var defaults = {
  6.    container_width: 900,
  7. container_height: 400,
  8. item_width: 900,
  9. items_per_view: 1,
  10. duration: 200
  11.  };
  13. if (options) { $settings = $.extend(defaults, options) };
  15. return this.each(function() {
  16. $inner = $(this).find('.inner');
  17. $nav = $(this).find('.nav');
  18. $items = $(this).find('.item');
  19. $sliding = false;
  21. $(nav).find('.prev').click(function() {
  22. if(sliding === false && $.fn.scroller.currentItem() > 0) {
  23. $.fn.scroller.toItem('prev');
  24. }
  25. this.blur();
  26. return false;
  27. });
  29. $(nav).find('.next').click(function() {
  30. if(sliding === false && $.fn.scroller.currentItem() < (items.length-options.items_per_view)) {
  31. $.fn.scroller.toItem('next');
  32. }
  33. this.blur();
  34. return false;
  35. });
  36. });
  38. };
  40. $.fn.scroller.currentItem = function() {
  41. return 0-(parseFloat($($inner).css('left')) / $settings.item_width);
  42. }

  44. $.fn.scroller.toItem = function(direction) {
  45. var target_item;
  46. if(direction=='next') {
  47. target_item = $.fn.scroller.currentItem() + 1;
  48. } else {
  49. target_item = $.fn.scroller.currentItem() - 1;
  50. }
  52. var target_margin = 0-(target_item*$settings.item_width);
  53. $sliding = true;

  55. $($inner).stop().animate(
  56. { "left": target_margin },
  57. {
  58. duration: $settings.duration, 
  59. complete: function() {
  60. $sliding = false;
  61. }
  62. }
  63. );
  65. }
  67. })(jQuery);

This kinda works, but the problem is that the click-event are overwritten, so both navigations will control the second container (instead of their own). What should be the right approach to make this work for each instance specifically? And what should be the way to set variables for each instance, for starters? Thanks!