In considering our recommendation, we want to consider three aspects of visual form validation:

• Location of error messages – where are current “best practice” sites presenting validation messages and what was the right approach for our client?
• Form field highlighting – should the visual appearance of form fields be changed during validation and, if so, what techniques are best suited for our client’s users?
• Other indicators – are there other techniques that should be considered as part of form validation messaging? Do these enhance or detract from the overall user experience?

In addition to our own experience, we looked at a variety of third-party websites that rely on form data as part of their essential design and fucntion. After sorting through the variety of approaches, we made a recommendation that creates a clean and clear user experience and can be implemented across any of our client’s web properties.

Location of Error Message

Messaging at the top of a form/page is effective for getting the user’s attention, but creates a visual gap between the error message and the actual problem field, forcing the user to visually bridge the gap by scanning up and down between content elements.

Hover messages mitigate the scanning issue, but are only visible for a default or selected field, forcing the user to manually select another field to see the error. In addition, the hover element can create visual clutter on the page, depending on the layout and complexity of the form.

Inline error messages communicate the problem(s) for all fields without requiring the user to move their attention around the page or click on different elements. Ideally inline error messages should be used with some form of field highlighting (see next page).

Form Field Highlighting

Changing the field label color is a simple change, but may not always be the best choice depending on the overall visual design. Care must be taken to ensure that the highlighted label stands out to the user and does not blend into existing brand elements on the page. More importantly, the user is being asked to take action on the field content, not the label, and they must shift their focus from the highlighted label to the field to determine what to change.

Highlighting the field background color can be an effective visual cue that does not require any layout adjustments to the existing form. However, as with field lables, care must be taken ensure that the highlighted field stands out to the user and does not blend into existing brand elements on the page. Moreover, there are readability concerns with background shading, especially if too dark a color is chosen.

Outlining the field border is a more subtle adjustment that can be used in combination with another visual cue, e.g. inline error messages or changing the field label color.

Other Indicators

Adding an icon marker to the field label or next to the form field can be a nice visual cue, especially if field highlighting is not used. However, care must be taken to not cause the form layout to “break” if labels are physically moved to add a marker. One solution to this is to place the icon within the form field itself.

An effective technique on longer (taller) form pages is to include an alert message at the top of the form that indicates there is a problem, but does not contain the error message details. The general message may or may not indicate which fields have an error.

Using a pop-up message window as the sole method of communicating error messaging is not recommended since the user loses visual reference when the pop-up is closed. If this style of alert is used, the form field must also be updated to include error messaging using one of the above mentioned techniques.

Recommendation

Our final recommendation includes the following techniques:

• Inline error message below form field
• Top-of-form alert message
• Form field border highlighting

Location of Error Messages

Our preference is for inline error messages that fall below the form field. We believe that inline messaging is the cleanest and clearest way to communicate error messages in the closest proximity to the invalid form field.

Form Field Highlighting

Our preference is for field border outlining, used in combination with inline error messaging. Border highlighting is a clear visual cue, while remaining readable and keeping the user’s attention on the invalid form field.

Other Indicators

Our preference is to use a top-of-form alert message that clearly indicates a problem and points the user to specific fields for more information. Placing a general message at the top of the page provides context for the user and allows for a top-down presentation of the error messaging.

As such, mega menus provide an intriguing alternative of presenting secondary, tertiary or even deeper content to a user without forcing them to negotiate your site hierarchy through standard navigation design techniques.

Based on the code and script file found at javascriptkit.com, my initial look at this functionality was a sledgehammer “cut-and-replace” approach that required manually rebuilding a site’s navigation menu. The approach worked, but lost the ability to use WordPress’ built-in navigation features for page titling, ordering, etc., as well as Thematic’s jQuery styling. I’ve since had a chance to dig into this topic again and believe I’ve found a way to mitigate most of these limitations and make this technique a very useful addition to a WordPress toolkit.

Important: I use the Thematic framework and child themes as the base for most all of my WordPress development. The code examples below may need to be modified to work with other themes and/or frameworks.

Step 1: Save the referenced CSS and Javascript files from javascriptkit.com into your child theme folder.

Step 2: For the actual content of the mega menu panel, create a new PHP file in your child theme folder (I called it megamenus.php) and enter just the code related to the actual menu panels. (Unlike the original code instructions on javascriptkit.com, we are not including the primary nav links in this file.) Make sure that the CSS selectors used below match those found in the default CSS file you saved in Step 1.

<div id="megamenu1" class="megamenu">
  <div class="column">
    Your content goes here...
  </div>
  <div class="column">
    Your content goes here...
  </div>
</div><!-- megamenu1 -->

Step 3: Instead of manually assembling the site’s primary menu links as outlined in the original tutorials (and my previous post), we’re going to use a jQuery snippet to assign unique ID selectors to WordPress’ existing page links. The following code needs to be added to the <head> section of your page. I prefer to add it via my child theme’s functions file:

// Add megamenu scripts to head
function megamenu_scripts() {?>

<link rel="stylesheet" type="text/css" href="jkmegamenu.css" />

<script type="text/javascript">
 jQuery(document).ready(function() {
 jQuery('.page-item-123 a').attr("id","megaanchor");
 });
</script>

<script type="text/javascript" src="jkmegamenu.js">
/***********************************************
* jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
</script>

<script type="text/javascript">
//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")
</script>

<?php }
add_action('wp_head','megamenu_scripts');

It is critical that the code snippet assigning the "megaanchor" ID attribute to the default anchor tag for the target page (’123′) comes before the "jkmegamenu.js" file is loaded. The .js file reads these IDs, so they have to be added to the anchor tags before the .js file is loaded. Replace “123″ with the actual page ID of the menu item that you want to attach the megamenu panel to. And of course, make sure that the links to the CSS and JS file are correct for your theme. Note that because WordPress is already loading a jQuery library, I’ve deleted that script declaration from the original code sample to avoid duplication.

Step 4: We also have to load the separate PHP file that we created in Step 2. Add the following action to your functions file to load the content panel code into the header area:

function load_megamenus() {
include 'megamenus.php';
}
add_action('thematic_header', 'load_megamenus');

Step 5: Finally, edit the default CSS file to suit your tastes.

Step 6: To use more than one mega menu on a navigation bar, you’ll need to define the different content sections in your separate PHP file with unique IDs, e.g. megamenu1, megamenu2, etc., then make additional declarations in the wp_head section:

// Add megamenu scripts to head
function megamenu_scripts() {?>

<link rel="stylesheet" type="text/css" href="jkmegamenu.css" />

<script type="text/javascript">
 jQuery(document).ready(function() {
 jQuery('.page-item-123 a').attr("id","megaanchor1");
 jQuery('.page-item-456 a').attr("id","megaanchor2");
 });
</script>

<script type="text/javascript" src="jkmegamenu.js">
/***********************************************
* jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/
</script>

<script type="text/javascript">
//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor1", "megamenu1", "mouseover")
jkmegamenu.definemenu("megaanchor2", "megamenu2", "click")
</script>

<?php }
add_action('wp_head','megamenu_scripts');

Note that you’ll probably want to create some content on the pages you’ve attached mega menus to for users who have JavaScript turned off or otherwise disabled since the page’s anchor link will still be active.

* * * * *

HT: The jQuery method of adding the ID selector to an anchor tag was modified from a technique outlined in this post on wpcandy.com.

I wanted to automate this template as much as possible, avoiding the need to manage even more content than what already existed on the child pages. Because much of this particular project is a visual showcase, associating images with the links was a requirement. In the past, this would have meant defining an image URL in a custom field and then displaying it. Fortunately WP 2.9′s new thumbnail feature provides a very accessible alternative.

Important: I use the Thematic framework as the base for most all of my WordPress development. The code examples below may need to be modified to work with WP’s default themes or other frameworks.

First, enable post/page thumbnails in your functions file:

// Add WP2.9 thumbnail support
if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

Then, define a thumbnail image for each child page.

Using page.php as a starting point, create a new PHP page template file in your theme’s directory. The heart of the new template is the following code, which comes after the main loop:

<div id="section-container">
<?php
$pages = get_pages('child_of='.$post->ID.'&parent='.$post->ID.'&sort_column
=menu_order&sort_order=asc');
foreach($pages as $page)
{ ?>
<div class="section-page">
  <div class="section-thumb"><a href="<?php echo get_page_link($page->ID) ?>">
    <?php echo get_the_post_thumbnail($page->ID, array(150,100)); ?></a>
  </div>
  <div class="section-text">
    <div class="section-title"><?php echo $page->post_title ?></div>
    <div class="section-desc"><?php echo get_post_meta($page->ID,
      'section-desc', true); ?></div>
  </div><!--section-text-->
</div><!--section-page-->
<?php }
?>
</div><!--section-container-->

You could of course replace the main loop with something like this, but keeping it allows you to use the page title and content for introductory material or anything else you want above the thumbnails.

The get_pages query identifies the first-level child pages of the current page and sorts them by menu order, then starts looping through each identified page.

I’ve wrapped each of the actual content pieces in individual div’s to help control the layout. I know that some don’t like this practice, but I find it helpful to start verbose and strip out what I don’t need later.

Within “section-thumb”, I define my link to the child page as well as show the post thumbnail. I had been playing with different image sizes on the index page, so including the array statement is useful, even though I ended up using my default thumbnail size. If you wanted, the permalink could be placed almost anywhere in this template, including as a block element around the entire thumbnail and text.

Within “section-title”, I’m simply calling the page title. I actually want to fuss with this a little bit because I often use verbose page titles that aren’t useful navigation labels. I use the Page Lists Plus plugin to set different nav labels, but those aren’t getting called here.

The “section-desc” is calling a custom field set on the child pages. I really wanted to avoid using custom fields, but I haven’t been able to get my page excerpts to display. I’m using a function that adds the excerpt entry box to the Edit Page screen:

// add excerpts to pages (not just posts)
function add_page_excerpt_meta_box() {
add_meta_box( 'postexcerpt', __('Excerpt'), 'post_excerpt_meta_box', 'page',
'normal', 'core' );
}
add_action( 'admin_menu', 'add_page_excerpt_meta_box' );

But it doesn’t work when trying to display the defined text when using get_the_excerpt. So I’ve put my “excerpt” text in a custom field and set the section page template to read and display it. It may be that using a legitimate plugin to add excerpt functionality to pages may give me an actual function to use and display the text automatically.

So that’s it in a nutshell. You can see examples of this implementation by clicking the URL link above and selecting one of the main content areas from the primary nav, or simply go to the portfolio section of this website.

Feature Site includes a random content area on the home page, accomplished by defining a set of content files that are pulled into the feature area via a randomized PHP include statement. The relevant original code is found in Feature Site’s functions file, under the function childtheme_pageleader():

<?php } elseif (is_page_template('front-page.php') ) {
/*
Highlight your most important projects with a series of files (2 to start with)
named feature-front-x.php. Where x is a number. Then, these files are randomly
included on the front page. It’s pretty simple stuff.

The important bit is the mt_rand(1,2). Right now it’s randomly including 1 of 2
files. If you had 15 files you’d need to have mt_rand(1,15) in there.
*/
$rand = mt_rand(1, 2);
include "includes/feature-front-$rand.php";
} elseif (is_home()) { ?>

The include files require manually editing both the content and an associated image. While that’s easy enough to do, I wanted to automate this part of the site to display some portfolio highlights of my recent work. Essentially I wanted to display a post excerpt from my “portfolio” category along with a large-size view of the defined post thumbnail (introduced in WP2.9) and links to the project notes, client URL and overall portfolio. As such, I replaced the code above with this:

<?php } elseif (is_page_template('front-page.php') ) { ?>

<div id="feature">

<?php query_posts('showposts=1&cat=3&orderby=rand'); while(have_posts()) :
the_post(); ?>

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to
<?php the_title_attribute(); ?>"><?php the_post_thumbnail(array(464,464)); ?></a>

<div id="feature-info">
<h3><?php the_title(); ?></h3>
<?php the_excerpt(); ?>

<div id="buttons">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to
<?php the_title_attribute(); ?>">View details »</a>
<a href="<?php echo get_post_meta($post->ID, 'client-url', true);?>" class="button"
target="_blank">View site »</a>
<a href="<?php echo get_option('home') ?>/portfolio" class="button">View portfolio »
</a>
</div>

</div><!-- #feature-info -->

<?php endwhile; ?>

<div class="clear-block"></div>
</div><!-- #feature -->

<?php } elseif (is_home()) { ?>

A few notes:

• I’ve reproduced the original CSS classes from the original feature-front-$rand files in order to streamline the testing. As I start the design process, I’ll probably tweak things here and there, including the defined “thumbnail” size, which I’ve left at the default 464px.
• Using orderby=rand in the post query randomizes the results, even though we’re just showing one post at a time (showposts=1) from the portfolio posts (cat=3). Remove this condition to only show the most recent post from the portfolio category.
• Because the Feature Site child theme redefines the post headers for a customized display on the inner pages, we have to call <?php the_title(); ?> instead of <?php thematic_postheader(); ?>. I’ll need to revisit the CSS there to get a true headline.
• I’m pulling in data from a custom field (client-url) defined on each portfolio post in order to provide the link out to the actual client site.

Elsewhere on the site the functional pieces are pretty much  in place, including a custom portfolio page template that displays all of the post excerpts and smaller thumbnails in the portfolio category. Now on to the visual design…

Shortly after my client’s site had launched, the Section Widget plugin was released and shortly thereafter won the WP plugin competition. I’ve been using it on a number of projects since, but never got around to exploring the Section (Tabbed) version. As part of the recent updates to my client site, I began poking around to see if it would work as a replacement for Tabber.

My initial results were disappointing — using shortcodes defined in my functions file to call various bits of plugin functionality resulted in the correct content being shown, but it was floating above the tabbed area rather than in the tab box. Not usable at all. After a little more digging in the WordPress support forums, I installed the PHP Shortcode plugin and entered the needed PHP functions directly into the tabbed widget interface. Success!

<ul id="show-recent-comments">
[php]get_recent_comments();[/php]
</ul>

All that remained was to copy the CSS styling that I’d created for the Tabber implementation to the classes used by Section Widget. Fortunately the tabbed code is very well annotated with style classes and the conversion was done very quickly.

Ideally, I’d love to be able to drag any widget onto the Section Tabbed Widget panel and have that functionality appear in a tabbed interface. Until then, I have to make sure that a PHP function is callable — something that is not immediately obvious for plugins designed to only be used as WYSIWYG widgets.

// Add post thumbnail support in WP2.9
if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

// Change default content display on home page to excerpt
function childtheme_content($content) {
if (is_home() || is_front_page()) {
$content= 'excerpt';}
return $content;
}
add_filter('thematic_content', 'childtheme_content');

// Add post thumbnail to post excerpt
function add_post_thumb($title) {
return get_the_post_thumbnail(NULL, 'thumbnail') . $title;
}
add_filter('get_the_excerpt', 'add_post_thumb');

I prefer the thumbnail underneath the post title and author meta information. However, if you wanted the thumbnail to appear next to the title, replace get_the_excerpt in the last line with thematic_postheader_posttitle. Use CSS to get the positioning that you prefer. Note that the thumbnail will appear wherever excerpts are shown – use the same conditional code as shown with childtheme_content() to limit it to the home/front page if you prefer.

// Remove sidebars from feature template
function remove_sidebar() {
// We test if we are on the page template 'Feature'
if (is_page_template('feature.php')) {
// Yes, we are .. now we switch off the sidebar
return FALSE;
} else {
// we are not .. we leave the switch on
return TRUE;
}
}
// Connect the filter to thematic_sidebar()
add_filter('thematic_sidebar', 'remove_sidebar');

HT: Themeshaper forums

I am currently working on one of my personal hobby sites, ardously converting it from a hand-coded HTML+CSS site with ~200 pages that I last updated two years ago to a WordPress-based mix of PHP, HTML and CSS that will be much easier to maintain. The bulk of the tedious work – copying, pasting and reformatting 50 pages of tabular product specs – has been done. Now it’s time for general clean up, media management and design touches, including revisiting the menu navigation structure.

One of the things that I hated about the current site experience is that the product pages required drilling down through two levels of category index pages before you got to actual content. I’ve streamlined some of that by reorganizing and consolidating content, but I also wanted to look at the navigation controls and see what I could take advantage of.

I’ve considered a two-tier nav bar in the past to handle the bulk of filtering product categories, but never liked the implementation (though something like this, with a tertiary dropdown, might work). Instead, having just successfully pitched and implemented the concept of “mega menus” on one of my professional “day job” client’s sites, I wanted to see if something similar could be done with WordPress.

Mega menus are essentially a wide dropdown content panel that can have multiple columns of nav lists, styled headers/category groupings, etc. The usual way is to create the panels using HTML and CSS as you would with any web page, then control the dropdown display with CSS and/or JavaScript. This means manually entering all of the navigation labels for each dropdown as well as the target URLs. Ideally I’d like to find a way to automate this with WordPress’ wp_list_pages() or wp_page_menu() functions, but that will be Part 2 of this topic.

WordPress includes a jQuery library by default. Having experienced some of the conflicts between different JavaScript libraries in the past, I was interested to see if there was anything already available that also leveraged jQuery. And there is. I found an example of what I was hoping to implement on javascriptkit.com (JSK) called “Cut & Paste jQuery Mega Menu“. I’m not going to include a functional example here, so give them some click-thru love if you want to see it in action, especially since I’m still working on my site.

So how to integrate into WordPress?

Important: I use the Thematic framework as the base for most all of my WordPress development. The code examples below may need to be modified to work with WP’s default themes and/or other frameworks.

1. Save the referenced CSS and Javascript files into my child theme folder. Alternately, you could copy the contents of the CSS file into your child style.css file and remove the example CSS link from step 2 below.

2. To add the script declarations to the <head> section of my page, I added this to my child functions file:

// Add plugin scripts to head
function childtheme_scripts() {?>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jkmegamenu.css" />
<script type="text/javascript" src="jkmegamenu.js">

/***********************************************
* jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)
* This notice must stay intact for usage
* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
***********************************************/

</script>
<script type="text/javascript">

//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")

</script><?php }
add_action('wp_head','childtheme_scripts');

Note that because WordPress is already calling a jQuery library, I’ve deleted JSK’s first script declaration to avoid duplicate script bloat.

3. The example directions now call for the menu’s HTML code to be pasted into your page. I’m not interested in pasting all of this code into my page template, so I needed to define it externally, referencing it where appropriate (see below).  As such, I created a nav-menu.php file in my child theme folder and copied in the example code.

4. Note that the example code creates a single instance of a mega menu. To recreate an entire nav bar, we’ll need to reproduce each additional primary nav item and the secondary links that we want in the mega menu dropdown. For each new mega menu, we have to add a new declaration line in the head scripts as well, identifying the anchor ID and menu ID.

<script type="text/javascript">
//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")
jkmegamenu.definemenu("megaanchor1", "megamenu1", "mouseover")
jkmegamenu.definemenu("megaanchor2", "megamenu2", "mouseover")
</script>

5. I need to remove the default Thematic menu and add our new nav bar. A single PHP include declaration will reference the nav-menu.php file that I created.

// First we need to remove the action creating the menu
function remove_access($content) {
remove_action('thematic_header','thematic_access',9);
}
add_action('init', 'remove_access');

// Now we need to rebuild it
function childtheme_access() { ?>
<div id="access">
<div><a href="#content" title="<?php _e('Skip navigation to the content',
'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>
<?php include 'nav-menu.php'; ?>
</div><!-- #access -->
<?php }
add_action('thematic_header','childtheme_access',9);

Alternately, for testing purposes, I added the include declaration to the “belowheader” section, allowing me to compare the normal Thematic/WordPress menu with my manual mega menus.

// Add mega menu below header
function childtheme_megamenu() {
include 'nav-menu.php';
}
add_action('thematic_belowheader','childtheme_megamenu',1);

6. From here, you’ll just need to add the appropriate CSS to display your primary list items in a horizontal fashion — you should be able to crib that from Thematic’s default CSS declarations. Be sure to put a div wrapper in your nav-menu.php file or around the include declaration with a easy ID reference (not “menu” or “sf-menu” if you want to use both nav schemes together for a while!)

Overall, the result works and gives me the nav control that I’m looking for. I’m not excited about having the menus hard coded and would rather leverage WordPress’ wp_list_pages() or wp_page_menu() functions to automatically generate the links inside each mega menu, but that’ll have to be for another time. I don’t think I’ll be able to fully automate everything, since there are specific IDs that have to be included for the JavaScript to work, but even automatically generating the second- and third-level links would be a step in the right direction.

Caveat: I am a JavaScript newbie and will not admit to much more expertise than what I’ve described doing above. If anyone has different or better thoughts on accomplishing this task, please feel free to add a comment below. Thanks!

** UPDATE **
A quick test since writing the above post shows that replacing the individual page lists in the nav-menu.php file with <?php wp_list_pages('child_of=ID&depth=1&title_li=') ?> works just fine, where ID is replaced by the parent page ID.

<div class="column">
<h3>Category Title</h3>
<ul>
<?php wp_list_pages('child_of=287&depth=1&title_li=') ?>
</ul>
</div>

I’m still using the include file and hand coding the layout categories, but the page title and link generation is being handled by WordPress. Much better!

The manager’s schedule is for bosses. It’s embodied in the traditional appointment book, with each day cut into one hour intervals. You can block off several hours for a single task if you need to, but by default you change what you’re doing every hour. When you use time that way, it’s merely a practical problem to meet with someone. Find an open slot in your schedule, book them, and you’re done.

In contrast, makers:

generally prefer to use time in units of half a day at least. You can’t write or program well in units of an hour. That’s barely enough time to get started. When you’re operating on the maker’s schedule, meetings are a disaster. A single meeting can blow a whole afternoon, by breaking it into two pieces each too small to do anything hard in.

I am a maker and couldn’t agree more with this generalization. When I have an hour between meetings, I usually end up doing administrative work that is of no productive value – that is certainly not enough time to get engaged on project work and really produce. The author writes working “from dinner till about 3 am every day, because at night no one could interrupt me.” I like getting to the office several hours before “normal office hours” for similar reasons. No interruptions=more productive work.

The author suggests some tricks for makers to use in balancing meeting requests and their preferred work schedule, ultimately concluding that:

Those of us on the maker’s schedule are willing to compromise. We know we have to have some number of meetings. All we ask from those on the manager’s schedule is that they understand the cost.

Are you a maker or a manager?

After seeing the demo script, my client requested that the “active” photo for each page be loaded as “open” when that page was accessed. This is something that should be apparent based on the developers’ description, but proved to be quite difficult to track down. Based on the basic documentation, setting the id or index of a menu item in the “open” field would open it on start, the default value being “null”. However, that was as far as the documentation went, leaving the rest to experimentation…

The first problem was where to set “the id or index of a menu item”… a few Google searches turned up a few old forum posts that indicated the id should be set on the ‘a’ in the menu HTML. However, using text strings caused the default images to revert to a nonactive state after any mouseover, so I went back to the default IDs: 0, 1, 2, 3. The HTML line looked like this:

var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:500,
open:0, border:0,onOpen:function(e,i){window.location=(e);}});

The key addition was “open:0″, which was not included in the default script files. However, the sticky image behavior worked for default IDs 1-3, but not 0. Based on my searching, I wasn’t the only to be confounded by this issue. Eventually, buried in a long comment thread, I found an answer. Changing this line in the JavaScript file:

if(this.options.open){,

to this:

if(this.options.open!=null){

fixed the problem. All of the images opened correctly and stayed open on their respective pages. Whew! A lot of non-billable time spent tracking down a behavior that could have been much more clearly documented in the code.