Thursday, June 15, 2017
Lightbox IX
Blog Entry #376
(Ophidiophobes may want to steer clear of this one.)
In today's post we will resurrect the missing demo of HTML Goodies' "Web Developer Class: How to Use the JavaScript Lightbox Image Viewer" tutorial.
The lightbox image viewer tutorial went live in May 2010. At that time, author Scott Clark was part of a reptile rescue collective called Reptile Clan Rescue of Florida. Scott demonstrated the lightbox effect with some photos of snakes that he and his confrères had rescued; the demo was located at http://www.reptileclan.com/lightbox/example.html and displayed at the HTML Goodies site via an iframe.
Evidently, Reptile Clan Rescue disbanded in early 2012, and its www.reptileclan.com Web site went with it. The HTML Goodies lightbox demo iframe now sports an ad selling the ReptileClan.com domain for $2095. It feels like déjà vu all over again when I look at that ad: naturally, I think of the home.earthlink.net/~reptile7jr/ demos I lost upon cutting ties with EarthLink.
We discussed the lightbox image viewer in Blog Entries #236, #237, #238, #239, #240, #241, #242, and #243. In studying the tutorial demo in preparation for those entries, I downloaded the demo images as a matter of course and am therefore in a position to restage the demo, so let's do that now, shall we? Click on a thumbnail photo or on the Me and a Huge Snake link below:
New demo notes
• All of the demo's code is in the source of the current page. All styles are set either via inline style attributes or JavaScriptically rather than in an external lightbox.css file. The demo JavaScript has been placed in a
<script> that immediately follows the <div> frame (vide infra) rather than in an external lightbox.js file.• Scott laid out his demo via a
<table> and pushed the lightbox links apart with non-breaking spaces ( s). I've replaced the table and the iframe viewport with a div and separated the links via position:relative;left:20px; stylings.• Per the showLightbox( ) registration section of Blog Entry #237, I've changed the lightbox links'
rel="lightbox" identifier to a class="lightboxLink" identifier.• Per the HTML interface section of Blog Entry #236, the initial display does not make use of the original baby_full_belly_thumb.jpg and punk_the_burmese_thumb.jpg thumbnails but instead scales down the full-size baby_full_belly.jpg and punk_the_burmese.jpg photos.
• Contra the z-index follies section of Blog Entry #238, the overlay and lightbox divs are given a
style.zIndex = "1" (thereby shifting them to layer 7 of the root stacking context) so that they are painted over relatively positioned elements that come up later in the source (and are in layer 6 of the root stacking context).• The central Punk python photo had a Baby the Albino Burmese Python caption that should have been attached to the left-hand Baby python photo; I've shifted the Baby... caption to Baby and given Punk his own caption.
We'll check over the Java Goodies Digital Clock (12/27/97) script in the following entry.
- posted by A. Peak @ 3:58 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)