JQuery =>コードをライブラリにするには

Question

私が最後にやったことで終わりました。私は反応ライトボックスのスライドショーを作成しました！

しかし、私はちょっと問題に直面しています。私はそれをライブラリにしたいと思っています...言い換えれば、コードをhtmlクラスに適用して、無限に追加することができます（すべてのライブラリと同じように）。

ありがとうございました！

var imageSliding = $('.box > .img'); 
 
     $('.lightbox').click(function() { 
 
      $('.backdrop, .box').animate({ 
 
       'opacity': '.50' 
 
      }, 300, 'linear'); 
 
      $('.box').animate({ 
 
       'opacity': '1.00' 
 
      }, 300, 'linear'); 
 
      $('.backdrop, .box').css('display', 'block'); 
 
     }); 
 

 
     $('.close').click(function() { 
 
      close_box(); 
 
     }); 
 

 
     $('.backdrop').click(function() { 
 
      close_box(); 
 
     }); 
 

 
     function close_box() { 
 
      $('.backdrop, .box').animate({ 
 
       'opacity': '0' 
 
      }, 300, 'linear', function() { 
 
       $('.backdrop, .box').css('display', 'none'); 
 
      }); 
 
     } 
 

 
     /* Slider */ 
 
     var speed = 100; 
 

 
     $(".prev").click(function() { 
 
      var gallery = $(this).closest('.box').find("ul.gallery"), 
 
       now = gallery.children(":visible"), 
 
       last = gallery.children(":last"), 
 
       prev = now.prev(); 
 
      prev = prev.index() == -1 ? last : prev; 
 
      now.fadeOut(speed, function() { 
 
       prev.fadeIn(speed); 
 
      }); 
 
     }); 
 

 
     $(".next").click(function() { 
 
      var gallery = $(this).closest('.box').find("ul.gallery"), 
 
       now = gallery.children(":visible"), 
 
       first = gallery.children(":first"), 
 
       next = now.next(); 
 
      next = next.index() == -1 ? first : next; 
 
      now.fadeOut(speed, function() { 
 
       next.fadeIn(speed); 
 
      }); 
 
     }); 
 

 
     $(".gallery li").click(function() { 
 
      var first = $(this).parent().children(':first'), 
 
       next = $(this).next(); 
 
      next = next.index() == -1 ? first : next; 
 
      $(this).fadeOut(speed, function() { 
 
       next.fadeIn(speed); 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

このためのjQueryのメインドキュメントを参照してください：basic-plugin-creation

またTeamTreehouseはこれについての良いチュートリアルがあります。writing-your-own-jquery-plugins