Glossary Item Box

Squirrelcart v5.0.0

Slimbox

Overview

Slimbox is a lighter weight clone of a popular script called Lightbox. You can read more about it here. It is used to open an image in a popup that is not a separate browser window. This provides the benefit of working regardless of popup blocker settings. The script also grays out the rest of the page to give emphasis to the popup being viewed.

 

Squirrelcart uses this feature to display product images assigned to the Large Image field on product records, when the regular sized image is clicked on a product's detail page:

slimbox example

Enabling and Disabling Slimbox

  1.  Open the Store Settings page in your control panel
  2. To enable, check the Slimbox field in the 3rd Party Script Support field set. To disable, uncheck the same field.
  3. Click Save Changes  

Testing

  1. Assign an image for the Image and Large Image fields on a product record.
  2. Go to your storefront page, and click on that product to open its detail page
  3. Click on the regular size image, which should open the larger image via Slimbox as shown in the pic above

 

Using Slimbox in Your Own Code

Any link (anchor tag) that links to an image file can be easily converted to open that image using Slimbox.

For a Single Image

Code like this will open an image in a regular browser window:

<a href="my_image.jpg">click hear to see my image</a>

 

To open that same image via Slimbox, add a rel attribute set to lightbox:

<a rel="lightbox" href="my_image.jpg">click hear to see my image</a>

For a Set of Related Images

Slimbox allows you to associate related image links with each other. When one is opened via Slimbox, navigation links appear within the Slimbox window to move back and forth between all related images. For example, say you have 3 images of cats that you want people to be able to move back and forth between in the same Slimbox window:

<a href="fluffy.jpg">Fluffy</a>
<a href="mittens.jpg">Mittens</a>
<a href="scratchy.jpg">Scratchy</a>

 

To accomplish this, you just need to come up with a name for the set. In this example, the name will be cats. Add a rel attribute to all 3 anchor tags set to lightbox[cats]:

<a rel="lightbox[cats]" href="fluffy.jpg">Fluffy</a>
<a rel="lightbox[cats]" href="mittens.jpg">Mittens</a>
<a rel="lightbox[cats]" href="scratchy.jpg">Scratchy</a>

  

Slimbox will treat all 3 images as a set and allow the viewer to browse back and forth between them.

For Additional Images of a Product

This section won't make sense if you didn't read the examples above. When a product has a regular and a large image specified on its record, Squirrelcart makes the regular image a link to the larger one, and uses Slimbox to open that larger image as explained at the top of this page. The rel attribute for that link is set as follows:

<a href="sc_images/products/271_large_image.jpg" rel="lightbox[product-271]"> 
     <img src="sc_images/products/271_image.jpg" height="200" width="200">
</a>

 

If you wish to add additional images to the product's description, you can create links in the product's description field and add a special rel attribute to them set to lightbox[product-PROD_RN]. For example, if in addition to the normal large product image that Squirrelcart displays via Slimbox, you wish to add a "front view" and a "back view" image so Slimbox will show the large, front, and back images as a set. To accomplish that, add the code to link to those additional images to the product's description field as follows:

<a href="sc_images/products/271_front_view_large.jpg" rel="lightbox[product-PROD_RN]">
     <img src="sc_images/products/271_front_view_small.jpg" height="100" width="100">
</a>
<a href="sc_images/products/271_back_view_large.jpg" rel="lightbox[product-PROD_RN]">
     <img src="sc_images/products/271_back_view_small.jpg" height="100" width="100">
</a>

  

Squirrelcart will automatically change the text PROD_RN in the rel attribute on the fly to the value of the product's record number.

 

 


© 2001-2015 Lighthouse Development. All Rights Reserved.