Perfecting Simple lightbox. Can anybody check my code whether it is best practice or not?

var $overlay = $('<div id="overlay"></div>'); // it's JQUERY REPRESENTATION OF OBJECT makanya pake $ dan $();
var $prevImage = $('<a href="#"><img id="prevImage" src="images/chevron_left1600.png" width="50"></a>');
var $prevHref = "";
$overlay.append($prevImage);
var $image = $("<img>");
$overlay.append($image);
var $nextImage = $('<a href="#"><img id="nextImage" src="images/chevron_right1600.png" width="50"></a>');
var $nextHref = "";
$overlay.append($nextImage);
var $caption = $('<p></p>')
$overlay.append($caption);

// DON'T ADD DIV nya di html, tp di js nya aja
$("body").append($overlay);

// MAKING THE OVERLAY FUNCTION
var displayoverlay = function(ahref){
    var href = ahref.attr("href");
    var captionText = ahref.children("img").attr("alt");
    $image.attr("src",href);
    $caption.text(captionText);
    $overlay.fadeIn(300);
};

$("#imageGallery a").click(function(event){
            // stop event behaviour...
    event.preventDefault();
    displayoverlay($(this));
            // var href = $(this).attr("href");
            // var captionText = $(this).children("img").attr("alt");
            // $image.attr("src",href);
            // // $image.hide();
            // $caption.text(captionText);
            // $overlay.fadeIn(300);

});
$prevImage.click(function(){
    // SETTING PREVHREF TO PREV IMAGE A
    $prevHref = $('#imageGallery [href="'+$prevImage.next().attr('src')+'"]').parents("li").prev().children("a");
    if($prevHref.length == 0){
        // IF REACH FIRST IMAGE , WANT TO GO TO PREV, IT WILL GO TO THE LAST IMAGE
        $prevHref = $('#imageGallery [href="'+$prevImage.next().attr('src')+'"]').parents("ul").children().last("li").children("a");
    }
});
$nextImage.click(function(){
    // SETTING NEXTHREF TO NEXT IMAGE A
    $nextHref = $('#imageGallery [href="'+$nextImage.prev().attr('src')+'"]').parents("li").next().children("a");
    if($nextHref.length == 0){
        // IF REACH LAST IMAGE , WANT TO GO TO NEXT, IT WILL GO TO THE FIRST IMAGE
        $nextHref = $('#imageGallery [href="'+$nextImage.prev().attr('src')+'"]').parents("ul").children().first("li").children("a");
    }
});

$overlay.click(function(){
    // IF NEXTHREF PIC IS PRESSED
    if($nextHref != ""){
        $overlay.hide();
        displayoverlay($nextHref);
        $nextHref="";
    }
    // IF PREVHREF PIC IS PRESSED
    else if($prevHref != ""){
        $overlay.hide();
        displayoverlay($prevHref);
        $prevHref="";
    }
    // IF OTHERS ARE PRESSED
    else{
        $overlay.fadeOut(300);
    }
});