Basic LightBox Effect using CSS and Javascript not working

I am trying to achieve the Basic Lightbox effect using JavaScript. Well let me inform you, I am a beginner to the JavaScript.

What I want is, when I click on the link, lightbox effect should take over the action.(i..e a Image should be displayed in the centre of the page, with tranperant black colored background)

but some how this effect is not taking place in Google Chrome/Firefox/ even on IE 9

Check my jsfiddle for more details

https://jsfiddle.net/Addle/z58jzydj/12/

here's main JavaScript Code:

$(".lightbox").click(function(){
    var overlayLink;
    overlayLink = $(this).attr("href");
    window.startOverlay(overlayLink);
    return false;

    function startOverlay(overlayLink) {
    $("body").append('<div class="overlay"></div><div class="container">    </div>').css({"overflow-y":"hidden"});
    $(".overlay").animate({"opacity":"0.6"}, 200, "linear");
    $(".container").html('<img src="'+overlayLink+'" alt="" />');

    $(".container img").load(function() {
        var imgWidth = $(".container img").width();
        var imgHeight = $(".container img").height();
        $(".container")
            .css({                "top":"50%","left:"50%","width":imgWidth,"height":imgHeight,"margin-top": -(imgHeight/2),"margin-left":-(imgWidth/2)
            })
            .animate({"opacity":"1"}, 200, "linear");
    });

         $(".overlay").click(function(){
    $(".container, .overlay")
    .animate({"opacity":"0"}, 200, linear, function(){
        $(".container, .overlay").remove();
     })
});

}

});

Please somebody assist me to point out the exact mistake that I am doing.

Thanks in Advance.

Answers


There are loads of typos in your code

  • .css({"top": "50%","left: "50%","width":

  • You need to include jQuery if you want to use $

Please, learn how to use the Browser Javascript console to find bugs instead of just posting half-working code to Stackoverflow.


In "top":"50%","left:"50%" you are missing a " after left. Is "top":"50%","left":"50%".


Problem was in syntax, formatting, typing mistakes in my JavaScript code. I have fine tuned it now. and all my Script is running fine.

and I have added the jquery file to code. Check the Jsfiddle code for details:

https://jsfiddle.net/Addle/z58jzydj/20/

Thanks guys for your help

Need Your Help

Anonymous Types - Are there any distingushing characteristics?

c# .net generics extension-methods anonymous-types

Is there anything to use, to determine if a type is actually a anonymous type? For example an interface, etc?

interval in Doctrine2

php doctrine-orm doctrine

I need to fetch Entities from database which are updated 15 minutes from now. I tried something like this: