jQuery Lightbox 代码适用于 JSFiddle，但不适用于 Wordpress 帖子

Question

我有一段 jQuery 灯箱代码。当我将它插入 JSFiddle 时，它​​可以工作 - 但是当我在我的 Wordpress 网站上实现它时，它不会。

这是 JSFiddle：http://jsfiddle.net/cVxCz/4/

这是我的 Wordpress 测试帖子：http://test.dansas.no/

这是我的 jQuery 代码。实际上没有必要在这里发帖，因为它可以工作并且可以在 JSFiddle 和 Wordpress 帖子上找到，但是你可以在这里：

jQuery(document).ready(function($) {

// global variables for script
var current, size;

$('a').click(function(e) {

// prevent default click event
e.preventDefault();

// grab href from clicked element
var image_href = $(this).attr("href");  

// determine the index of clicked trigger
var slideNum = $('a').index(this);

// find out if #lightbox exists
if ($('#lightbox').length > 0) {        
  // #lightbox exists
  $('#lightbox').fadeIn(300);
  // #lightbox does not exist - create and insert (runs 1st time only)
} else {                                
  // create HTML markup for lightbox window
  var lightbox =
      '<div id="lightbox">' +
      '<p>Close X</p>' +
      '<div id="slider">' +
      '<div class="nav">' +
      '<a class="prev slide-nav">prev</a>' +
      '<a class="next slide-nav">next</a>' +
      '</div>' +
      '</div>' +
      '</div>';

  //insert lightbox HTML into page
  $('body').append(lightbox);

  // fill lightbox with a hrefs in .gallery
  $('.gallery').find('figure > a').each(function() {
    var $href = $(this).attr('href');
    $('#slider').append(
      '<img src="' + $href + '">'
    );
  });

}

// setting size based on number of objects in slideshow
size = $('#slider img').length;

// hide all slide, then show the selected slide
$('#slider img').hide();
$('#slider img:eq(' + slideNum + ')').show();

// set current to selected slide
current = slideNum;
});

//Click anywhere on the page to get rid of lightbox window
$('body').on('click', '#lightbox', function() { // using .on() instead of .live(). more modern, and fixes event bubbling issues
$('#lightbox').fadeOut(300);
});

// show/hide navigation when hovering over #slider
$('body').on(
{ mouseenter: function() {
  $('.nav').fadeIn(300);
}, mouseleave: function() {
  $('.nav').fadeOut(300);
}
},'#slider');

// navigation prev/next
$('body').on('click', '.slide-nav', function(e) {

// prevent default click event, and prevent event bubbling to prevent lightbox from closing
e.preventDefault();
e.stopPropagation();

var $this = $(this);
var dest;

// looking for .prev
if ($this.hasClass('prev')) {
  dest = current - 1;
  if (dest < 0) {
    dest = size - 1;
  }
} else {
  // in absence of .prev, assume .next
  dest = current + 1;
  if (dest > size - 1) {
    dest = 0;
  }
}

// fadeOut curent slide, FadeIn next/prev slide
$('#slider img:eq(' + current + ')').fadeOut(100);
$('#slider img:eq(' + dest + ')').fadeIn(100);

// update current slide
current = dest;
});

$(document.documentElement).keyup(function (event) {

var $this = $(this);
var dest;

if (event.keyCode == 37) {
      dest = current - 1;
  if (dest < 0) {
    dest = size - 1;
  }
} 

else if (event.keyCode == 39) {
  dest = current + 1;
  if (dest > size - 1) {
    dest = 0;
  }
}

else if (event.keyCode == 27) {
  $('#lightbox').fadeOut(300);
}

   // fadeOut curent slide, FadeIn next/prev slide
$('#slider img:eq(' + current + ')').hide();
$('#slider img:eq(' + dest + ')').show();

// update current slide
current = dest;

});

});

请帮帮我。我知道这只是一件小事，但我不太擅长这个。

Answer 1

在代码顶部包含jquery...它没有定义

试试firebug你很容易得到错误

ReferenceError: jQuery is not defined

jQuery(document).ready(function($) {

test.dansas.no (line 13)

Answer 2

在 wordpress 的标题中包含 jQuery

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Answer 3

您正在尝试使用 jQuery 而不加载它首先添加

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

在您的代码之前，它会正常工作。