Layout templates have been implemented in Simple Lightbox.  One of best things about templates is that they are portable.  Templates can be created as easily as any WordPress plugin and shared just like one as well.  This means that SLB will be able to seamlessly integrate into any website.

This is what the template for the default lightbox layout looks like:

<div id="slb_container">
 <div id="imageContainer">
  {slbContent}
  <div id="nav_hover">
   {navPrev}
   {navNext}
  </div>
  <div id="loading">
   {slbLoading}
  </div>
 </div>
</div>
<div id="slb_details">
 <div id="imageData">
  <div id="imageDetails">
   {dataCaption}
   {dataNumber}
   <span id="nav">
    {navPrev}
    {navNext}
    {navStop}
   </span>
  </div>
  <div id="close">
   {slbClose}
  </div>
 </div>
</div>

As you can see, templates are basically standard HTML with a few special keywords peppered in.

Elements

For the most part, you can use any HTML you desire.  However, SLB needs to know what parts of the layout are used for what.  Therefore, elements can be given special IDs to identify them as for a particular use.  All of these special elements have an id attribute prefixed with slb_

Additional special elements may be added in the future, but currently the special elements are:

• slb_container: Defines the element that contains the image
• slb_details: Defines the element that contains the details of the current image (caption, etc.)

The truth is, I would like to remove as many requirements as possible, so this list may get even smaller in the future.  I’m considering using a configuration file for templates to identify how the different parts should work.  For one, this would allow template designers to define the types of animations and effects that the different elements will exhibit.

Template Tags

As you can see in the code example above, there are several instances of words surrounded by curly braces ({ & }).  These are template tags that allow required elements to be easily added to a custom layout.  These tags will be expanded to their full HTML markup when the template is loaded by SLB.

The tags are named based on their usage/purpose:

General

• slbContent– Area for lightbox content (e.g. the image to be displayed in the lightbox)

  <img id="slb_content" />

• slbLoading– Loading text (usually replaced with an animated loading image via CSS)

  <span id="slb_loading">loading</span>

• slbClose– Close button

  <a class="slb_close" href="#">close</a>

Navigation

• navPrev– Previous image button

  <a class="slb_navPrev slb_nav" href="#">&laquo; prev</a>

• navNext– Next image button

  <a class="slb_navNext slb_nav" href="#">&raquo; next</a>

• navStop– Stop slideshow button

  <a class="slb_navStop" href="#">Stop</a>

Data

• dataCaption– Image caption

  <span class="slb_dataCaption"></span>

• dataNumber– Image number

  <span class="slb_dataNumber"></span>

Many template tags are identified by their class attribute, which means that several instances of a single tag can added throughout the template (i.e. navigation links on top and on the bottom of the lightbox).  Some tags are identified by their id attribute because it only makes sense to have one of these tags in a layout (e.g. the lightbox image). Once finalized, the expanded attributes (tag, class, id, etc.) can be customized by template designers via CSS.

Template tags make it quick and easy to build a new template by simply changing the HTML and CSS that surround the tags.  The necessary HTML will be automatically generated by SLB at runtime.

Next

Once the template implementation has been finalized, I will be moving on to:

• Add hooks allow other plugins to register layout templates
• Implement configuration files for more flexible templates (under consideration)