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

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(){             dl...
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