2

I'm using the latest lightbox 2 distribution. Cannot get it to work for some reason, when I click on the image it just goes straight to the href rather than coming up as it should behave..The javascript works whether or not I use a CDN or the jquery-plus-lightbox plugin.. Here's my code:

<!DOCTYPE html>
<html>
  <head>
    <title>pGallery | View Portfolio</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/lightbox.min.css">


    <script src="js/lightbox-plus-jquery.min.js"></script>
    <script src="js/script.js"></script>
  </head>
  <body>
    <section>
      <div class="container">
        <h1 id="heading">All Projects</h1>
        <ul id="gallery">
          <li class="design"><a href="images/web1.jpg" data-lightbox="projects" data-title="Project 1" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elituctor vitae velit mollis"><img src="images/web1.jpg" /></a></li>
          <li class="design programming"><a href="images/web2.jpg" data-lightbox="projects" data-title="Project 2" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elituctor vitae velit mollis"><img src="images/web2.jpg" /></a></li>
          <li class="design programming"><a href="images/web3.jpg" data-lightbox="projects" data-title="Project 3" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elituctor vitae velit mollis"><img src="images/web3.jpg" /></a></li>
          <li class="design programming cms"><a href="images/web4.jpg" data-lightbox="projects" data-title="Project 4" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elituctor vitae velit mollis"><img src="images/web4.jpg" /></a></li>
          <li class="programming"><a href="images/web5.jpg" data-lightbox="projects" data-title="Project 5" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elituctor vitae velit mollis"><img src="images/web5.jpg" /></a></li>
          <li class="design cms"><a href="images/web6.jpg" data-lightbox="projects" data-title="Project 6" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elituctor vitae velit mollis"><img src="images/web6.jpg" /></a></li>
          <li class="design cms"><a href="images/web7.jpg" data-lightbox="projects" data-title="Project 7" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elituctor vitae velit mollis"><img src="images/web7.jpg" /></a></li>
          <li class="design cms"><a href="images/web8.jpg" data-lightbox="projects" data-title="Project 8" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elituctor vitae velit mollis"><img src="images/web8.jpg" /></a></li>
          <li class="design programming cms"><a href="images/web9.jpg" data-lightbox="projects" data-title="Project 9" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elituctor vitae velit mollis"><img src="images/web9.jpg" /></a></li>
          <li class="cms"><a href="images/web10.jpg" data-lightbox="projects" data-title="Project 10" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elituctor vitae velit mollis"><img src="images/web10.jpg" /></a></li>
        </ul>
      </div>
    </section>
  </body>

JavaScript Code in script.js:

$(document).ready(function() {

  $('nav li').first().addClass('current');

  $('nav a').on('click', function() {
    $('nav li').removeClass('current');
    $(this).parent().addClass('current');

    $('h1#heading').text($(this).text());

    var category = $(this).text().toLowerCase().replace(' ', '-');

    if(category == 'all-projects') {
      $('ul#gallery li:hidden').fadeIn('slow').removeClass('hidden');
    } else {
      $('ul#gallery li').each(function() {
        if(!$(this).hasClass(category)) {
          $(this).hide().addClass('hidden');
        } else {
          $(this).fadeIn('slow').removeClass('hidden');
        }
      });
    }
    return false;
  });


  $('ul#gallery li').on('mouseenter', function() {
    var title = $(this).children().data('title');
    var desc = $(this).children().data('desc');

    if(desc == null) {
      desc = 'Click to Enlarge';
    }
    if(title == null) {
      title = '';
    }

    $(this).append('<div class="overlay"></div>');
    var overlay = $(this).children('.overlay');
    overlay.html('<h3>'+title+'</h3><p>'+desc+'</p>');
    overlay.fadeIn(800);
  });

  $('ul#gallery li').on('mouseleave', function() {
    $(this).append('<div class="overlay"></div>');
    var overlay = $(this).children('.overlay');
    overlay.fadeOut(500);
  });


});
bpr
  • 483
  • 1
  • 11
  • 23
  • always load jquery first than other script dependent on jQuery – imran qasim Dec 23 '15 at 17:21
  • Any errors in the console? What's in `js/script.js`? And @imranqasim it looks like he's using a file that combines jQuery and the plugin. – j08691 Dec 23 '15 at 17:24
  • try to load this script first i think this is combination of jquery and lightbox – imran qasim Dec 23 '15 at 17:25
  • No console errors, the lightbox-plus-jquery is a combination of jquery and lightbox so you don't have to load both but I also tried loading a separate instance of each and got no result. And @imran qasim isn't it already being loaded first? – bpr Dec 23 '15 at 17:33

2 Answers2

11

I believe the problem is you're loading Lightbox.js in the head section - it doesn't natively handle waiting for document ready, so it checks for lightboxes on the page before any page content is loaded.

The quick fix - load lightbox.js just before the closing <body> tag instead of inside the <head>.

Alternatively, edit the js file to include document ready. As of Lightbox v2.8.2, you need to do this:

// line 27 (near top of file)
}(this, function ($) {
  $(document).ready( function(){  // Add this line

// line 453 (near end of file)
  return new Lightbox();
 }); // Add this line
}));
DACrosby
  • 11,116
  • 3
  • 39
  • 51
1

I found out that you can initialize Lightbox manually, so you don't have to modify the code of Lightbox:

$(document).ready(function() {
    lightbox.init();
});

This allows you to load the lightbox code in the header.

Thomas Kekeisen
  • 4,355
  • 4
  • 35
  • 54