title: JQuery lightbox work with multiple galleries/links
body: <p>I am trying to make this code I made into a library:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$.fn.boxify = function() {
      var imageSliding = $('.box &gt; .img');
          $(this).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);
              });
          });
  };
   
  $( "a" ).boxify(); // Makes all the links green.</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
              font-family: Helvetica, Arial;
          }
          
          .backdrop {
              position: absolute;
              top: 0px;
              left: 0px;
              width: 100%;
              height: 100%;
              background: #000;
              opacity: .0;
              filter: alpha(opacity=0);
              z-index: 50;
              display: none;
          }
          
          .box {
              position: absolute;
              top: 50%;
              transform: translate(-50%, -50%);
              left: 50%;
              background: black;
              text-align: left;
              z-index: 51;
              padding: 0;
              margin: 0;
              display: none;
              -webkit-border-radius: 5px;
              -moz-border-radius: 5px;
              border-radius: 5px;
              -moz-box-shadow: 0px 0px 5px #444444;
              -webkit-box-shadow: 0px 0px 5px #444444;
              box-shadow: 0px 0px 5px #444444;
              border: 10px solid #000;
              color: white;
              width: 40%;
          }
          
          @media (min-width: 320px) and (max-width: 900px) {
              .box {
                  width: 98%;
              }
          }
          
          @media (min-width: 901px) and (max-width: 1200px) {
              .box {
                  width: 60%;
              }
          }
          
          @media (min-width: 1201px) {
              .box {
                  width: 48%;
              }
          }
          
          .box img {
              width: 100%;
          }
          
          .caption {
              padding-top: 10px;
              font-size: 15px;
          }
          
          .prev,
          .next {
              position: relative;
              padding: 3px;
              cursor: pointer;
              float: right;
              border: 1px solid black;
          }
          
          .prev:active,
          .next:active {
              background-color: white;
              color: black;
          }
          
          .gallery li {
              display: none;
              list-style: none;
              margin-left: -40px;
          }
          
          .gallery li:first-child {
              display: block;
          }
          
          .gallery img {
              max-height: 550px;
          }
          
          .slideButtons {
              position: relative;
          }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="container-fluid"&gt;
          &lt;h1&gt;Welcome Within&lt;/h1&gt;
          &lt;a href="#" class="lightbox"&gt;Open Lightbox&lt;/a&gt;
          &lt;div class="backdrop"&gt;&lt;/div&gt;
          &lt;div class="box"&gt;
              &lt;ul class="gallery" id="olympGallery"&gt;
                  &lt;li&gt;&lt;img src="http://urbanphenomena.net/imgs/trabzoni/trabzoni1.png" alt="" title="" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="http://urbanphenomena.net/imgs/trabzoni/trabzoni2.png" alt="" title="" /&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;img src="http://urbanphenomena.net/imgs/trabzoni/trabzoni3.png" alt="" /&gt;&lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;div class="slideButtons"&gt;
                  &lt;span class="next"&gt;Next&lt;/span&gt;
                  &lt;span class="prev"&gt;Previous&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="caption"&gt;
                  &lt;p&gt;This thing is called 'Caption'. Let me tell you:&lt;/p&gt;
                  &lt;hr /&gt;
                  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>You see that <code>.box</code> class? As a user I wanna infinitely add more box containing different images and captions!</p>
  
  <p>When I added another <code>&lt;a&gt;</code> which is the Lightbox link to the box, the both boxes display on the same time. I know that the same code is reused this way, but that's what I'm trying to do:</p>
  
  <p>Somehow keep the same code without adding more and more code. Yet, when I add more boxes they are completely different from the others (different images)</p>