Question

我正在使用最新的lightbox 2发行版。无法让它工作由于某种原因，当我点击图像时，它直接进入href而不是按照它应该的行为出现..无论我是否使用CDN或jquery-plus-lightbox插件，javascript都能正常工作..这是我的代码：

<!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>

script.js中的JavaScript代码：

$(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);
  });


});

Answer 1

我认为问题是你在head部分加载了Lightbox.js - 它本身并不处理等待文档就绪的问题，因此它会在加载任何页面内容之前检查页面上的灯箱。

快速修复 - 在结束<body>代码之前加载lightbox.js而不是<head>内部。

或者，编辑js文件以包含文档就绪。从Lightbox v2.8.2开始，您需要这样做：

// 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
}));

Answer 2

我发现你可以手动初始化Lightbox，所以你不必修改Lightbox的代码：

{{1}}

这允许您在标题中加载灯箱代码。

灯箱2不工作？

2 个答案: