изображения не отображаются, когда наведите указатель мыши

Question

У меня возникла проблема с моей функцией в jquery. Его простой яркий свет событий. Не вызывает ошибок в консоли, это нормально, но не могу получить мое большое изображение при наведении значка.

CSS 

.lightbox a img { 
    border: 0; 
    display: block; 
} 
.lightbox a { 
    display: inline-block; 
    border: 3px solid #ccc; 
} 
#largeImage { 
    position: absolute; 
    padding: .5em; 
    background-color: #e3e3e3; 
    border: 1px solid #bfbfbf; 
} 

проверено на webkit.

Это моя функция.

<div class="lightbox"> 
    <a href="images/img4-lg.jpg" title=""><img src="images/img4-thumb.jpg" alt="Image"></a> 
    <a href="images/img5-lg.jpg" title=""><img src="images/img5-thumb.jpg" alt="Image"></a> 
</div> 

    /* 
    * Lightbox 
    */ 

    var offsetY = 10; 
    var offsetX = 20; 

    $('.lightbox a').hover(function(event) { 

     /* Stuff to do when the mouse enters the element */ 
     var href = $(this).attr('href'); 

     $('<img id="largeImage" href="'+ href +'"/>') 
     .css('top', event.pageY + offsetY) 
     .css('left', event.pageX + offsetX) 
     .appendTo('body'); 

    }, function() { 

     /* Stuff to do when the mouse leaves the element */ 
     $('#largeImage').remove(); 

    }); 

    $('.lightbox a').mousemove(function(event) { 

     /* Act on the event */ 
     $('#largeImage') 
     .css('top', event.pageY + offsetY) 
     .css('left', event.pageX + offsetX); 
    }); 

Answer 1

Try оборачивать код в этом ...

$(document).ready(function() { 
    //Your Code 
}); 

В качестве альтернативы, вы вспомнили, чтобы импортировать библиотеку JQuery?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>