Accéder au contenu principal

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");
                  });
                  }
            }
      });
}


Libellés :

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

Date format matching regex

Regex is a must-learn for any programmer, plus it is always interesting to see how an apparently complex check can be done with a basic rule (...or how a simple check sometimes requires a long and obscure rule, but that's the whole fun of it :P). Here's a short and useful regex to match a date field (for instance when submitting a form). // expected field value format: YYYY-MM-DD var e = document.getElementById("myDateField").value; var m = e.match(/(20\d\d|19\d\d)\-(0\d|1[012])\-([012]\d|3[01])/); Breaking it down: / (20\d\d|19\d\d) \- (0\d|1[012]) \- ([012]\d|3[01]) / 1. Year (20\d\d|19\d\d) Trying to match either "20" followed by 2 digits (2000, 2001,2002,...2099) or "19" and then 2 digits (1900...1999). Would not match: 20a0, 201, 20AA 2. Month (0\d|1[012]) Trying to match either "0" followed by one digit (01...09) or "1" followed by 0, 1 or 2 (hence only 10,11 or 12). We assume here that the month must ...
Enregistrer un commentaire
Lire la suite

Snake game (pure JS)

Building a mini snake game in JS is one of these things every webcoder should be able to do. Since I hadn't tackled that "challenge" yet (and mostly because I was bored like hell and wanted to code something without using jQuery for a change), I decided to give it a shot. This is very basic, but it taught me a two interesting things I was unaware of: it seems that a DIV cannot natively receives the focus, but a simple workaround to cope with this is to give the DIV a tabIndex value if you duplicate an array (Array.splice(0)), references are maintained (so as far as I understand, if you modify the original array, the copy will be modified in sync...sounds pretty weird, but I must admit that there was something fishy with the values returned during my initial attempts to clone an array) Anyway, you can find the result of that one-hour experiment at the following URL: http://www.manuthommes.be/toolbox/snakejs/ Note: Left/Right arrows to turn. ...
Enregistrer un commentaire
Lire la suite