jQuery Лайтбокс работает на 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 без нагрузки он сначала добавить

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

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

Answer 3

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

Попробуйте firebug и можно легко получить ошибку

ReferenceError: jQuery is not defined 

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

test.dansas.no (line 13)