Joe Song

Lightbox2 allows you to load in same-domain content without an iframe using rel=”lightmodal”. What it doesn’t allow you do is use that same mechanism for content already in the page.

I’m working on a project that loads (and hides) content meant for lightbox in the markup of the main page. We are doing this in order to have quick reactions to the users’ clicks and optimize the content for SEO. With the existing mechanism, Lightbox2 will reload the page content if the trigger points to an in-page anchor.  For instance,

<a href="#anchors-aweigh">Load existing content</a>

will cause Lightbox2 to reload the current page even thought the content is already available in-page. This kills the quick reaction time and adds ticks on the tracking calls and increases server load.

Taking a note from Erik Hedin on how to focus Lightbox on an anchor after (re)loading the page, I rewrote the the modalContainer’s load instructions to check against the current url and see if the target content is already existing on the page. So, the line

$("#modalContainer").load(src);

in lightbox.js becomes

/* HERE'S THE RUB */

/*
	if already in the page, load in the content
	test by comparing src and window.location without hashes (anchors)
	and then finding the src's hash in the DOM

	if either are false, fall back and load the old way
*/
var srcHash = src.replace(/.*(#.*)/, '$1');
if ((window.location.toString().replace(/#.*/, '') == src.replace(/#.*/, '') ||
			// src.replace(/#.*/, '') will be blank for some IE versions if the href is just a hash
			src.replace(/#.*/, '') == '') &&
			srcHash && $(srcHash)) {

	// clone the referenced node and alter the clone's ID, then insert it into lightbox
	$("#modalContainer").html($(srcHash).clone().attr('id', srcHash.replace('#', '') + '-clone'));

} else {

	$("#modalContainer").load(src);

}

/* THE RUB STOPS HERE */

But but but but but but, we’re not done.

In Erik’s post he advises changing the lightbox.js script in the Drupal module. I don’t like changing other people’s code; I’d rather overwrite it for my application. Instead of digging inside the module, I have included another script that overwrites the offending Lightbox.showData method. This way, if the modules is updated by its devs, I don’t have to go digging again. Plus, our Drupal project is instanced over several machines and a dev and a staging and a production site, so changing the module is hard to maintain.

So, in the end, my application-specific script looks like,

Lightbox.showData = function(){
    $('#loading').hide();

    if (Lightbox.isLightframe || Lightbox.isVideo || Lightbox.isModal) {
        Lightbox.updateDetails();
        if (Lightbox.isLightframe) {
            $('#frameContainer').show();
            if ($.browser.safari) {
                $('#lightboxFrame').css({
                    'zIndex': '10500'
                }).show();
            } else {
                $('#lightboxFrame').css({
                    'zIndex': '10500'
                }).fadeIn(Lightbox.fadeInSpeed);
            }
        } else {
            if (Lightbox.isVideo) {
                $("#modalContainer").html(Lightbox.modalHTML);
                $("#modalContainer").click(function(){
                    return false;
                });
            } else {
                var src = unescape(Lightbox.imageArray[Lightbox.activeImage][0]);
                if (Lightbox.imageArray[Lightbox.activeImage][4]) {
                    $(src).appendTo("#modalContainer");
                } else {

					/* HERE'S THE RUB */

					/*
						if already in the page, load in the content
						test by comparing src and window.location without hashes (anchors)
						and then finding the src's hash in the DOM

						if either are false, fall back and load the old way
					*/
					var srcHash = src.replace(/.*(#.*)/, '$1');
					if ((window.location.toString().replace(/#.*/, '') == src.replace(/#.*/, '') ||
								// src.replace(/#.*/, '') will be blank for some IE versions if the href is just a hash
								src.replace(/#.*/, '') == '') &&
							srcHash && $(srcHash)) {

						// clone the referenced node and alter the clone's ID, then insert it into lightbox
						$("#modalContainer").html($(srcHash).clone().attr('id', srcHash.replace('#', '') + '-clone'));

					} else {

						$("#modalContainer").load(src);

					}

					/* THE RUB STOPS HERE */
                }
                $('#modalContainer').unbind('click');
            }
            $('#modalContainer').css({
                'zIndex': '10500'
            }).show();
        }
    }    // Handle display of image content.
    else {
        $('#imageContainer').show();
        if ($.browser.safari) {
            $('#lightboxImage').css({
                'zIndex': '10500'
            }).show();
        } else {
            $('#lightboxImage').css({
                'zIndex': '10500'
            }).fadeIn(Lightbox.fadeInSpeed);
        }
        Lightbox.updateDetails();
        this.preloadNeighborImages();
    }
    Lightbox.inprogress = false;

    // Slideshow specific stuff.
    if (Lightbox.isSlideshow) {
        if (!Lightbox.loopSlides && Lightbox.activeImage == (Lightbox.total - 1)) {
            if (Lightbox.autoExit) {
                Lightbox.slideIdArray[Lightbox.slideIdCount++] = setTimeout(function(){
                    Lightbox.end('slideshow');
                }, Lightbox.slideInterval);
            }
        } else {
            if (!Lightbox.isPaused && Lightbox.total > 1) {
                Lightbox.slideIdArray[Lightbox.slideIdCount++] = setTimeout(function(){
                    Lightbox.changeData(Lightbox.activeImage + 1);
                }, Lightbox.slideInterval);
            }
        }
        if (Lightbox.showPlayPause && Lightbox.total > 1 && !Lightbox.isPaused) {
            $('#lightshowPause').show();
            $('#lightshowPlay').hide();
        } else
            if (Lightbox.showPlayPause && Lightbox.total > 1) {
                $('#lightshowPause').hide();
                $('#lightshowPlay').show();
            }
    }

    // Adjust the page overlay size.
    var arrayPageSize = Lightbox.getPageSize();
    var arrayPageScroll = Lightbox.getPageScroll();
    var pageHeight = arrayPageSize[1];
    if (Lightbox.isZoomedIn && arrayPageSize[1] > arrayPageSize[3]) {
        var lightboxTop = (Lightbox.topPosition == '' ? (arrayPageSize[3] / 10) : Lightbox.topPosition) * 1;
        pageHeight = pageHeight + arrayPageScroll[1] + lightboxTop;
    }
    $('#overlay').css({
        'height': pageHeight + 'px',
        'width': arrayPageSize[0] + 'px'
    });

    // Gecko browsers (e.g. Firefox, SeaMonkey, etc) don't handle pdfs as
    // expected.
    if ($.browser.mozilla) {
        if (Lightbox.imageArray[Lightbox.activeImage][0].indexOf(".pdf") != -1) {
            setTimeout(function(){
                document.getElementById("lightboxFrame").src = Lightbox.imageArray[Lightbox.activeImage][0];
            }, 1000);
        }
    }
};