shopp('product.gallery')

Builds a dynamic image gallery with a gallery preview image display and a selection of thumbnails for all images available for a product.

When a thumbnail is clicked by the visitor, the gallery preview gracefully fades to display the selected image. Clicking the gallery preview shows the full image as uploaded by the store owner using the ColorBox modal image viewer

Options

  • p.size: The maximum size to use for both width and height of the preview image (used in place of width and height)
  • p.width: Default is 240. The maximum width for the preview image
  • p.height: Default is 240. The maximum height of the preview image
  • preview: Default is click. The action to use to preview a thumbnail equivalent to the jQuery event such as click, hover, dblclick, mousedown, etc.
  • p.fit: The fit of unproportional images to the requested preview size (defaults to all) :

    • width — Scale the image down to fit the image in the new size by the width, cropping any extra height
    • height — Scale the image down to fit the image in the new size by the height, cropping any extra width
    • crop — Scale the image down to fit by the smallest dimension to fill the entire image, cropping the extra off the other dimension (specific cropping adjustments can be made in the product editor)
    • matte — Scale the image down to fit within the new size filling extra space with a background color
    • all — Scale the image down to fit within the new size (the final size may differ from the specified dimensions)
  • p.sharpen: Apply an unsharp mask to the preview image (100%-500%, default is none)
  • p.quality: The JPEG image quality of the preview image (0-100%, default is 80)
  • p.bg: The background color to use with the matte setting for the p.fit option (#rrggbb, default is #ffffff)
  • p.link: Whether the preview image should be linked to the actual image (default is true)
  • rowthumbs: Default is (calculated). Specify the number of thumbnails to show per row. The default is calculated to determine the number of thumbnails that will fit in the maximum width of the preview image.
  • thumbsize: The maximum size to use for both width and height of the thumbnails (used in place of width and height)
  • thumbwidth: Default is 64. The maximum width of the thumbnails in pixels
  • thumbheight: Default is 64. The maximum height of the thumbnails in pixels
  • thumbfit: The fit of unproportional images to the requested thumbnail size (defaults to all) :

    • width — Scale the image down to fit the image in the new size by the width, cropping any extra height
    • height — Scale the image down to fit the image in the new size by the height, cropping any extra width
    • crop — Scale the image down to fit by the smallest dimension to fill the entire image, cropping the extra off the other dimension (specific cropping adjustments can be made in the product editor)
    • matte — Scale the image down to fit within the new size filling extra space with a background color
    • all — Scale the image down to fit within the new size (the final size may differ from the specified dimensions)
  • thumbsharpen: Apply an unsharp mask to the thumbnails (100%-500%, default is none)
  • thumbquality: The JPEG image quality of thumbnails (0-100%, default is 80)
  • thumbbg: The background color to use with the matte setting for the thumbfit setting (#rrggbb, default is #ffffff)
  • zoomfx: Default is shopp-zoom. Enables zoom (also known as lightbox) effects for alternate JavaScript-based modal content viewers. By default, Shopp uses the Colorbox modal image viewer, the options of which are configurable by using shopp(‘storefront’,’zoom options’).

Examples

<?php shopp('product','gallery'); ?>

See Also

  1. Avatar of Patrick

    Any way to add a rel= for custom lightbox solution?

    November 28th   #

  2. Avatar of Yvonne

    Not sure what you are looking for. You can write your own Theme api tag and overwrite the output of the default one. Or take a look at the shopp('storefront.zoom-options'), see if that gives you the options you need.

    April 11th   #

You must be logged in to post a comment.

© Ingenesis Limited. Shopp™ is a registered trademark of Ingenesis Limited.

Skip to toolbar