In Adobe Business Catalyst shoppers eventually land on a page showing one product for sale. That page normally has one large image of the product, and below it you can optionally add a built-in Business Catalyst feature called Poplets which are thumbnail images that when clicked start a larger slide show of alternate views of the product.

My client wanted to simply this for shoppers, so when they click the large product image, it reveals a popup window with that image larger plus it becomes the first photo followed by the poplets slide show. Makes perfectly good sense, now shoppers make one click to see all the product's photos instead of clicking twice on the product photo and again on the poplets.

You can see this in action at Kudzu Antiques Market.

To make this happen required adding some jQuery programming code. Here's how we do this in the Admin area of Adobe Business Catalyst:

1. Click Admin --> Other Customization Options --> Individual Product - Large template.

2. Click HTML button at bottom.

My HTML code looks like this:

<div class="shop-product-large clear">
<div class="product-name">
<h1>{tag_name}</h1>
</div>
<div class="order-info">
<div class="price-view">
<div class="price">{tag_saleprice}</div>
<div class="view"><a href="#description"><img alt="View More" src="/site-images/button-view.png" /></a></div>
</div>
<div class="quantity-button">
<div class="quantity">{tag_addtocartinputfield}</div>
<div class="button-add-to-cart">{tag_addtocart,<img alt="Add To Cart" src="/site-images/button-add-to-cart.png" />}</div>
</div>
<div class="image"><a href="{tag_largeimage_path}" onclick="myLightbox.start(this); return false;" rel="lightbox[1]"><img alt="" src="{tag_largeimage_path}?Action=thumbnail&amp;Width=640&amp;Height=640" /></a></div>
<div class="description">{tag_description}</div>
</div>
</div>
<a name="description"></a>
<div class="poplets">{tag_poplets}</div>

3. Now Edit Admin --> Other Customization Options --> Overall Layout in Adobe Business Catalyst

4. Click HTML button at bottom and at the end of your layout add this jQuery code:

<script type="text/javascript">
jQuery(document).ready(function() {
  var popletnumber = jQuery('.productPopletsItem a').attr('rel');
  if (popletnumber ) {
    jQuery('.shop-product-large .image a').attr('rel', popletnumber);
  }
});
</script>

How the jQuery works: In the HTML we've made the large image a link and added a Javacript event to it: onclick="myLightbox.start(this); return false;" rel="lightbox[1]. This onclick is like the code that BC normally inserts to call the poplet show, but we've got a dummy parameter [1] since the HTML doesn't know the exact ID number of the poplet show until the page will be rendered for one product.

When the product page loads, our jQuery script replaces the dummy [1] parameter with the real ID poplet number of the poplet show on the page, if there are poplets. The result is our dummy link on the large product image becomes a real link to start the poplet show when the large image is clicked. The large image becomes the first slide in the slide show, followed by the poplet images.

In the example HTML above, we could have used Business Catalyst's simple {tag_largeimage} to display the large image, but we didn't because the client sometimes has large 900px images that are too wide to display within the web page layout's width, which can only accomodate an image up to 640px wide. If we used {tag_largeimage} then BC would try to put a 900px photos into a 640px space. The solution there is to use the Business Catalyst thumbnail feature to insert the large image no wider than 640px: src="{tag_largeimage_path}?Action=thumbnail&Width=640&Height=640". This way, when the 640px image is clicked, the Business Catalyst lightbox effect zooms out to show the 900px photo which becomes the first picture in the poplets slide show.

Of course, for this script to work your site must have jQuery loaded. See Loading jQuery.