Glossary Item Box
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
Testing
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.