Javascript-based galleries

It’s easy to use soo_image in conjunction with javacript-based galleries, whether pre-made or custom built.

Example 1: Shadowbox

Lightbox and its many brethren are ubiquitous these days. I rather like Shadowbox, which can handle a wide variety of content types and automatically adapts to most of the major javascript libraries. For a Shadowbox gallery, I’ll make a new image list form called soo_image_shadowbox:

<txp:soo_image link_rel="shadowbox" />

Naturally, the link_rel attribute gets passed along as a rel attribute to the a tag: this is what triggers Shadowbox. (And as with the other link-related attributes, it automatically sets the thumbnail and link attributes as well, so that output is a linked thumbnail.) I’ve assigned some article images — 25,30,44,45 — so for my gallery the only markup I need is:

<txp:soo_image_select listform="soo_image_shadowbox" />

Note: soo_image has one Shadowbox-specific behavior. If a soo_image tag has link_rel="shadowbox" and is part of a set selected by soo_image_select, the id of the first image in the set is added to the a tag’s rel value, e.g., rel="shadowbox[25]", to tell Shadowbox that this is part of a gallery. This allows multiple Shadowbox slideshow presentations per page. Some other scripts also have this feature, but the original Lightbox doesn’t, so for now I’ve only added this to Shadowbox.

Example 1a: Slimbox 2

Lightbox, Lightbox 2, Slimbox, Slimbox 2, and who knows how many other such scripts are all triggered in the same way as Shadowbox, by using the rel attribute in an a tag linking to the full-size image. So using soo_image in conjunction with any of these is essentially the same as the procedure shown above for Shadowbox. John Stephens has an example of soo_image working with Slimbox 2.

Example 2: Galleria

But enough with the modal overlays already — time to think outside the -box. It’s also easy to use soo_image to feed images to the Galleria jQuery plugin. (Fine-tuning Galleria is the harder part.) Galleria just needs your images in a container identified by class. Here’s the soo_image_galleria image list form:

<txp:soo_image link="1" />

Setting the link attribute tells soo_image to output a thumbnail linked to the full-size image. Actually, Galleria can produce thumbnails automatically, so the above would also work without attributes (i.e., just the full-size images). But I prefer my own hand-made thumbnails (as recommended by Galleria). Anyway, here’s the markup:

<txp:soo_image_select listform="soo_image_galleria" wraptag="section" class="gallery" />

Example 3: roll your own

The soo_image tag takes an onclick attribute. As with the link attribute, setting onclick tells soo_image to output a linked thumbnail, then the onclick attribute is passed along to the a tag. This is a handy hook for a custom javascript-based gallery.

Again, the default image list form for this site is:

<txp:soo_image onclick="return sooGallery(this)" />

sooGallery() is a very simple bit of javascript. Combined with the following markup (plus a couple of div elements as CSS hooks):

function sooGallery(showThis) {
   if (document.getElementById) {
      document.getElementById('sooGalleryMain').src = showThis.href;
      document.getElementById('sooGalleryMain').title = showThis.title;
      document.getElementById('sooGalleryCaption').childNodes[0].nodeValue = showThis.title;
      return false;
   }
   return true;
}

<txp:soo_image_select />
<txp:soo_image html_id="sooGalleryMain" />
<p id="sooGalleryCaption"><txp:soo_image_caption /></p>

it gives this result:

South Rim sunrise

No trendy effects or image pre-loading, but gets the basic job done with just a few lines of javascript.

Note that when you first load the page, the full-size image and caption come from the first image selected by soo_image_select, in this case the first article image. Since the corresponding tags are directly in the article body instead of in an image form, they take the first image in the current image context.

Summary

The point isn’t that you should use this or that gallery, it’s that soo_image is very easy to adapt to whatever javascript-based gallery you prefer.

Posted 2009-04-29 (last modified 2017-02-18)