Accéder au contenu principal

Lightbox effect with jQuery (2) - example

Down below is a fully working example of the lightbox (aka thickbox) effect described in the previous article. Note that the technique has even been improved, since the script now prevents by itself a link from being opened. As a result, you do not need to place the target URL as a custom attribute anymore. Just append a class to an anchor and the script is ready to be used!

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title></title>     
        <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
        jQuery(document).ready(function(){
            $('.isLink').click(function(ev){
            // this below prevents the link from being followed
            ev.preventDefault();
            ev.stopPropagation();
            if($("#mylightbox").length==0){
            var sH=$(document).height(), sW=$(document).width(), scPos=$(document).scrollTop();
            var tgtURL=$(this).attr("href");
            $("body").css("overflow","hidden");
            $("body").append("<div id=mylightbox style='position:absolute; z-index:1000; top:0px; left:0px; opacity:0.75; filter:opacity(alpha=0,75); width:"+(sW+20)+"px; height:"+sH+"px; background:#aaa;'></div>");
            $("body").append("<div id=full-image-bg style='z-index:1001; width:100%; height:100%; position:absolute; left:0px; top:"+scPos+"px;'><img id=full-image-img src='"+tgtURL+"' style='position:absolute; width:auto; height:auto; cursor:pointer;'/></div>");
            var picW=$("#full-image-img").width(), picH=$("#full-image-img").height(), lbW=$("#full-image-bg").width(), lbH=$("#full-image-bg").height();
            var cX=(lbW/2)-(picW/2), cY=(lbH/2)-(picH/2);
            $("#full-image-img").css("left",cX+"px").css("top",cY+"px");
            $("#full-image-img").click(function(){
            $("#full-image-bg").remove();
            $("#mylightbox").remove();
            if($("body").height() > $(window).height()){
            $("body").css("overflow","scroll");
            $("body").css("overflow-x","hidden");}
            });
            }
            });
        });
        </script>
    </head>
    <body>
    <a href="https://www.google.com/images/srpr/logo4w.png" class="isLink">Click me!</a>
    <!-- class="isLink" is the only thing needed to tell the browser you want to display the target image in a lightbox -->
    </body>
</html>
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

Reordering Javascript functions

If you have already injected some Javascript dynamically in a page (possibly because you cannot modify the original scripts directly), you may have realised the order in which Javascript functions are triggered is dependent on the order of declaration. Hence, if you try and bind a new "onclick" handler on a button for which another function has already been bound, the latter will be executed before yours. Here is a simple trick to reorder the order of execution.  Say your original code looks like so: <script> function showAlert(message){      alert(message); } </script> [...] <input type=text id="myButton" onClick="showAlert(this.value);" /> You can 't modify the HTML part and yet y ou want to execute a new function of your own before the alert message of showAlert is sent, for instance the following one: function changeMessage(newMessage){       document.getElementById("myButton").value=newMessage; ...
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