Glossary Item Box

Squirrelcart v6.1.0

Magnific Popup

Overview

Magnific Popup is a lightbox script similar to Slimbox and . You can read more about it here. It is used to open an image in a popup that is not a separate browser window but instead overlayed on the current page. 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 large images, such as when you click a regular product image on a product's page:

Enabling and Disabling

  1.  Open the Store Settings page in your control panel
  2. To enable, check the Magnific Popup 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 using this feature as shown in the pic above

 

Using Magnific Popup in Your Own Code

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

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 Magnific Popup, 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 Magnific Popup, navigation links appear within the Magnific Popup 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 Magnific Popup 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>

  

Magnific Popup 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 Magnific Popup 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 Magnific Popup, you wish to add a "front view" and a "back view" image so Magnific Popupwill 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-2017 Lighthouse Development. All Rights Reserved.