jQuery Lightbox code works on JSFiddle but not in Wordpress post

Question

I have a piece of jQuery lightbox code. When I insert it on JSFiddle, it works - but when I'm implementing it on my Wordpress site, it won't.

Here's the JSFiddle: http://jsfiddle.net/cVxCz/4/

Here's my Wordpress test post: http://test.dansas.no/

And this is my jQuery code. It isn't actually necessary to post here since it Works and is available on JSFiddle and the Wordpress post, but here you go:

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;

});

});

Please help me out. I know it's just have to be a small thing, but I'm not too good at this.

Answer 1

Include jQuery in header of your wordpress

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

Answer 2

Include the jquery on the top of the code... It is not defined

Try firebug u can easily get the error

ReferenceError: jQuery is not defined

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

test.dansas.no (line 13)

Answer 3

You are trying to use jQuery without load it first add

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

before your code and it will work fine.