Lightbox effect with jQuery (3) - ready-to-use library

I've been pretty busy with work over the past days, but I managed to finalize my lightbox javascript library still. Although I can't confirm it is 100% cross-browser, it seems to be running well under IE8/9, Firefox and Chrome. I reckon it should work as well on Safari, but you never know. The actual library and a sample HTML file can be found here:

https://sourceforge.net/projects/delightbox/files/

How to use ?

First, include jQuery and, needless to say, the library.
Second, call the function init from dlb, once the DOM has been fully created and the page is ready.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="./delightbox-latest.js"></script>        
<script>
        jQuery(document).ready(function(){
            dlb.init();
        });
</script>

Delightbox allows to create a lightbox effect to render different types of content: image, HTML or DIV. Let's look at the different examples set in the sample HTML file.

<a href="https://www.google.com/images/srpr/logo4w.png" class="dlb-image">Image Lightbox - Click me!</a>

<a href="http://manuthommes.be/" class="dlb-html" dlb-width="800px" dlb-height="500px" dlb-close="x">HTML Lightbox - Click me!</a>

<a href="#" class="dlb-div" dlb-divId="hello" dlb-width="800px" dlb-height="500px" dlb-close="x">DIV Lightbox - Click me!</a>
 
<a href="#" class="dlb-div" dlb-divId="hello" dlb-width="800px" dlb-height="500px" dlb-fade="yes" dlb-padding="15" dlb-close="x">DIV Lightbox (padding) - Click me!</a>  

As you can see, Delightbox only requires to attach a class to an HTML anchor to enable the lightbox effect. After the class, different parameters can or should be used.

.dlb-image 

• dlb-width (ie:"800px")
• dlb-height (ie: "600px")
• dlb-fade ("yes" / "no")
• dlb-close ("[X]")

.dlb-html

• dlb-width (ie:"800px")
• dlb-height (ie: "600px")
• dlb-fade ("yes" / "no")
• dlb-close ("CLOSE [X]")

 .dlb-div

• dlb-width (ie:"800px")
• dlb-height (ie: "600px")
• dlb-fade ("yes" / "no")
• dlb-close ("CLOSE [X]")
• dlb-divId ("myFrame")           MANDATORY
• dlb-padding ("15")

In the case of an image, the light box will autosize if no width/height parameter is given. This is theoretically also the case for HTML (iframe) and DIV, but I highly recommend to specify dimensions. 

If no dlb-close parameter is passed, the lightbox will have no close button (note that this parameter takes the caption of the close button as value). This is not a problem for images, as you can click on the lightbox to close it. However, I've decided not to enabled "click-to-close" on DIV/HTML (since you might want to interact with them), so you should have a way to close the lightbox. Why isn't it mandatory? You could decide to close the lightbox from the very DIV/HTML which is "lightbox'ed". A manual exit function can be called like so:

dlb.quit(); 

If you want to invoke this function from a DIV,  nothing to worry about. If you call it from an iframe, think of selecting the parent:

parent.dlb.quit();

You can find more information and comments in the library file itself. This project was quite rapidly done, so I guess there's still a lot to do to improve it, but that's a good start...and it works! :)

Below the full code JS code, in case you want to have a sneak peek.

var dlb = {
      init: loader,
      quit: terminate
};

// closes the lightbox manually
function terminate(){
     if($("#dlb-bg").length!=-1){
            $("#dlb-div").remove();
            $("#dlb-bg").remove();
            if($("body").height()>$(window).height())$("body").css("overflow-y","scroll");
            if($("body").width()>$(window).width())$("body").css("overflow-x","scroll");                 
     }
}

// boot function
function loader(){
      // initial launch -- to try and remove the wrong positionment
      $('.dlb-image').each(function(){
            $('body').append("<img id=dlb-object src='"+$(this).attr('href')+"' />");
            $("#dlb-object").remove();
      });
      // +++ delightbox on images +++
      $('.dlb-image').click(function(ev){
            ev.preventDefault();
            ev.stopPropagation();
            if($("#dlb-bg").length==0){
                  var sH=$(document).height(), sW=$(document).width(), scPos=$(document).scrollTop();
                  var tgtURL=$(this).attr("href");
                  if($(this).attr("dlb-fade")){fade=$(this).attr("dlb-fade")}else{fade="no"};
                        if(fade!="no" && fade!="yes")fade="no";                 
                  if($(this).attr("dlb-width")){oW=$(this).attr("dlb-width")}else{oW="auto"};
                  if($(this).attr("dlb-height")){oH=$(this).attr("dlb-height")}else{oH="auto"};  
                  if($(this).attr("dlb-close")){closeButton=$(this).attr("dlb-close")}else{closeButton="none"};                    
                  $("body").css("overflow","hidden");
                  $("body").append("<div id=dlb-bg style='position:absolute; z-index:1000; top:0px; left:0px; opacity:0.75; filter:alpha(opacity=75); width:"+(sW+20)+"px; height:"+sH+"px; background:#aaa;'></div>");
                  $("body").append("<div id=dlb-div style='display:none; z-index:1001; width:100%; height:100%; position:absolute; left:0px; top:"+scPos+"px;'><img id=dlb-object src='"+tgtURL+"' style='position:absolute; width:"+oW+"; height:"+oH+"; cursor:pointer;' /></div>");
                  if(fade=="yes"){
                        $("#dlb-div").fadeIn();
                        }else{$("#dlb-div").css("display","block");}
                  var picW=$("#dlb-object").width(), picH=$("#dlb-object").height(), lbW=$("#dlb-div").width(), lbH=$("#dlb-div").height();
                  var cX=(lbW/2)-(picW/2), cY=(lbH/2)-(picH/2);
                  $("#dlb-object").css("left",cX+"px").css("top",cY+"px");
                  $(window).resize(function(){
                        var picW=$("#dlb-object").width(), picH=$("#dlb-object").height(), lbW=$("#dlb-div").width(), lbH=$("#dlb-div").height();
                        var cX=(lbW/2)-(picW/2), cY=(lbH/2)-(picH/2);
                        var sH=$(document).height(), sW=$(document).width(), scPos=$(document).scrollTop();  
                        $("#dlb-bg").css("width",(sW+20)+"px").css("height",sH+"px");                           
                        $("#dlb-object").css("left",cX+"px").css("top",cY+"px");                                                          
                  });
                  $("#dlb-object").click(function(){
                        $("#dlb-div").remove();
                        $("#dlb-bg").remove();
                        if($("body").height()>$(window).height())$("body").css("overflow-y","scroll");
                        if($("body").width()>$(window).width())$("body").css("overflow-x","scroll");
                  });
                  if(closeButton!="none"){
                        $("#dlb-div").append("<input id=dlb-close type=button style='position:absolute; top:15px; right:15px;' value='"+closeButton+"' />");
                  }
                  if($("#dlb-close")){
                  $("#dlb-close").click(function(){
                        $("#dlb-div").remove();
                        $("#dlb-bg").remove();
                        if($("body").height()>$(window).height())$("body").css("overflow-y","scroll");
                        if($("body").width()>$(window).width())$("body").css("overflow-x","scroll");
                  });
                  }                 
            }
      });
      // +++ delightbox on URLs +++
      $('.dlb-html').click(function(ev){
            ev.preventDefault();
            ev.stopPropagation();
            if($("#dlb-bg").length==0){
                  var sH=$(document).height(), sW=$(document).width(), scPos=$(document).scrollTop();
                  var tgtURL=$(this).attr("href");
                  if($(this).attr("dlb-width")){oW=$(this).attr("dlb-width")}else{oW="auto"};
                  if($(this).attr("dlb-height")){oH=$(this).attr("dlb-height")}else{oH="auto"}; 
                  if($(this).attr("dlb-fade")){fade=$(this).attr("dlb-fade")}else{fade="no"};
                        if(fade!="no" && fade!="yes")fade="no";                 
                  //  if there's no button, there's no way to close the iframe a priori...but the lightbox could be closed by the transaction window itself(!) (parent.dlb.quit();)
                  if($(this).attr("dlb-close")){closeButton=$(this).attr("dlb-close")}else{closeButton="none"};                                             
                  $("body").css("overflow","hidden");
                  $("body").append("<div id=dlb-bg style='position:absolute; z-index:1000; top:0px; left:0px; opacity:0.75; filter:alpha(opacity=75); width:"+(sW+20)+"px; height:"+sH+"px; background:#aaa;'></div>");
                  $("body").append("<div id=dlb-div style='display:none; z-index:1001; width:100%; height:100%; position:absolute; left:0px; top:"+scPos+"px;'><iframe id=dlb-object src='"+tgtURL+"' frameborder=none style='border:none; position:absolute; width:"+oW+"; height:"+oH+"; cursor:pointer;'/></div>");
                  if(fade=="yes"){
                        $("#dlb-div").fadeIn();
                        }else{$("#dlb-div").css("display","block");}
                  var picW=$("#dlb-object").width(), picH=$("#dlb-object").height(), lbW=$("#dlb-div").width(), lbH=$("#dlb-div").height();
                  var cX=(lbW/2)-(picW/2), cY=(lbH/2)-(picH/2);                   
                  $("#dlb-object").css("left",cX+"px").css("top",cY+"px");              
                  $(window).resize(function(){
                        var picW=$("#dlb-object").width(), picH=$("#dlb-object").height(), lbW=$("#dlb-div").width(), lbH=$("#dlb-div").height();
                        var cX=(lbW/2)-(picW/2), cY=(lbH/2)-(picH/2);
                        var sH=$(document).height(), sW=$(document).width(), scPos=$(document).scrollTop();  
                        $("#dlb-bg").css("width",(sW+20)+"px").css("height",sH+"px");                           
                        $("#dlb-object").css("left",cX+"px").css("top",cY+"px");                                                                      
                  });
                  if(closeButton!="none"){
                        $("#dlb-div").append("<input id=dlb-close type=button style='position:absolute; top:15px; right:15px;' value='"+closeButton+"' />");
                  }                 
                  if($("#dlb-close")){
                  $("#dlb-close").click(function(){
                        $("#dlb-div").remove();
                        $("#dlb-bg").remove();
                        if($("body").height()>$(window).height())$("body").css("overflow-y","scroll");
                        if($("body").width()>$(window).width())$("body").css("overflow-x","scroll");
                  });
                  }
            }
            $(window).resize();
      });
      // +++ delightbox on DIV content +++
      $('.dlb-div').click(function(ev){
            ev.preventDefault();
            ev.stopPropagation();
            if($("#dlb-bg").length==0){
                  var sH=$(document).height(), sW=$(document).width(), scPos=$(document).scrollTop();
                  var tgtURL=$(this).attr("href");
                  if($(this).attr("dlb-padding")){divPadding=$(this).attr("dlb-padding")}else{divPadding=0};
                  if($(this).attr("dlb-width")){oW=$(this).attr("dlb-width")}else{oW="auto"};
                  if($(this).attr("dlb-height")){oH=$(this).attr("dlb-height")}else{oH="auto"}; 
                  if($(this).attr("dlb-fade")){fade=$(this).attr("dlb-fade")}else{fade="no"};
                        if(fade!="no" && fade!="yes")fade="no";                 
                  //  if there's no button, there's no way to close the DIV a priori...but the lightbox could be closed by the Div itself (dlb.quit();)
                  if($(this).attr("dlb-close")){closeButton=$(this).attr("dlb-close")}else{closeButton="none"};                                             
                  $("body").css("overflow","hidden");
                  $("body").append("<div id=dlb-bg style='position:absolute; z-index:1000; top:0px; left:0px; opacity:0.75; filter:alpha(opacity=75); width:"+(sW+20)+"px; height:"+sH+"px; background:#aaa;'></div>");
                  $("body").append("<div id=dlb-div style='display:none; z-index:1001; width:100%; height:100%; position:absolute; left:0px; top:"+scPos+"px;'><div id=dlb-object style='border:1px solid #000; padding:"+divPadding+"px; background:#fff; position:absolute; width:"+oW+"; height:"+oH+";'/></div>");
                  if(fade=="yes"){
                        $("#dlb-div").fadeIn();
                        }else{$("#dlb-div").css("display","block");}
                  var picW=$("#dlb-object").width(), picH=$("#dlb-object").height(), lbW=$("#dlb-div").width(), lbH=$("#dlb-div").height();
                  var cX=(lbW/2)-(picW/2), cY=(lbH/2)-(picH/2);
                  $("#dlb-object").css("left",cX-divPadding+"px").css("top",cY-divPadding+"px");
                  $("#dlb-object").html($("#"+$(this).attr("dlb-divId")).html());               
                  $(window).resize(function(){
                        var picW=$("#dlb-object").width(), picH=$("#dlb-object").height(), lbW=$("#dlb-div").width(), lbH=$("#dlb-div").height();
                        var cX=(lbW/2)-(picW/2), cY=(lbH/2)-(picH/2);
                        var sH=$(document).height(), sW=$(document).width(), scPos=$(document).scrollTop();  
                        $("#dlb-bg").css("width",(sW+20)+"px").css("height",sH+"px");                           
                        $("#dlb-object").css("left",cX-divPadding+"px").css("top",cY-divPadding+"px");                                                                      
                  });
                  if(closeButton!="none"){
                        $("#dlb-div").append("<input id=dlb-close type=button style='position:absolute; top:15px; right:15px;' value='"+closeButton+"' />");
                  }                 
                  if($("#dlb-close")){
                  $("#dlb-close").click(function(){
                        $("#dlb-div").remove();
                        $("#dlb-bg").remove();
                        if($("body").height()>$(window).height())$("body").css("overflow-y","scroll");
                        if($("body").width()>$(window).width())$("body").css("overflow-x","scroll");
                  });
                  }
            }
      });
}