Announcement:Materials and articles for ProductCart 5 can be found at our brand new support center.

Create an account to edit articles | See Formatting Syntax for Wiki syntax | We look forward to your contribution!

Display Highslide images in product description

Pop-ups vs. Modal Windows

Starting with ProductCart version 3.5 all image pop-ups have been replaced with modal windows. Modal windows are a Web 2.0 approach to pop-up windows in that they offer many advantages over the old style pop-up windows. The images are displayed within the active window avoiding complications with pop-up blockers.

The modal windows in ProductCart are built on top of the popular Highslide framework.

An Example: Opening a Larger Image in a Modal Window

Use the following example code in your product description to add a basic, Highslide-styled image pop-up that shows a larger version (“large_image.jpg” is the name of the larger image file) of an image shown in the product description (“small_image.jpg” is the name of the image file shown in the product description).

Here is the code you can use:

<a href="catalog/large_image.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="catalog/small_image.jpg" alt="This is a description of my image." />
</a>
<div class="highslide-caption">The Image Caption Goes Here</div> 

More about Highslide

The framework is enabled by default in ProductCart version 3.5. In addition to standard modal windows, the Highslide framework contains an extensive feature set. The entire Highslide framework is accessible to designers for use in product descriptions. To learn more about using the Highslide framework, and for more sample code, please visit the Highslide framework website.


QR Code
QR Code Display Highslide images in product description (generated for current page)