JQuery Lightbox код работает на JSFiddle, но не в посте Wordpress

Question

У меня есть кусок кода JQuery Lightbox. Когда я вставляю его в 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 в заголовок вашего WordPress

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

Answer 2

Включить JQuery в верхней части кода... Он не определен

Попробуйте Firebug, вы можете легко получить ошибку

ReferenceError: jQuery is not defined

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

test.dansas.no (line 13)

Answer 3

Вы пытаетесь использовать JQuery без загрузки его сначала добавить

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

перед вашим кодом и все будет работать нормально.