Running the plugin on a class selector works on the first element, but not the rest.

Running the plugin on a class selector works on the first element, but not the rest.

So basically, I'm making a little personal plugin, the idea is to have little galleries, divs with images in them. These divs have custom data attibutes for width, height, speed of transition, etc. I want to make set up super simple so anyone can just have a div with images in them, set a few data attributes and they're good to go. 

There is a problem however that I cannot work out - I'm going like this 

(where kbg is the name of my plugin)

$('.kbGallery').kbg();

This works fine for the first element with the class of '.kbGallery'. Not so much for the others. 

If I give all the individual elements a class of '.kbGallery' and an unique id, they work fine :?

$('#one').kbg();
$('#two').kbg();

What am I doing wrong? Can you see anything bad about my code too? Any suggestions? 

Here is the code for the plugin: 

  2. (function( $ ) {

  4. $.fn.kbg = function() {
  6. var element = $(this);
  8. var kbgS = { count : element.children().length,
  9. width : element.data('kbg-width'),
  10. height : element.data('kbg-height'),
  11. type : element.data('kbg-type'),
  12. speed : element.data('kbg-speed'),
  13. effectSpeed : element.data('kbg-effectspeed'),
  14. curCount : 0
  15. }
  17. this.css({width:kbgS.width, height:kbgS.height});
  19. if (kbgS.type == "Scrolling") { 
  20. element.children().wrapAll("<div class='kbg_scrolling' />");
  21. setInterval( kbg_scroll, kbgS.speed);
  22. element.find('.kbg_scrolling').append(element.find('img:first-child').clone());
  24. } else if (kbgS.type == "Fading") { 
  25. element.children().wrapAll("<div class='kbg_fading' />");
  26. setInterval( kbg_fade, kbgS.speed);
  27. element.find('.kbg_fading').append(element.find('img:first-child').clone());
  28. element.find('img:first-child').fadeIn(0);
  29. }
  31. function kbg_scroll() {
  33. kbgS.curCount++;
  34. element.find('.kbg_scrolling').animate({left: '-=' +kbgS.width}, kbgS.effectSpeed, function() {
  35. if (kbgS.curCount == kbgS.count) {
  36. element.find('.kbg_scrolling').css({left:0});
  37. kbgS.curCount = 0;
  39. }
  40. });
  42. }
  44. function kbg_fade() {
  45. kbgS.curCount++;
  46. element.find('.kbg_fading img:nth-child('+ (kbgS.curCount+1) +')').fadeIn(kbgS.effectSpeed, function() {
  47. if (kbgS.curCount == kbgS.count) {
  48. element.find('.kbg_fading img').hide();
  49. element.find('.kbg_fading img:first-child').fadeIn(0);
  50. kbgS.curCount = 0;
  51. }
  52. });
  53. }
  56. };

  58. })( jQuery )

Here is the html: 

  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <title>Untitled Document</title>
  7. <script src="jquery-1.9.0.min.js"></script>
  8. <script src="kbg.jQuery.js"></script>


  11. <style>
  12. .kbGallery {
  13. overflow:hidden;
  14. width:0;
  15. height:0;
  16. position:relative;
  17. }
  18. .kbGallery img {
  19. margin:0;
  20. padding:0;
  22. }
  24. .kbg_scrolling { 
  25. width:9999px;
  26. position:absolute;
  27. }
  29. .kbg_scrolling img {
  30. float:left;
  31. }
  34. .kbg_fading img {
  35. position:absolute;
  36. top:0;
  37. left:0;
  38. display:none;
  39. }
  41. </style>

  43. <script>
  44. $(document).ready(function() {
  46. $('.kbGallery').kbg(); 
  48. });
  49. </script>


  52. </head>

  54. <body>

  56. <!-- Scrolling or Fading / Speed between fades / width / height --> 

  58. <div id="one" class="kbGallery" data-kbg-type="Scrolling" data-kbg-speed=4000 data-kbg-effectspeed=500 data-kbg-width=300 data-kbg-height=200 >
  59. <img src="http://placekitten.com/g/300/200" />
  60. <img src="http://placehold.it/300x200&text=NO" />
  61. <img src="http://placehold.it/300x200&text=YES" />
  62. <img src="http://placekitten.com/300/200" />
  63. <img src="http://placehold.it/300x200&text=MAYBE" />
  64. </div>


  67. <div id="two" class="kbGallery" data-kbg-type="Fading" data-kbg-speed=2000 data-kbg-effectspeed=200 data-kbg-width=200 data-kbg-height=100 >
  68. <img src="http://placekitten.com/g/300/200" />
  69. <img src="http://placehold.it/300x200&text=NO" />

  71. <img src="http://placehold.it/300x200&text=MAYBE" />
  72. </div>

  74. </body>
  75. </html>