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

Libellés :

Commentaires

Enregistrer un commentaire

Posts les plus consultés de ce blog

A binary clock in Javascript

Just a short post to share a tiny project I recently worked on: a binary clock. The script is written in pure Javascript (no jQuery for a change), and the design of the buttons was rapidly made in Photoshop, so nothing fancy...but I really wanted to create this :-) http://manuthommes.be/toolbox/binaryclock/ As usual, the code is not obfuscated so you can have a look and feel free to copy/edit.
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

jQuarax - a parallax plugin

This plugin is still in the making and complete documentation (as well as a downloadable package) will be available later. Sample code and quick variable explanation further below. jQuarax-latest.js:  var jquarax = {   load: loader }; function loader(){   jQuery(document).ready(function(){     // parallax script     $(".jquarax-div-container").scroll(function(){       scrollPos = parseInt($(".jquarax-div-container").scrollTop());       scrollPosPC = (100/parseInt($(".jquarax-div-container").css("height")))*(parseInt($(".jquarax-div-container").scrollTop()));       $(".jquarax-object").each(function(e){         var unit = $(this).attr("frmode");          if(unit=="%"){scrollPos=scrollPosPC;}         var startIt = parseInt($(this).attr("frstart"));  ...
Enregistrer un commentaire
Lire la suite