reptile7's JavaScript blog
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 and displayed at the HTML Goodies site via an iframe.

Evidently, Reptile Clan Rescue disbanded in early 2012, and its Web site went with it. The HTML Goodies lightbox demo iframe now sports an ad selling the domain for $2095. It feels like déjà vu all over again when I look at that ad: naturally, I think of the 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:

Snake #1Snake #2Me and a Huge Snake

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 (&nbsp;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.

Monday, June 05, 2017
Misplaced Scripts and Links
Blog Entry #375

So, each and every one of my <iframe>-framed demos is back on track: the 'Mischief the talking cat' image map demo of Blog Entry #124, the falling hearts of snow demo of Blog Entry #270, the shopping cart demo of Blog Entry #302, they're all there. Also, I have now embedded in their respective posts the pre-Blog Entry #59 off-site demos that I formerly linked to but did not display, e.g., the image properties demo of Blog Entry #15. Rendering-wise, my retooled demos give you just what the original ones gave you in the overwhelming majority of cases, the odd difference notwithstanding.

One thing you generally won't get with my new demos is a "Check the page source for the full coding"-type sentence, and there's a reason for that: I cannot in good faith recommend my retooled demo code in that it necessarily commingles structure, presentation, and behavior, which are best kept separate from one another; be that as it may, there's nothing stopping you from extracting that code and putting it under the microscope yourself, and you are in fact welcome to do just that.

Hmmm, let me see, what else did I restore? Oh yeah...

Iframe scripts

For about 30 posts I had placed the 'script du jour' in an iframe.

<iframe width="85%" height="250" src="" frameborder="1" scrolling="yes">If your browser does not support iframes, you may access the script by following the preceding link to the jumpfocuscode.html page.</iframe>

• This mode of display was used with longer scripts, for which the iframe scrolling value was either left at its auto default or set to yes.
• The script code was wrapped in a <pre> element so as to preserve its newlines, empty line boxes, and indentation.
• The iframe width was sometimes set to ≤ 85% to prevent the iframe from bumping into the "About Me" (id="main") div in the upper-right part of the page.

These scripts similarly went up in smoke upon cutting ties with EarthLink; fortunately, exchanging their iframe frames for analogous divs

<div style="width:73%;height:250px;border:inset 1px;overflow:auto;padding:0px 8px;"> ... </div>

went smoothly.

• The overflow:auto; declaration equips the div with scrollbars if they are needed.
• The div's padding-top and padding-bottom are kept at 0px (their initial value) and its padding-left is set to 8px as the pre element has an intrinsic vspace but doesn't have any hspace.

My approach to presenting code is reasonably settled at this point. I began marking it up with the <code> element and coloring it teal in the wake of going from a Classic Mac to an Intel Mac in late 2008; a little over a year later I began indenting block statements (the bodies of functions, if...else conditionals, etc.) by a tab although I now prefer a 'half-tab' (four monospace spaces) for this purpose. I don't display an entire script in one go anymore unless it's a short one.

Dead links

It wasn't my intention to repair the dead links in my posts at the outset of all of this. Encountering dead links is part and parcel of being a Web surfer, after all; moreover, if you've got what it takes to slog through my posts, then you should be up to the task of tracking down alternative citations as needs be. However, about halfway through my efforts a set of triggers spurred me to start repairing them:
(a) I felt a need to have a live link to the Netscape example that underpins the animation demo of Blog Entry #147.
(b) Upon reaching those posts dealing with HTML Goodies' "Opening New Windows With JavaScript" tutorials I discovered that the tutorials' portal page is gone.
(c) I relatedly discovered that the current HTML Goodies Beyond HTML : JavaScript sector bears no resemblance to the Beyond HTML : JavaScript sector I had been working through.
(d) Lastly, I was getting sick and tired of running into Forbidden links to sections in the JavaScript 1.3 Client-Side Guide and Reference.

So from circa Blog Entry #160 onward, most or all of my links will now take you to where you are supposed to go. Also, the links in Blog Entries #12-32 (excepting my entry on Hurricane Katrina) are now all live - I cleaned them up in the course of restoring my pre-Blog Entry #59 demos. Some of my new links point to current resources although many of them point to archived copies of their original targets. There are still plenty of dead links in my other older entries and I may go after them at a future point.
We are finally ready to pick up from where we left off last year and get back to the Java Goodies Calendars, Clocks, and Calculators sector for at least a little while longer. Before doing that, however, we will in the next entry take care of some unfinished business by restaging the demo that used to be in HTML Goodies' "How To Use the JavaScript Lightbox Image Viewer" tutorial.

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)