CODEWITHSUNDEEP
lightbox
touto
touto

Reputation: 61

How to get lightbox for bootstrap 3 to work

I'm trying to implement this gallery on a website: http://ashleydw.github.io/lightbox/

There are no instructions so I'm pretty lost, have been trying to get it to work.

I copied what's below more or less from the source code from the link above.

I moved all the files included in the github download to a new folder dist/lightbox (e.g. ekko-lightbox.css, ekko-lightbox.js).

It's not doing anything, when you click on an image, it just opens the image url.

What am I missing? Do I need to link to some other files or what's wrong?

<head> 
<!-- leaving out the other stuff here -->
<link href="dist/lightbox/ekko-lightbox.css" rel="stylesheet">
<link href="dist/css/bootstrap.css" rel="stylesheet">
<link href="dist/css/custom.css" rel="stylesheet">
</head>
<body>
 <!-- this is from the source code, just updated the images -->
    <h3 class="page-header" id="image-gallery">Example #2: Gallery of Images</h3>
<p>By default, gallery images must be wrapped in a tag (probably <code>&lt;div&gt;</code>) - which doesn't have the class <code>.row</code>. This is so you can create columns/rows.</p>
<p>A custom selector for the parent can be used, see <a href="#wrappers">example #11</a>. Note how the final image is not in the gallery intentionally.</p>
<div class="row">
    <div class="col-md-offset-2 col-md-8">
        <div class="row">
            <a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="People walking down stairs" class="col-sm-4">
                <img src="images/DSC00978.jpeg" class="img-responsive"
            </a>
            <a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="Man getting wet" class="col-sm-4">
                <img src="images/DSC00978.jpeg" class="img-responsive">
            </a>
            <a href="images/DSC00978.jpeg" data-toggle="lightbox" data-gallery="multiimages" data-title="Someone lost their dress" class="col-sm-4">
                <img src="images/DSC00978.jpeg" class="img-responsive">
            </a>
        </div>    
    </div>
    </div>

  <script type="text/javascript">
  $(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
event.preventDefault();
$(this).ekkoLightbox();
 });

      $(document).ready(function ($) {
          // delegate calls to data-toggle="lightbox"
          $(document).delegate('*[data-toggle="lightbox"]:not([data-gallery="navigateTo"])', 'click', function(event) {
              event.preventDefault();
              return $(this).ekkoLightbox({
                  onShown: function() {
                      if (window.console) {
                          return console.log('Checking our the events huh?');
                      }
                  },
      onNavigate: function(direction, itemIndex) {
                      if (window.console) {
                          return console.log('Navigating '+direction+'. Current item: '+itemIndex);
                      }
      }
              });
          });

          //Programatically call
          $('#open-image').click(function (e) {
              e.preventDefault();
              $(this).ekkoLightbox();
          });
          $('#open-youtube').click(function (e) {
              e.preventDefault();
              $(this).ekkoLightbox();
          });

  // navigateTo
          $(document).delegate('*[data-gallery="navigateTo"]', 'click', function(event) {
              event.preventDefault();

              var lb;
              return $(this).ekkoLightbox({
                  onShown: function() {

                      lb = this;

        $(lb.modal_content).on('click', '.modal-footer a', function(e) {

          e.preventDefault();
          lb.navigateTo(2);

        });

                  }
              });
          });


      });
   </script>

   <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
     <script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="dist/js/bootstrap.min.js"></script>
    <script src="js/modal.js"></script>
    <script src="dist/lightbox/ekko-lightbox.min.js"></script>
     <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="assets/js/ie10-viewport-bug-workaround.js"></script>
  </body>
  </html>

Upvotes: 0

Views: 5814

Answers (1)

touto
touto

Reputation: 61

In the end, I got it to work with a different lightbox, http://lokeshdhakar.com/projects/lightbox2/

Upvotes: 2

Related Questions