CODEWITHSUNDEEP
jqueryhtmllightbox
Linto
Linto

Reputation: 1282

lightbox popup for a new page

I have a html page called 1.html

There is a link for 2.html in the page

So while click this link it will popup the page (ie 2.html) with light box effect

Can any one help me to do this

Upvotes: 2

Views: 6598

Answers (2)

Varinder
Varinder

Reputation: 2664

There is(was) a very good tutorial here.

try this:

Javascript:

$(document).ready(function(){
    // add a click event
    $(".test").click(function(){
        overlayLink = $(this).attr("href");
        window.startOverlay(overlayLink);
        return false;
    });
});
function startOverlay(overlayLink) {
    //add the elements to the dom
    $("body")
    .append('<div class="overlay"></div><div class="container"></div>')
    .css({"overflow-y":"hidden"});
    //animate the semitransparant layer
    $(".overlay").animate({"opacity":"0.6"}, 400, "linear");
    //add the lightbox image to the DOM
    $(".container").html('<img src="'+overlayLink+'" alt="" />');
    //position it correctly after downloading
    $(".container img").load(function() {
                                        var imgWidth = $(".container img").width();
                                        var imgHeight = $(".container img").height();
                                        $(".container").css({"top": "50%","left": "50%"
                                }).animate({"opacity":"1"}, 400, "linear");
    // you need to initiate the removeoverlay function here, otherwise it will not execute.
    window.removeOverlay();
    });
}


function removeOverlay() {
    // allow users to be able to close the lightbox
    $(".overlay").click(function(){
        $(".container, .overlay").animate({"opacity":"0"}, 200, "linear", function(){
        $(".container, .overlay").remove();
        });
    });
}

Html:

<body>
<a href="http://webmasterformat.com/sites/default/files/jquery-logo.png" class="test">button</a>
</body>

css:

* {margin:0;border:0;padding:0}
body {height:100%;}
.overlay {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
background:#000;
opacity:0;
filter:alpha(opacity=0);
z-index:50;
/*cursor:pointer;*/
}
.container {
position:absolute;
opacity:0;
filter:alpha(opacity=0);
left:-9999em;
z-index:51;
width:200px;
height:200px;
margin-top: -100px;
margin-left: -100px;
background-color:white;
}

Upvotes: 0

Siblja
Siblja

Reputation: 859

You can do it with any popular JQuery or pure JavaScript light box that support IFrames.

Google it up or try this under "Outside webpage": http://jacklmoore.com/colorbox/example1/

Upvotes: 1

Related Questions