13 Replies Latest reply on Feb 8, 2013 8:04 AM by akinyapi

    Can you click on an open Lightbox image to close the Lightbox?

    M.Rusk Level 1

      Does anyone out there know about the "work-around" so that when you click an open Lightbox image, the Lightbox will close?

       

      I can get the Lightbox image to close when I click outside the Lightbox image, but can't figure out a way to close it when I click on the Lightbox image.

       

      Any help is greatly appreciated.

        • 1. Re: Can you click on an open Lightbox image to close the Lightbox?
          370H55V Level 4

          Lightbox CSS is laid out with  < PREV, NEXT > and CLOSE X "buttons". They should display with the lightbox picture:

          lightbox.jpg

          The <PREV and NEXT > will only display if you have multiple pictures in a "set" (see above Image 5 of 9), but the CLOSE X is defaulted to appear in the bottom of the lightbox. You can also use the P, N or X keys to navigate or close a Lightbox.

           

          Lately I've seen a second layer with navigation and CLOSE buttons in some Lightbox pages, but I haven't got ahold of that script build yet to see how it works.

          • 2. Re: Can you click on an open Lightbox image to close the Lightbox?
            M.Rusk Level 1

            I know about the Prev, Next, and Close and have the close button on my lightbox images, but I still would like the end-user to be able to click anywhere on the actual image (not just the little close button) to close the lightbox.  I've found other vague references to having a "work-around" to be able to do this, but have not found the actual code to be able to do this.

             

            Thanks for the quick reply.

            • 3. Re: Can you click on an open Lightbox image to close the Lightbox?
              John Waller Adobe Community Professional & MVP

              Which Lightbox script are you using?

               

              Got a link?

              • 6. Re: Can you click on an open Lightbox image to close the Lightbox?
                John Waller Adobe Community Professional & MVP

                If you want to continue with the DMXZone script, I suggest you post the question there to get a reply from the author of the script:

                http://www.dmxzone.com/forum/2377/?page=1

                 

                Looks like an actie forum.

                • 7. Re: Can you click on an open Lightbox image to close the Lightbox?
                  M.Rusk Level 1

                  You evidently don't realize that they don't respond AT ALL.  They are a

                  fairly useless bunch.  They got my $500 and now they have left me high

                  and dry!!!

                   

                  Thanks for the suggestion, but that avenue has already lasted over 9

                  days with absolutely no response and is quite futile.

                   

                  Quoting John Waller <forums@adobe.com>:

                  If you want to continue with the DMXZone script, I suggest you post

                  the question

                  there to get a reply from the author of the script:

                  http://www.dmxzone.com/forum/2377/?page=1

                   

                  Looks like an actie forum.

                  >

                  • 8. Re: Can you click on an open Lightbox image to close the Lightbox?
                    M.Rusk Level 1

                    I'm not sure what you mean "Try that."

                     

                    Do you mean that I should drop using Lightbox and go to thickbox?  Or

                    do you mean that there is documentation somewhere on the site link you

                    sent to me?  Or what?

                     

                     

                    "Try that." is kind of cryptic!

                     

                     

                     

                    Quoting Mac+Win=Me <forums@adobe.com>:

                    http://jquery.com/demo/thickbox/

                     

                    Try that.

                    >

                    • 9. Re: Can you click on an open Lightbox image to close the Lightbox?
                      370H55V Level 4

                      Thickbox is a form of Lightbox.

                       

                      The link is to the download and description page which clearly points out that Thickbox allows viewers to close the image by clicking anywhere inside or out of the image when it's displayed. (Which I believe is what you originally asked when the thread was started)

                       

                      I wasn't trying to be smart-assed or cryptic.

                       

                      That's why I posted it in 20 point type. It was my intention that you'd see it as a link and follow it for more information.

                       

                      Since I obviously got it wrong, here's the info:

                       

                       

                      ThickBox is a webpage UI dialog widget written in  JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline  content, iframed content, or content served through AJAX in a hybrid modal.

                       

                      Overview-

                      Features:

                      • ThickBox was built using the super lightweight jQuery library. Compressed, the jQuery  library is 20k, uncompressed it's 58k.
                      • The ThickBox JavaScript code and CSS file only add an additional  15k (only 10k by using the thickbox-compressed.js) on top of the jQuery  code. The CSS file could additionally be compressed if need be.
                      • ThickBox will resize images that are bigger than the browser  window.
                      • ThickBox offers versatility (images, iframed content, inline  content, and AJAX content).
                      • ThickBox will hide form elements in Windows IE 6.
                      • ThickBox will remain centered in the window even when the user  scrolls the page or changes the size of the browser window.  Clicking an  image, the overlay, or close link will remove ThickBox.
                      • Due to the ThickBox creator's view that transitions should be  tailored by individual authors, ThickBox windows do not implement fancy  transitions.  Feel free to add them as you see fit. Is this a feature?  Well, some might say it is.
                      • ThickBox can be invoked from a link element, input element  (typically a button), and the area element (image maps).

                      Download thickbox.js or thickbox-compressed.jsThickBox.css,  and the loading graphic (loadingAnimation.gif)  to your local machine (or cut and paste the code from the tabs). Along  with these three files, a copy of the jQuery JavaScript library is needed. For this site, and ThickBox, I am using the compressed version of  jQuery.

                      /*
                      * Thickbox 3.1 - One Box To Rule Them All.
                      * By Cody Lindley (http://www.codylindley.com)
                      * Copyright (c) 2007 cody lindley
                      * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
                      */

                           
                      var tb_pathToImage = "images/loadingAnimation.gif";
                      /*!!!!!!!!!!!!!!!!! edit below this line at your own risk !!!!!!!!!!!!!!!!!!!!!!!*/
                      //on page load call tb_init
                      $(document).ready(function(){  
                        tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox
                        imgLoader = new Image();// preload image
                        imgLoader.src = tb_pathToImage;
                      });
                      //add thickbox to href & area elements that have a class of .thickbox
                      function tb_init(domChunk){
                        $(domChunk).click(function(){
                        var t = this.title || this.name || null;
                        var a = this.href || this.alt;
                        var g = this.rel || false;
                        tb_show(t,a,g);
                        this.blur();
                        return false;
                        });
                      }
                      function tb_show(caption, url, imageGroup) {//function called when the user clicks on a thickbox link
                        try {
                          if (typeof document.body.style.maxHeight === "undefined") {//if IE 6
                            $("body","html").css({height: "100%", width: "100%"});
                            $("html").css("overflow","hidden");
                            if (document.getElementById("TB_HideSelect") === null) {//iframe to hide select elements in ie6
                              $("body").append("<iframe id='TB_HideSelect'></iframe><div id='TB_overlay'></div><div id='TB_window'></div>");
                              $("#TB_overlay").click(tb_remove);
                            }
                          }else{//all others
                            if(document.getElementById("TB_overlay") === null){
                              $("body").append("<div id='TB_overlay'></div><div id='TB_window'></div>");
                              $("#TB_overlay").click(tb_remove);
                            }
                          }
                         
                          if(tb_detectMacXFF()){
                            $("#TB_overlay").addClass("TB_overlayMacFFBGHack");//use png overlay so hide flash
                          }else{
                            $("#TB_overlay").addClass("TB_overlayBG");//use background and opacity
                          }
                         
                          if(caption===null){caption="";}
                          $("body").append("<div id='TB_load'><img src='"+imgLoader.src+"' /></div>");//add loader to the page
                          $('#TB_load').show();//show loader
                         
                          var baseURL;
                           if(url.indexOf("?")!==-1){ //ff there is a query string involved
                            baseURL = url.substr(0, url.indexOf("?"));
                           }else{
                               baseURL = url;
                           }
                          
                           var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;
                           var urlType = baseURL.toLowerCase().match(urlString);
                          if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' || urlType == '.gif' || urlType == '.bmp'){//code to show images
                             
                            TB_PrevCaption = "";
                            TB_PrevURL = "";
                            TB_PrevHTML = "";
                            TB_NextCaption = "";
                            TB_NextURL = "";
                            TB_NextHTML = "";
                            TB_imageCount = "";
                            TB_FoundURL = false;
                            if(imageGroup){
                              TB_TempArray = $("a[@rel="+imageGroup+"]").get();
                              for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) && (TB_NextHTML === "")); TB_Counter++) {
                                var urlTypeTemp = TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);
                                  if (!(TB_TempArray[TB_Counter].href == url)) {           
                                    if (TB_FoundURL) {
                                      TB_NextCaption = TB_TempArray[TB_Counter].title;
                                      TB_NextURL = TB_TempArray[TB_Counter].href;
                                      TB_NextHTML = "<span id='TB_next'>  <a href='#'>Next &gt;</a></span>";
                                    } else {
                                      TB_PrevCaption = TB_TempArray[TB_Counter].title;
                                      TB_PrevURL = TB_TempArray[TB_Counter].href;
                                      TB_PrevHTML = "<span id='TB_prev'>  <a href='#'>&lt; Prev</a></span>";
                                    }
                                  } else {
                                    TB_FoundURL = true;
                                    TB_imageCount = "Image " + (TB_Counter + 1) +" of "+ (TB_TempArray.length);                     
                                  }
                              }
                            }
                            imgPreloader = new Image();
                            imgPreloader.onload = function(){   
                            imgPreloader.onload = null;
                             
                            // Resizing large images - orginal by Christian Montoya edited by me.
                            var pagesize = tb_getPageSize();
                            var x = pagesize[0] - 150;
                            var y = pagesize[1] - 150;
                            var imageWidth = imgPreloader.width;
                            var imageHeight = imgPreloader.height;
                            if (imageWidth > x) {
                              imageHeight = imageHeight * (x / imageWidth);
                              imageWidth = x;
                              if (imageHeight > y) {
                                imageWidth = imageWidth * (y / imageHeight);
                                imageHeight = y;
                              }
                            } else if (imageHeight > y) {
                              imageWidth = imageWidth * (y / imageHeight);
                              imageHeight = y;
                              if (imageWidth > x) {
                                imageHeight = imageHeight * (x / imageWidth);
                                imageWidth = x;
                              }
                            }
                            // End Resizing
                           
                            TB_WIDTH = imageWidth + 30;
                            TB_HEIGHT = imageHeight + 60;
                            $("#TB_window").append("<a href='' id='TB_ImageOff' title='Close'><img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='"+caption+"'/></a>" + "<div id='TB_caption'>"+caption+"<div id='TB_secondLine'>" + TB_imageCount + TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div>");    
                           
                            $("#TB_closeWindowButton").click(tb_remove);
                           
                            if (!(TB_PrevHTML === "")) {
                              function goPrev(){
                                if($(document).unbind("click",goPrev)){$(document).unbind("click",goPrev);}
                                $("#TB_window").remove();
                                $("body").append("<div id='TB_window'></div>");
                                tb_show(TB_PrevCaption, TB_PrevURL, imageGroup);
                                return false
                              }
                              $("#TB_prev").click(goPrev);
                            }
                           
                            if (!(TB_NextHTML === "")) {   
                              function goNext(){
                                $("#TB_window").remove();
                                $("body").append("<div id='TB_window'></div>");
                                tb_show(TB_NextCaption, TB_NextURL, imageGroup);       
                                return false
                              }
                              $("#TB_next").click(goNext);
                             
                            }
                            document.onkeydown = function(e){  
                              if (e == null) { // ie
                                keycode = event.keyCode;
                              } else { // mozilla
                                keycode = e.which;
                              }
                              if(keycode == 27){ // close
                                tb_remove();
                              } else if(keycode == 190){ // display previous image
                                if(!(TB_NextHTML == "")){
                                  document.onkeydown = "";
                                  goNext();
                                }
                              } else if(keycode == 188){ // display next image
                                if(!(TB_PrevHTML == "")){
                                  document.onkeydown = "";
                                  goPrev();
                                }
                              } 
                            };
                           
                            tb_position();
                            $("#TB_load").remove();
                            $("#TB_ImageOff").click(tb_remove);
                            $("#TB_window").css({display:"block"}); //for safari using css instead of show
                            };
                           
                            imgPreloader.src = url;
                          }else{//code to show html
                           
                            var queryString = url.replace(/^[^\?]+\??/,'');
                            var params = tb_parseQuery( queryString );
                            TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
                            TB_HEIGHT = (params['height']*1) + 40 || 440; //defaults to 440 if no paramaters were added to URL
                            ajaxContentW = TB_WIDTH - 30;
                            ajaxContentH = TB_HEIGHT - 45;
                           
                            if(url.indexOf('TB_iframe') != -1){// either iframe or ajax window   
                                urlNoQuery = url.split('TB_');
                                $("#TB_iframeContent").remove();
                                if(params['modal'] != "true"){//iframe no modal
                                  $("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div></div><iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' > </iframe>");
                                }else{//iframe modal
                                $("#TB_overlay").unbind();
                                  $("#TB_window").append("<iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent' name='TB_iframeContent"+Math.round(Math.random()*1000)+"' onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;'> </iframe>");
                                }
                            }else{// not an iframe, ajax
                                if($("#TB_window").css("display") != "block"){
                                  if(params['modal'] != "true"){//ajax no modal
                                  $("#TB_window").append("<div id='TB_title'><div id='TB_ajaxWindowTitle'>"+caption+"</div><div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton'>close</a> or Esc Key</div></div><div id='TB_ajaxContent' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px'></div>");
                                  }else{//ajax modal
                                  $("#TB_overlay").unbind();
                                  $("#TB_window").append("<div id='TB_ajaxContent' class='TB_modal' style='width:"+ajaxContentW+"px;height:"+ajaxContentH+"px;'></div>")
                                  }
                                }else{//this means the window is already up, we are just loading new content via ajax
                                  $("#TB_ajaxContent")[0].style.width = ajaxContentW +"px";
                                  $("#TB_ajaxContent")[0].style.height = ajaxContentH +"px";
                                  $("#TB_ajaxContent")[0].scrollTop = 0;
                                  $("#TB_ajaxWindowTitle").html(caption);
                                }
                            }
                               
                            $("#TB_closeWindowButton").click(tb_remove);
                           
                              if(url.indexOf('TB_inline') != -1)
                                $("#TB_ajaxContent").append($('#' + params['inlineId']).children());
                                $("#TB_window").unload(function () {
                                  $('#' + params['inlineId']).append( $("#TB_ajaxContent").children() ); // move elements back when you're finished
                                });
                                tb_position();
                                $("#TB_load").remove();
                                $("#TB_window").css({display:"block"});
                              }else if(url.indexOf('
                      TB_iframe') != -1){
                                tb_position();
                                if($.browser.safari){//safari needs help because it will not fire iframe onload
                                  $("#TB_load").remove();
                                  $("#TB_window").css({display:"block"});
                                }
                              }else{
                                $("#TB_ajaxContent").load(url += "&random=" + (new Date().getTime()),function(){//to do a post change this load method
                                  tb_position();
                                  $("#TB_load").remove();
                                  tb_init("#TB_ajaxContent a.thickbox");
                                  $("#TB_window").css({display:"block"});
                                });
                              }
                           
                          }
                          if(!params['
                      modal']){
                            document.onkeyup = function(e){  
                              if (e == null) { // ie
                                keycode = event.keyCode;
                              } else { // mozilla
                                keycode = e.which;
                              }
                              if(keycode == 27){ // close
                                tb_remove();
                              } 
                            };
                          }
                         
                        } catch(e) {
                          //nothing here
                        }
                      }
                      //helper functions below
                      function tb_showIframe(){
                        $("#TB_load").remove();
                        $("#TB_window").css({display:"block"});
                      }
                      function tb_remove() {
                         $("#TB_imageOff").unbind("click");
                        $("#TB_closeWindowButton").unbind("click");
                        $("#TB_window").fadeOut("fast",function(){$('
                      #TB_window,#TB_overlay,#TB_HideSelect').trigger("unload").unbind().remove();});
                        $("#TB_load").remove();
                        if (typeof document.body.style.maxHeight == "undefined") {//if IE 6
                          $("body","html").css({height: "auto", width: "auto"});
                          $("html").css("overflow","");
                        }
                        document.onkeydown = "";
                        document.onkeyup = "";
                        return false;
                      }
                      function tb_position() {
                      $("#TB_window").css({marginLeft: '
                      -' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
                        if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
                          $("#TB_window").css({marginTop: '
                      -' + parseInt((TB_HEIGHT / 2),10) + 'px'});
                        }
                      }
                      function tb_parseQuery ( query ) {
                         var Params = {};
                         if ( ! query ) {return Params;}// return empty object
                         var Pairs = query.split(/[;&]/);
                         for ( var i = 0; i < Pairs.length; i++ ) {
                            var KeyVal = Pairs[i].split('
                      =');
                            if ( ! KeyVal || KeyVal.length != 2 ) {continue;}
                            var key = unescape( KeyVal[0] );
                            var val = unescape( KeyVal[1] );
                            val = val.replace(/\+/g, '
                      ');
                            Params[key] = val;
                         }
                         return Params;
                      }
                      function tb_getPageSize(){
                        var de = document.documentElement;
                        var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
                        var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
                        arrayPageSize = [w,h];
                        return arrayPageSize;
                      }
                      function tb_detectMacXFF() {
                        var userAgent = navigator.userAgent.toLowerCase();
                        if (userAgent.indexOf('
                      mac') != -1 && userAgent.indexOf('firefox')!=-1) {
                          return true;
                        }
                      }

                      /* ----------------------------------------------------------------------------------------------------------------*/
                      /* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
                      /* ----------------------------------------------------------------------------------------------------------------*/
                      *{padding: 0; margin: 0;}
                      /* ----------------------------------------------------------------------------------------------------------------*/
                      /* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
                      /* ----------------------------------------------------------------------------------------------------------------*/
                      #TB_window {
                        font: 12px Arial, Helvetica, sans-serif;
                        color: #333333;
                      }
                      #TB_secondLine {
                        font: 10px Arial, Helvetica, sans-serif;
                        color:#666666;
                      }
                      #TB_window a:link {color: #666666;}
                      #TB_window a:visited {color: #666666;}
                      #TB_window a:hover {color: #000;}
                      #TB_window a:active {color: #666666;}
                      #TB_window a:focus{color: #666666;}
                      /* ----------------------------------------------------------------------------------------------------------------*/
                      /* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
                      /* ----------------------------------------------------------------------------------------------------------------*/
                      #TB_overlay {
                        position: fixed;
                        z-index:100;
                        top: 0px;
                        left: 0px;
                        height:100%;
                        width:100%;
                      }
                      .TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;}
                      .TB_overlayBG {
                        background-color:#000;
                        filter:alpha(opacity=75);
                        -moz-opacity: 0.75;
                        opacity: 0.75;
                      }
                      * html #TB_overlay { /* ie6 hack */
                           position: absolute;
                           height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
                      }
                      #TB_window {
                        position: fixed;
                        background: #ffffff;
                        z-index: 102;
                        color:#000000;
                        display:none;
                        border: 4px solid #525252;
                        text-align:left;
                        top:50%;
                        left:50%;
                      }
                      * html #TB_window { /* ie6 hack */
                      position: absolute;
                      margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
                      }
                      #TB_window img#TB_Image {
                        display:block;
                        margin: 15px 0 0 15px;
                        border-right: 1px solid #ccc;
                        border-bottom: 1px solid #ccc;
                        border-top: 1px solid #666;
                        border-left: 1px solid #666;
                      }
                      #TB_caption{
                        height:25px;
                        padding:7px 30px 10px 25px;
                        float:left;
                      }
                      #TB_closeWindow{
                        height:25px;
                        padding:11px 25px 10px 0;
                        float:right;
                      }
                      #TB_closeAjaxWindow{
                        padding:7px 10px 5px 0;
                        margin-bottom:1px;
                        text-align:right;
                        float:right;
                      }
                      #TB_ajaxWindowTitle{
                        float:left;
                        padding:7px 0 5px 10px;
                        margin-bottom:1px;
                      }
                      #TB_title{
                        background-color:#e8e8e8;
                        height:27px;
                      }
                      #TB_ajaxContent{
                        clear:both;
                        padding:2px 15px 15px 15px;
                        overflow:auto;
                        text-align:left;
                        line-height:1.4em;
                      }
                      #TB_ajaxContent.TB_modal{
                        padding:15px;
                      }
                      #TB_ajaxContent p{
                        padding:5px 0px 5px 0px;
                      }
                      #TB_load{
                        position: fixed;
                        display:none;
                        height:13px;
                        width:208px;
                        z-index:103;
                        top: 50%;
                        left: 50%;
                        margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */
                      }
                      * html #TB_load { /* ie6 hack */
                      position: absolute;
                      margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');
                      }
                      #TB_HideSelect{
                        z-index:99;
                        position:fixed;
                        top: 0;
                        left: 0;
                        background-color:#fff;
                        border:none;
                        filter:alpha(opacity=0);
                        -moz-opacity: 0;
                        opacity: 0;
                        height:100%;
                        width:100%;
                      }
                      * html #TB_HideSelect { /* ie6 hack */
                           position: absolute;
                           height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
                      }
                      #TB_iframeContent{
                        clear:both;
                        border:none;
                        margin-bottom:-1px;
                        margin-top:1px;
                        _margin-bottom:1px;
                      }
                      Right Click and Download:

                      Loading Animation Image

                      /*
                      * Thickbox 3 - One Box To Rule Them All.
                      * By Cody Lindley (http://www.codylindley.com)
                      * Copyright (c) 2007 cody lindley
                      * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
                      */

                      var tb_pathToImage = "images/loadingAnimation.gif";
                      eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('$(o).2S(9(){1u(\'a.18, 3n.18, 3i.18\');1w=1p 1t();1w.L=2H});9 1u(b){$(b).s(9(){6 t=X.Q||X.1v||M;6 a=X.u||X.23;6 g=X.1N||P;19(t,a,g);X.2E();H P})}9 19(d,f,g){3m{3(2t o.v.J.2i==="2g"){$("v","11").r({A:"28%",z:"28%"});$("11").r("22","2Z");3(o.1Y("1F")===M){$("v").q("<U 5=\'1F\'></U><4 5=\'B\'></4><4 5=\'8\'></4>");$("#B").s(G)}}n{3(o.1Y("B")===M){$("v").q("<4 5=\'B\'></4><4 5=\'8\'></4>");$("#B").s(G)}}3(1K()){$("#B").1J("2B")}n{$("#B").1J("2z")}3(d===M){d=""}$("v").q("<4 5=\'K\'><1I L=\'"+1w.L+"\' /></4>");$(\'#K\').2y();6 h;3(f.O("?")!==-1){h=f.3l(0,f.O("?"))}n{h=f}6 i=/\\.2s$|\\.2q$|\\.2m$|\\.2l$|\\.2k$/;6 j=h.1C().2h(i);3(j==\'.2s\'||j==\'.2q\'||j==\'.2m\'||j==\'.2l\'||j==\'.2k\'){1D="";1G="";14="";1z="";1x="";R="";1n="";1r=P;3(g){E=$("a[@1N="+g+"]").36();25(D=0;((D<E.1c)&&(R===""));D++){6 k=E[D].u.1C().2h(i);3(!(E[D].u==f)){3(1r){1z=E[D].Q;1x=E[D].u;R="<1e 5=\'1X\'>&1d;&1d;<a u=\'#\'>2T &2R;</a></1e>"}n{1D=E[D].Q;1G=E[D].u;14="<1e 5=\'1U\'>&1d;&1d;<a u=\'#\'>&2O; 2N</a></1e>"}}n{1r=1b;1n="1t "+(D+1)+" 2L "+(E.1c)}}}S=1p 1t();S.1g=9(){S.1g=M;6 a=2x();6 x=a[0]-1M;6 y=a[1]-1M;6 b=S.z;6 c=S.A;3(b>x){c=c*(x/b);b=x;3(c>y){b=b*(y/c);c=y}}n 3(c>y){b=b*(y/c);c=y;3(b>x){c=c*(x/b);b=x}}13=b+30;1a=c+2G;$("#8").q("<a u=\'\' 5=\'1L\' Q=\'1o\'><1I 5=\'2F\' L=\'"+f+"\' z=\'"+b+"\' A=\'"+c+"\' 23=\'"+d+"\'/></a>"+"<4 5=\'2D\'>"+d+"<4 5=\'2C\'>"+1n+14+R+"</4></4><4 5=\'2A\'><a u=\'#\' 5=\'Z\' Q=\'1o\'>1l</a> 1k 1j 1s</4>");$("#Z").s(G);3(!(14==="")){9 12(){3($(o).N("s",12)){$(o).N("s",12)}$("#8").C();$("v").q("<4 5=\'8\'></4>");19(1D,1G,g);H P}$("#1U").s(12)}3(!(R==="")){9 1i(){$("#8").C();$("v").q("<4 5=\'8\'></4>");19(1z,1x,g);H P}$("#1X").s(1i)}o.1h=9(e){3(e==M){I=2w.2v}n{I=e.2u}3(I==27){G()}n 3(I==3k){3(!(R=="")){o.1h="";1i()}}n 3(I==3j){3(!(14=="")){o.1h="";12()}}};16();$("#K").C();$("#1L").s(G);$("#8").r({Y:"T"})};S.L=f}n{6 l=f.2r(/^[^\\?]+\\??/,\'\');6 m=2p(l);13=(m[\'z\']*1)+30||3h;1a=(m[\'A\']*1)+3g||3f;W=13-30;V=1a-3e;3(f.O(\'2j\')!=-1){1E=f.1B(\'3d\');$("#15").C();3(m[\'1A\']!="1b"){$("#8").q("<4 5=\'2f\'><4 5=\'1H\'>"+d+"</4><4 5=\'2e\'><a u=\'#\' 5=\'Z\' Q=\'1o\'>1l</a> 1k 1j 1s</4></4><U 1W=\'0\' 2d=\'0\' L=\'"+1E[0]+"\' 5=\'15\' 1v=\'15"+1f.2c(1f.1y()*2b)+"\' 1g=\'1m()\' J=\'z:"+(W+29)+"p;A:"+(V+17)+"p;\' > </U>")}n{$("#B").N();$("#8").q("<U 1W=\'0\' 2d=\'0\' L=\'"+1E[0]+"\' 5=\'15\' 1v=\'15"+1f.2c(1f.1y()*2b)+"\' 1g=\'1m()\' J=\'z:"+(W+29)+"p;A:"+(V+17)+"p;\'> </U>")}}n{3($("#8").r("Y")!="T"){3(m[\'1A\']!="1b"){$("#8").q("<4 5=\'2f\'><4 5=\'1H\'>"+d+"</4><4 5=\'2e\'><a u=\'#\' 5=\'Z\'>1l</a> 1k 1j 1s</4></4><4 5=\'F\' J=\'z:"+W+"p;A:"+V+"p\'></4>")}n{$("#B").N();$("#8").q("<4 5=\'F\' 3c=\'3b\' J=\'z:"+W+"p;A:"+V+"p;\'></4>")}}n{$("#F")[0].J.z=W+"p";$("#F")[0].J.A=V+"p";$("#F")[0].3a=0;$("#1H").11(d)}}$("#Z").s(G);3(f.O(\'37\')!=-1){$("#F").q($(\'#\'+m[\'26\']).1T());$("#8").24(9(){$(\'#\'+m[\'26\']).q($("#F").1T())});16();$("#K").C();$("#8").r({Y:"T"})}n 3(f.O(\'2j\')!=-1){16();3($.1q.35){$("#K").C();$("#8").r({Y:"T"})}}n{$("#F").34(f+="&1y="+(1p 33().32()),9(){16();$("#K").C();1u("#F a.18");$("#8").r({Y:"T"})})}}3(!m[\'1A\']){o.21=9(e){3(e==M){I=2w.2v}n{I=e.2u}3(I==27){G()}}}}31(e){}}9 1m(){$("#K").C();$("#8").r({Y:"T"})}9 G(){$("#2Y").N("s");$("#Z").N("s");$("#8").2X("2W",9(){$(\'#8,#B,#1F\').2V("24").N().C()});$("#K").C();3(2t o.v.J.2i=="2g"){$("v","11").r({A:"1Z",z:"1Z"});$("11").r("22","")}o.1h="";o.21="";H P}9 16(){$("#8").r({2U:\'-\'+20((13/2),10)+\'p\',z:13+\'p\'});3(!(1V.1q.2Q&&1V.1q.2P<7)){$("#8").r({38:\'-\'+20((1a/2),10)+\'p\'})}}9 2p(a){6 b={};3(!a){H b}6 c=a.1B(/[;&]/);25(6 i=0;i<c.1c;i++){6 d=c[i].1B(\'=\');3(!d||d.1c!=2){39}6 e=2a(d[0]);6 f=2a(d[1]);f=f.2r(/\\+/g,\' \');b[e]=f}H b}9 2x(){6 a=o.2M;6 w=1S.2o||1R.2o||(a&&a.1Q)||o.v.1Q;6 h=1S.1P||1R.1P||(a&&a.2n)||o.v.2n;1O=[w,h];H 1O}9 1K(){6 a=2K.2J.1C();3(a.O(\'2I\')!=-1&&a.O(\'3o\')!=-1){H 1b}}',62,211,'|||if|div|id|var||TB_window|function||||||||||||||else|document|px|append|css|click||href|body||||width|height|TB_overlay|remove|TB_Counter|TB_TempArray|TB_ajaxContent|tb_remove|return|keycode|style|TB_load|src|null|unbind|indexOf|false|title|TB_NextHTML|imgPreloader|block|iframe|ajaxContentH|ajaxContentW|this|display|TB_closeWindowButton||html|goPrev|TB_WIDTH|TB_PrevHTML|TB_iframeContent|tb_position||thickbox|tb_show|TB_HEIGHT|true|length|nbsp|span|Math|onload|onkeydown|goNext|Esc|or|close|tb_showIframe|TB_imageCount|Close|new|browser|TB_FoundURL|Key|Image|tb_init|name|imgLoader|TB_NextURL|random|TB_NextCaption|modal|split|toLowerCase|TB_PrevCaption|urlNoQuery|TB_HideSelect|TB_PrevURL|TB_ajaxWindowTitle|img|addClass|tb_detectMacXFF|TB_ImageOff|150|rel|arrayPageSize|innerHeight|clientWidth|self|window|children|TB_prev|jQuery|frameborder|TB_next|getElementById|auto|parseInt|onkeyup|overflow|alt|unload|for|inlineId||100||unescape|1000|round|hspace|TB_closeAjaxWindow|TB_title|undefined|match|maxHeight|TB_iframe|bmp|gif|png|clientHeight|innerWidth|tb_parseQuery|jpeg|replace|jpg|typeof|which|keyCode|event|tb_getPageSize|show|TB_overlayBG|TB_closeWindow|TB_overlayMacFFBGHack|TB_secondLine|TB_caption|blur|TB_Image|60|tb_pathToImage|mac|userAgent|navigator|of|documentElement|Prev|lt|version|msie|gt|ready|Next|marginLeft|trigger|fast|fadeOut|TB_imageOff|hidden||catch|getTime|Date|load|safari|get|TB_inline|marginTop|continue|scrollTop|TB_modal|class|TB_|45|440|40|630|input|188|190|substr|try|area|firefox'.split('|'),0,{}))

                      How to Implement ThickBox:

                      Before you can implement ThickBox make sure the page that invokes  ThickBox has a valid DTD. This is  required for ThickBox to look and function correctly.

                      1. ThickBox requires the jQuery JavaScript library; because of  this, you will need to include the jquery.js file in the head element of  your web page, followed by the thickbox.js file (NOTE: jquery.js must  come first in the source order). Example below:

                      <script type="text/javascript" src="path-to-file/jquery.js"></script>
                      <script type="text/javascript" src="path-to-file/thickbox.js"></script>

                      Once you have included the .js files, open thickbox.js or thickbox-compressed.js and locate the tb_pathToImage variable at the top of the page. Once you  have found it, make sure to change the value of tb_pathToImage to the  path where the loadingAnimation.gif file is located on your own server.

                      2. Include the ThickBox CSS file in your web page. As of version  3.1 you will                     also need to update the path to the macFFBgHack.png in the thickbox.css                     file. Example options below:

                      <link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

                      Or

                      <style type="text/css" media="all">@import "path-to-file/thickbox.css";</style>

                      Or, open the thickbox.css file                     and copy and paste the styles into an existing style sheet. Be                     aware that the ThickBox CSS file will remove the browsers default                     padding and margin for all elements.

                      3. View the examples to learn the many different ways to use and  invoke ThickBox functionality.

                      Supported & Tested Browsers

                      Windows IE 6.0, Windows IE 7+, Windows FF 2.0.0.6+, Windows Opera  9.0+,                Macintosh Safari 2.0.4+, Macintosh FF 2.0.0.6+, Macintosh Opera 9.10+

                      MIT License/GNU License

                      http://www.opensource.org/licenses/mit-license.php

                      http://www.gnu.org/licenses/gpl.html

                      Permission is hereby granted, free of charge, to any person obtaining  a copy of this software and associated documentation files (the  "Software"), to deal in the Software without restriction, including  without limitation the rights to use, copy, modify, merge, publish,  distribute, sublicense, and/or sell copies of the Software, and to  permit persons to whom the Software is furnished to do so.

                      Change Log

                      As of 08/01/2007

                      • Added modal functionality to ThickBox iframes
                      • Fixed Flash  transparency issue with Firefox on OSX
                      • Updated to jQuery 1.1.3.1
                      • Changed how inline content is handled in Thickbox. Instead of  duplicating the inline content thickbox will now move it accordingly  inside of the DOM
                      • Safari iframe source issue solved

                      As of 05/02/2007

                      • If sizes are not set for width and/or height (inline, iframe, and  ajax content), ThickBox will default to a width of 630px and a height  of 440px
                      • iframe hack to hide &select" elements now only runs in IE 6
                      • Scrollbars are removed in IE 6 when a ThickBox is opened (to counter  IE 6's errant width and height calculations)
                      • Cleaned code using JSLint
                      • A new compressed thickbox.js using Packer
                      • Updated ThickBox to use jQuery 1.1.2
                      • Major updates to JavaScript and CSS to address scrolling and overlay  issues
                      • Replaced pre-loader image, and Pre-loader image is now being  pre-loaded
                      • ThickBox now works with image maps ("area" elements) and form  buttons ("input" elements), just like links ("a" elements)
                      • If you use Ajax content, ThickBox will now open new content in the  current ThickBox. That is, after the content is loaded into a ThickBox  (via Ajax), it will be parsed for any area, link, or input elements with  a class of "thickbox". This will allow you to load new content into the  current ThickBox
                      • Added the ability to create a real modal window when using inline or  Ajax content

                      As of 1/24/2007

                      • Updated ThickBox to work with jQuery release 1.1.1

                      As of 10/11/2006

                      • Updated jQuery code to release 1.0.2

                      As of 10/09/2006

                      • Fixed scrolling issues with FireFox

                      As of 09/23/2006

                      • Updated jQuery code to release 1.0.1
                      • The escape key will now close ThickBox
                      • Removed the necessity to have an extension to use the iframe  content and ajax content (image content still requires an extension)
                      • When opening iframe content with ThickBox the window will only  appear after the window has loaded its content (This will not work in  Safari)
                      • Moved the next and previous keyboard functionality for the  gallery images to the left < key (previous) and right > key  (next). By doing this it fixes a known issue with safari and the arrow  keys. This also allows sites design to be scrolled horizontally to use  the arrow keys accordingly.
                      • ThickBox will now work with sites that scroll horizontally. So, a  ThickBox, not matter if you scroll a website horizontally or vertically  will always show up centered in the window.

                      As of 08/07/2006

                      • Fixed height issue of transparent iframe to hide select elements  in IE

                      As of 08/03/2006

                      • Added greybox functionality (iframed content)
                      • Added titles to ThickBox for iframed, inline, and ajax content
                      • Added image gallery functions (with keyboard navigation by using  the left and right arrow keys)
                      • New (separate) CSS file specifically for ThickBox
                      • Fixed Firefox caching issue when loading a ThickBox image for the  first time
                      • Cleaned up and optimized the thickbox.js file
                      • Add the new file extension .bmp for ThickBox images
                      • Removed set height on ThickBox so two lines of caption will  stretch the window vertically

                      As of 07/06/2006

                      • Added the ability to use inline div elements to populate a  ThickBox
                      • Added the ability to use uppercase and lowercase extensions
                      • Loading animation centers on the screen regardless of vertical  scroll
                      • In IE, select boxes are now hidden when ThickBox is open
                      • Fixed a bug that occurs when no title is used on anchor elements
                      • Fixed overlay so that it covers the screen during the loading  animation (occurred in FF and Opera)
                      • Uses the new jQuery 1.0 – Alpha Release

                      Examples-

                      Description:

                      This is the simplest example of ThickBox functionality. This example  places a single image in a ThickBox (see demo tab).

                      Instructions:
                      • Create a link element (<a href>)
                      • Give the link a class attribute with a value of thickbox  (class="thickbox")
                      • Provide a path in the href attribute to an image file (.jpg  .jpeg .png .gif .bmp)
                      Click On The Image:

                      Image 2

                      <a href="images/single.jpg" title="add a caption to title attribute / or leave blank" class="thickbox"><img src="images/single_t.jpg" alt="Single Image"/></a>
                      Description:

                      This example is exactly like the single image functionality except  that it allows use of the rel attribute to group images together so they  can be navigated in a ThickBox. The ideal usage would be for images  galleries.

                      Instructions:
                      • Create a link element (<a href>)
                      • Give the link a class attribute with a value of "thickbox"  (class="thickbox")
                      • Provide a path in the href attribute to an image file (.jpg  .jpeg .png .gif .bmp)
                      • Give each link element the same rel element and value. (Example:  rel="gallery-plants")
                      Important to Remember:

                      While you have a ThickBox gallery image open, you can navigate  forward and backward through the images by using the left < key  (previous) and right > key (next) on the keyboard (Next and Previous  links are also provided in the ThickBox). The images will appear in the  gallery from first to last as they appear in the HTML document flow.

                      Click An Image:

                      Plant 1   Plant 2   Plant 3   Plant 4

                      <a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant1_t.jpg" alt="Plant 1" /></a> 
                      <a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant2_t.jpg" alt="Plant 2" /></a>
                      <a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant3_t.jpg" alt="Plant 3" /></a>
                      <a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="images/plant4_t.jpg" alt="Plant 4" /></a>
                      Description:

                      Inline content on the page, either hidden or showing, can be placed  in a ThickBox.

                      Instructions:
                      • Create a link element (<a href>)
                      • Give the link a class attribute with a value of thickbox  (class="thickbox")
                      • In the href attribute of the link add the following anchor:  #TB_inline
                      • In the href attribute after the #TB_inline add the following  query string on to the anchor:
                        ?height=300&width=300&inlineId=myOnPageContent
                      • Change the values of height, width, and inlineId in the query  accordingly (inlineID is the ID value of the element that contains the  content you would like to show in a ThickBox.
                      • Optionally you may add modal=true to the query string (e.g.  #TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true)  so that closing a ThickBox will require calling the tb_remove()  function from within the ThickBox. See the hidden modal content example,  where you must click yes or no to close the ThickBox.
                      Important to Remember:

                      If the inline content in the ThickBox contains more content than  the ThickBox dimensions will show, a vertical scroll bar will appear so  that the content can be scrolled. You can avoid having the scroll by  making sure the ThickBox has the appropriate dimensions in order to show  all of the inline content without having to scroll. In other words, if  you don't want scroll bars, increase the height and width of the  ThickBox until the content does not require scrolling.

                      the paragraph and input  below in a ThickBox, or Show hidden modal content.

                      Lorem ipsum dolor sit amet, consectetuer  adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet  dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis  nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex  ea commodo consequat.

                      <input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a caption to title attribute / or leave blank" class="thickbox" type="button" value="Show" />  
                      <a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true" class="thickbox">Show hidden modal content.</a>
                      Description:

                      Opens URL's in an iframe inside of ThickBox. Yes, this is Greybox functionality.

                      Instructions:
                      • Create a link element (<a href>)
                      • Give the link a class attribute with a value of thickbox  (class="thickbox")
                      • In the href attribute of the link provide the URL you would like  to display in a ThickBox
                      • In the href attribute, after the URL, add the following query on  to the end of the URL & any parameters you might add:
                        ?KeepThis=true&TB_iframe=true&height=400&width=600
                      • Change the values of height and width in the query accordingly
                      • Optionally you may add modal=true to the query string (e.g.  ?KeepThis=true&TB_iframe=true&height=400&width=600&modal=true)  so that closing a ThickBox will require calling the tb_remove()  function from within the ThickBox iframe (self.parent.tb_remove()). See  the iframe demo for an example, where you must click "ok" to close the  ThickBox.
                      Important to Remember:

                      Add all other query parameters before the TB_iframe parameters.  Everything after the "TB" is removed from the URL.

                      <a href="ajax.PHP?keepThis=true&TB_iframe=true&height=250&width=400" title="add a caption to title attribute / or leave blank" class="thickbox">Example 1</a
                      <a href="ajaxOverFlow.htm?keepThis=true&TB_iframe=true&height=300&width=500" title="add a caption to title attribute / or leave blank" class="thickbox">Example 2</a>
                      <a href="iframeModal.html?placeValuesBeforeTB_=savedValues&TB_iframe=true&height=200&width=300&modal=true" title="add a caption to title attribute / or leave blank" class="thickbox">Open iFrame Modal</a>
                      Description:

                      Use a hidden HTTP request (AJAX) to fetch files from the same server  and have ThickBox display the contents of the files.

                      Instructions:
                      • Create a link element (<a href>)
                      • Give the link a class attribute with a value of thickbox  (class="thickbox")
                      • Provide a path in the href to the file/directory on the server.  (href="ajaxLogin.htm")
                      • In the href attribute, after the URL path to the file, add the  following query on to the end of the URL:
                        ?height=300&width=300
                      • Change the values of height and width in the query accordingly
                      • Optionally you may add modal=true to the query string (e.g.  ?height=300&width=300&modal=true) so that closing a ThickBox  will require calling the tb_remove() function from within the ThickBox.  See the login example, where you must click cancel to close the  ThickBox.
                      Important to Remember:

                      In order to open new Ajax content in an open Ajax ThickBox, its  code must also contain the appropriate HTML (class=""thickbox) to launch  an Ajax ThickBox (see demo for example). The only catch is, the  ThickBox calls must include both the width and height of the original  ThickBox. If you leave it blank the window will resize to the default  size(630x440).

                      <a href="ajaxOverFlow.html?height=300&width=300" title="add a caption to title attribute / or leave blank" class="thickbox">Scrolling content</a
                      <a href="ajax.PHP?height=220&width=400" class="thickbox" title="add a caption to title attribute / or leave blank">No-scroll content</a
                      <a href="ajaxLogin.html?height=85&width=250&modal=true" class="thickbox" title="Please Sign In">login (modal)</a
                      <a href="ajaxTBcontent.html?height=200&width=300" class="thickbox" title="">Update ThickBox content</a>

                      Q & A-

                      Question - I am using an older version of  ThickBox. How do I upgrade?
                      Answer - I suggest stripping out  the old CSS and JS and adding back in the new code created for the  current version of ThickBox. If that is bad news, then hold tight - I  have some good news, too. The way by which ThickBox is invoked has not  changed. So, there is no need to change the HTML that invokes a  ThickBox.
                      Question - Can I display Flash in a ThickBox?
                      Answer - In short, yes! However, I  have not personally tested this yet. I have no idea of the browser  quirks and support surrounding the usage of Flash in a ThickBox.
                      Question - Can a ThickBox appear over the top of  my Flash content?
                      Answer - Yes! Have a look here for a full explanation.
                      Question - If we use this code for a client, can  we donate money to thank you for your efforts?
                      Answer - Yes, simply click on the  "Donate" button in the next section to make a PayPal donation.
                      Question - Can a ThickBox be opened from another  ThickBox?
                      Answer - Sort of, using an Ajax  ThickBox you can update the content of the ThickBox. See the Ajax Demo  Example.
                      Question - Can you view a PDF in a ThickBox?
                      Answer - The short of it is, yes!  In fact, anything that can be viewed in a browser can also be viewed in a  ThickBox using an iframe. Check out the iframe content example.

                      Edit: I can understand your frustration at paying $500 for a script that is free in dozens of locations on the web, and that it doesn't work like you want it to, but we're trying to help here. Your frustration would be better directed toward the people who took you for a ride and $500.

                       

                      Message was edited by: Mac+Win=Me

                      • 10. Re: Can you click on an open Lightbox image to close the Lightbox?
                        M.Rusk Level 1

                        By cryptic, I simply meant that your message wasn't easily understood

                        (by me), and I don't mean to sound offended or offensive.  Thank you

                        for the time you've spent trying to help me!

                         

                        After 9 days of trying to get a response out of dmxzone, they finally

                        responded with the "work-around" for their Lightbox extension.

                         

                        Again, thank you so much for your good intentions of trying to help!

                        It's good to know that there are people willing to help when someone is

                        in need.

                         

                        Quoting Mac+Win=Me <forums@adobe.com>:

                        Thickbox is a form of Lightbox.

                         

                        The link is to the download and description page which clearly points

                        out that

                        Thickbox allows viewers to close the image by clicking anywhere

                        inside or out of

                        the image when it's displayed.

                         

                        I wasn't trying to be smart-assed or cryptic.

                         

                        That's why I posted it in 20 point type. It was my intention that

                        you'd see it

                        as a link and follow it for more information.

                         

                        Since you took it wrongly, here's the info:

                         

                         

                        ThickBox is a webpage UI dialog widget written in  JavaScript on top of the

                        http://www.jquery.com/ library. Its function is to show a single

                        image, multiple

                        images, inline  content, iframed content, or content served through

                        http://en.wikipedia.org/wiki/AJAX in a hybrid

                        http://en.wikipedia.org/wiki/Modal_window.

                         

                        h2. Overviewhttp://jquery.com/demo/thickbox/#

                        >

                        h3. Features:

                        Compressed, the jQuery  library is 20k, uncompressed it's 58k.

                        • The ThickBox JavaScript code and CSS file only add an additional 

                        15k (only

                        10k by using the thickbox-compressed.js) on top of the jQuery  code. The CSS

                        file could additionally be compressed if need be.

                        • ThickBox will resize images that are bigger than the browser  window.

                        • ThickBox offers versatility (images, iframed content, inline  content, and

                        AJAX content).

                        • ThickBox will hide form elements in Windows IE 6.

                        • ThickBox will remain centered in the window even when the user 

                        scrolls the

                        page or changes the size of the browser window.  Clicking an  image, the

                        overlay, or close link will remove ThickBox.

                        • Due to the ThickBox creator's view that transitions should be  tailored by

                        individual authors, ThickBox windows do not implement fancy  transitions. 

                        Feel free to add them as you see fit. Is this a feature?  Well, some

                        might say

                        it is.

                        • ThickBox can be invoked from a link element, input element  (typically a

                        button), and the area element (image maps).

                        >

                        Download http://jquery.com/demo/thickbox/thickbox-code/thickbox.js or

                        http://jquery.com/demo/thickbox/thickbox-code/thickbox-compressed.js

                        http://jquery.com/demo/thickbox/thickbox-code/thickbox.css,  and the loading

                        graphic

                        (http://jquery.com/demo/thickbox/images/loadingAnimation.gif)  to

                        your

                        local machine (or cut and paste the code from the tabs). Along  with these

                        three files, a copy of the http://jquery.com/src/jquery-latest.js is

                        needed. For

                        this site, and ThickBox, I am using the

                        http://jquery.com/src/jquery-latest.pack.js

                        /*

                         

                        • Thickbox 3.1 - One Box To Rule Them All.

                         

                         

                        • Copyright (c) 2007 cody lindley

                         

                        • Licensed under the MIT License:

                        http://www.opensource.org/licenses/mit-license.php

                        */

                             

                        var tb_pathToImage = "images/loadingAnimation.gif";

                        /*!!!!!!!!!!!!!!!!! edit below this line at your own risk

                        !!!!!!!!!!!!!!!!!!!!!!!*/

                        //on page load call tb_init

                        $(document).ready(function(){  

                          tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply

                        thickbox

                          imgLoader = new Image();// preload image

                          imgLoader.src = tb_pathToImage;

                        });

                        //add thickbox to href & area elements that have a class of .thickbox

                        function tb_init(domChunk){

                          $(domChunk).click(function(){

                          var t = this.title || this.name || null;

                          var a = this.href || this.alt;

                          var g = this.rel || false;

                          tb_show(t,a,g);

                          this.blur();

                          return false;

                          });

                        }

                        function tb_show(caption, url, imageGroup) {//function called when the user

                        clicks on a thickbox link

                          try {

                            if (typeof document.body.style.maxHeight === "undefined") {//if IE 6

                              $("body","html").css({height: "100%", width: "100%"});

                              $("html").css("overflow","hidden");

                              if (document.getElementById("TB_HideSelect") === null)

                        {//iframe to

                        hide select elements in ie6

                                $("body").append("<iframe id='TB_HideSelect'></iframe><div

                        id='TB_overlay'></div><div id='TB_window'></div>");

                                $("#TB_overlay").click(tb_remove);

                              }

                            }else{//all others

                              if(document.getElementById("TB_overlay") === null){

                                $("body").append("<div id='TB_overlay'></div><div

                        id='TB_window'></div>");

                                $("#TB_overlay").click(tb_remove);

                              }

                            }

                           

                            if(tb_detectMacXFF()){

                              $("#TB_overlay").addClass("TB_overlayMacFFBGHack");//use

                        png overlay

                        so hide flash

                            }else{

                              $("#TB_overlay").addClass("TB_overlayBG");//use background and

                        opacity

                            }

                           

                            if(caption===null){caption="";}

                            $("body").append("<div id='TB_load'>!! /></div>");//add loader to the page

                            $('#TB_load').show();//show loader

                           

                            var baseURL;

                             if(url.indexOf("?")!==-1){ //ff there is a query string involved

                              baseURL = url.substr(0, url.indexOf("?"));

                             }else{

                                 baseURL = url;

                             }

                            

                             var urlString = /\.jpg$|\.jpeg$|\.png$|\.gif$|\.bmp$/;

                             var urlType = baseURL.toLowerCase().match(urlString);

                            if(urlType == '.jpg' || urlType == '.jpeg' || urlType == '.png' ||

                        urlType == '.gif' || urlType == '.bmp'){//code to show images

                               

                              TB_PrevCaption = "";

                              TB_PrevURL = "";

                              TB_PrevHTML = "";

                              TB_NextCaption = "";

                              TB_NextURL = "";

                              TB_NextHTML = "";

                              TB_imageCount = "";

                              TB_FoundURL = false;

                              if(imageGroup){

                                TB_TempArray = $("a[@rel="imageGroup"]").get();

                                for (TB_Counter = 0; ((TB_Counter < TB_TempArray.length) &&

                        (TB_NextHTML === "")); TB_Counter++) {

                                  var urlTypeTemp =

                        TB_TempArray[TB_Counter].href.toLowerCase().match(urlString);

                                    if (!(TB_TempArray[TB_Counter].href == url))

                        {           

                                      if (TB_FoundURL) {

                                        TB_NextCaption =

                        TB_TempArray[TB_Counter].title;

                                        TB_NextURL = TB_TempArray[TB_Counter].href;

                                        TB_NextHTML = "<span id='TB_next'>  <a

                        href='#'>Next ></a></span>";

                                      } else {

                                        TB_PrevCaption =

                        TB_TempArray[TB_Counter].title;

                                        TB_PrevURL = TB_TempArray[TB_Counter].href;

                                        TB_PrevHTML = "<span id='TB_prev'>  <a

                        href='#'>< Prev</a></span>";

                                      }

                                    } else {

                                      TB_FoundURL = true;

                                      TB_imageCount = "Image " + (TB_Counter +

                        1) +" of "+

                        (TB_TempArray.length);                     

                                    }

                                }

                              }

                              imgPreloader = new Image();

                              imgPreloader.onload = function(){   

                              imgPreloader.onload = null;

                               

                              // Resizing large images - orginal by Christian Montoya

                        edited by me.

                              var pagesize = tb_getPageSize();

                              var x = pagesize[0] - 150;

                              var y = pagesize[1] - 150;

                              var imageWidth = imgPreloader.width;

                              var imageHeight = imgPreloader.height;

                              if (imageWidth > x) {

                                imageHeight = imageHeight * (x / imageWidth);

                                imageWidth = x;

                                if (imageHeight > y) {

                                  imageWidth = imageWidth * (y / imageHeight);

                                  imageHeight = y;

                                }

                              } else if (imageHeight > y) {

                                imageWidth = imageWidth * (y / imageHeight);

                                imageHeight = y;

                                if (imageWidth > x) {

                                  imageHeight = imageHeight * (x / imageWidth);

                                  imageWidth = x;

                                }

                              }

                              // End Resizing

                             

                              TB_WIDTH = imageWidth + 30;

                              TB_HEIGHT = imageHeight + 60;

                              $("#TB_window").append("<a href='' id='TB_ImageOff'

                        title='Close'>!|id=TB_Image|width=|src=! height='"imageHeight"' alt='"caption"'/></a>" + "<div

                        id='TB_caption'>"caption"<div id='TB_secondLine'>" + TB_imageCount +

                        TB_PrevHTML + TB_NextHTML + "</div></div><div id='TB_closeWindow'><a href='#'

                        id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div>");    

                             

                              $("#TB_closeWindowButton").click(tb_remove);

                             

                              if (!(TB_PrevHTML === "")) {

                                function goPrev(){

                                 

                        if($(document).unbind("click",goPrev)){$(document).unbind("click",goPrev);}

                                  $("#TB_window").remove();

                                  $("body").append("<div id='TB_window'></div>");

                                  tb_show(TB_PrevCaption, TB_PrevURL, imageGroup);

                                  return false; 

                                }

                                $("#TB_prev").click(goPrev);

                              }

                             

                              if (!(TB_NextHTML === "")) {   

                                function goNext(){

                                  $("#TB_window").remove();

                                  $("body").append("<div id='TB_window'></div>");

                                  tb_show(TB_NextCaption, TB_NextURL,

                        imageGroup);       

                                  return false; 

                                }

                                $("#TB_next").click(goNext);

                               

                              }

                              document.onkeydown = function(e){  

                                if (e == null) { // ie

                                  keycode = event.keyCode;

                                } else { // mozilla

                                  keycode = e.which;

                                }

                                if(keycode == 27){ // close

                                  tb_remove();

                                } else if(keycode == 190){ // display previous image

                                  if(!(TB_NextHTML == "")){

                                    document.onkeydown = "";

                                    goNext();

                                  }

                                } else if(keycode == 188){ // display next image

                                  if(!(TB_PrevHTML == "")){

                                    document.onkeydown = "";

                                    goPrev();

                                  }

                                } 

                              };

                             

                              tb_position();

                              $("#TB_load").remove();

                              $("#TB_ImageOff").click(tb_remove);

                              $("#TB_window").css(); //for safari using css

                        instead of show

                              };

                             

                              imgPreloader.src = url;

                            }else{//code to show html

                             

                              var queryString = url.replace(/[\?]+\??/,'');

                              var params = tb_parseQuery( queryString );

                              TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to

                        630 if no

                        paramaters were added to URL

                              TB_HEIGHT = (params['height']*1) + 40 || 440; //defaults

                        to 440 if no

                        paramaters were added to URL

                              ajaxContentW = TB_WIDTH - 30;

                              ajaxContentH = TB_HEIGHT - 45;

                             

                              if(url.indexOf('TB_iframe') != -1){// either iframe or ajax

                        window   

                                  urlNoQuery = url.split('TB_');

                                  $("#TB_iframeContent").remove();

                                  if(params['modal'] != "true"){//iframe no modal

                                    $("#TB_window").append("<div id='TB_title'><div

                        id='TB_ajaxWindowTitle'>"caption"</div><div id='TB_closeAjaxWindow'><a

                        href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc

                        Key</div></div><iframe frameborder='0' hspace='0' src='"urlNoQuery[0]"'

                        id='TB_iframeContent'

                        name='TB_iframeContent"Math.round(Math.random()*1000)"'

                        onload='tb_showIframe()' style='width:"+(ajaxContentW +

                        29)"px;height:"(ajaxContentH + 17)+"px;' > </iframe>");

                                  }else{//iframe modal

                                  $("#TB_overlay").unbind();

                                    $("#TB_window").append("<iframe frameborder='0'

                        hspace='0' src='"urlNoQuery[0]"' id='TB_iframeContent'

                        name='TB_iframeContent"Math.round(Math.random()*1000)"'

                        onload='tb_showIframe()' style='width:"+(ajaxContentW +

                        29)"px;height:"(ajaxContentH + 17)+"px;'> </iframe>");

                                  }

                              }else{// not an iframe, ajax

                                  if($("#TB_window").css("display") != "block"){

                                    if(params['modal'] != "true"){//ajax no modal

                                    $("#TB_window").append("<div id='TB_title'><div

                        id='TB_ajaxWindowTitle'>"caption"</div><div id='TB_closeAjaxWindow'><a

                        href='#' id='TB_closeWindowButton'>close</a> or Esc Key</div></div><div

                        id='TB_ajaxContent'

                        style='width:"ajaxContentW"px;height:"ajaxContentH"px'></div>");

                                    }else{//ajax modal

                                    $("#TB_overlay").unbind();

                                    $("#TB_window").append("<div id='TB_ajaxContent'

                        class='TB_modal'

                        style='width:"ajaxContentW"px;height:"ajaxContentH"px;'></div>"); 

                                    }

                                  }else{//this means the window is already up, we are just

                        loading new content via ajax

                                    $("#TB_ajaxContent")[0].style.width =

                        ajaxContentW +"px";

                                    $("#TB_ajaxContent")[0].style.height = ajaxContentH

                        +"px";

                                    $("#TB_ajaxContent")[0].scrollTop = 0;

                                    $("#TB_ajaxWindowTitle").html(caption);

                                  }

                              }

                                 

                              $("#TB_closeWindowButton").click(tb_remove);

                             

                                if(url.indexOf('TB_inline') != -1){ 

                                  $("#TB_ajaxContent").append($('#' +

                        params['inlineId']).children());

                                  $("#TB_window").unload(function () {

                                    $('#' + params['inlineId']).append(

                        $("#TB_ajaxContent").children() ); // move elements back when you're finished

                                  });

                                  tb_position();

                                  $("#TB_load").remove();

                                  $("#TB_window").css();

                                }else if(url.indexOf('TB_iframe') != -1){

                                  tb_position();

                                  if($.browser.safari){//safari needs help because

                        it will not

                        fire iframe onload

                                    $("#TB_load").remove();

                                    $("#TB_window").css({display:"block"});

                                  }

                                }else{

                                  $("#TB_ajaxContent").load(url += "&random=" + (new

                        Date().getTime()),function(){//to do a post change this load method

                                    tb_position();

                                    $("#TB_load").remove();

                                    tb_init("#TB_ajaxContent a.thickbox");

                                    $("#TB_window").css({display:"block"});

                                  });

                                }

                             

                            }

                            if(!params['modal']){

                              document.onkeyup = function(e){  

                                if (e == null) { // ie

                                  keycode = event.keyCode;

                                } else { // mozilla

                                  keycode = e.which;

                                }

                                if(keycode == 27){ // close

                                  tb_remove();

                                } 

                              };

                            }

                           

                          } catch(e) {

                            //nothing here

                          }

                        }

                        //helper functions below

                        function tb_showIframe(){

                          $("#TB_load").remove();

                          $("#TB_window").css({display:"block"});

                        }

                        function tb_remove() {

                           $("#TB_imageOff").unbind("click");

                          $("#TB_closeWindowButton").unbind("click");

                         

                        $("#TB_window").fadeOut("fast",function(){$('#TB_window,#TB_overlay,#TB_HideSelect').trigg er("unload").unbind().remove();});

                          $("#TB_load").remove();

                          if (typeof document.body.style.maxHeight == "undefined") {//if IE 6

                            $("body","html").css({height: "auto", width: "auto"});

                            $("html").css("overflow","");

                          }

                          document.onkeydown = "";

                          document.onkeyup = "";

                          return false;

                        }

                        function tb_position() {

                        $("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px',

                        width: TB_WIDTH + 'px'});

                          if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { //

                        take away IE6

                            $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) +

                        'px'});

                          }

                        }

                        function tb_parseQuery ( query ) {

                           var Params = {};

                           if ( ! query ) {return Params;}// return empty object

                           var Pairs = query.split(/[;&]/);

                           for ( var i = 0; i < Pairs.length; i++ ) {

                              var KeyVal = Pairs[i].split('=');

                              if ( ! KeyVal || KeyVal.length != 2 ) {continue;}

                              var key = unescape( KeyVal[0] );

                              var val = unescape( KeyVal[1] );

                              val = val.replace(/\+/g, ' ');

                              Params[key] = val;

                           }

                           return Params;

                        }

                        function tb_getPageSize(){

                          var de = document.documentElement;

                          var w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) ||

                        document.body.clientWidth;

                          var h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) ||

                        document.body.clientHeight;

                          arrayPageSize = ;

                          return arrayPageSize;

                        }

                        function tb_detectMacXFF() {

                          var userAgent = navigator.userAgent.toLowerCase();

                          if (userAgent.indexOf('mac') != -1 && userAgent.indexOf('firefox')!=-1) {

                            return true;

                          }

                        }

                        >

                        >

                        /*

                         

                        • 11. Re: Can you click on an open Lightbox image to close the Lightbox?
                          John Waller Adobe Community Professional & MVP


                          Looking at their forum, every question seems to get a useful reply after a couple of days and I've had the occasional question answered there in the past.

                           

                          Did you post your question in their Lightbox forum (can't see it there) or was it via email?

                          • 12. Re: Can you click on an open Lightbox image to close the Lightbox?
                            M.Rusk Level 1

                            I corresponded with them via e-mail and online chat.  I don't think 9

                            days is a reasonable amount of time to address my problem.  Especially

                            once I saw their "work-around" was 3 short sentences.

                             

                            Now I'm trying to have them address the problems of their Sliding

                            Billboard extension causing Dreamweaver to lock-up when I try to open a

                            file I created with their extension.  Also, whenever I have to

                            re-enable their extensions, I have to put my main production computer

                            on-line (this really makes me nervous!).  I wish I had never heard of

                            this company, let alone purchased anything from them! (And I'm of Dutch

                            ancestry (they are located in Holland) not that it really matters).

                             

                            Thanks for letting me vent a little.

                             

                            Quoting John Waller <forums@adobe.com>:

                            function(){return A.apply(null,[this].concat($A(arguments)))}

                            >

                            You evidently don't realize that they don't respond AT ALL.  They are a

                            fairly useless bunch.  They got my $500 and now they have left me high

                            and dry!!!

                             

                            Thanks for the suggestion, but that avenue has already lasted over 9

                            days with absolutely no response and is quite futile.

                             

                            >

                            Looking at their forum, every question seems to get a useful reply after a

                            couple of days and I've had the occasional question answered there in

                            the past.

                             

                            Did you post your question in their Lightbox forum (can't see it

                            there) or was

                            it via email?

                            >