• Join Now
  • Sign In
  • Cart
  • Instant Setup
  • Download
Logo
  • About
    • Try it Out
    • For Developers
    • For Agencies
    • For Designers
    • For Anyone
    • Testimonials
    • Showcase
    • History
    • Our Philosophy
    • Credits
    • What does free mean?
    • Blog
  • Community
    • Members
    • Forums
    • Chat
    • Karma
    • International
    • Jobs
    • eNewsletters
  • Developers
    • Download concrete5
    • Join Beta Team
    • Translate concrete5
    • Bug Tracker
    • Submit to Marketplace
    • Code Submissions
    • News
    • Community Leaders
  • Marketplace
    • Add-Ons
    • Themes
    • Add-on Installation
    • Deal Of The Day
    • Swag
    • Theme Contest 2012
  • Services
    • Hosting
    • Support Options
    • Consulting
    • Training
    • Enterprise
  • Documentation
    • Getting Started
    • Editor's Guide
    • Developers Guide
    • How-Tos
  • eCommerce

A Very Basic Gallery Example

Many users are interested in having a very stripped down gallery for product detail pages. Here are instructions for creating such a gallery. It is meant as a jumping off point for someone willing to get a little dirty with jquery and CSS, but it's a good start.

Essentially, what this template will do for you is completely ignore the "primary", etc distinctions between the images in your product, and only use the "Additional Product Images". So if your product does not have any additional images, it will show up blank. When using this, think of the "additional images" as "gallery images" and the named images as the images that show up in the product list. Using this will not affect anything that happens in the product list block.

To do it, you only need to add two files to your webspace and switch the template on your product detail block.

Step One:

Use the following code to create a new template in your webspace at [site root]blocks/product/templates/simple.php

<?php  defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<?php  
if (isset($product) && is_object($product)) { 
   $args = array();
   foreach($this->controller->getSets() as $key => $value) {
      $args[$key] = $value;
   }
   $args['id'] = $b->getBlockID();
   if ($controller->hideSoldOut && $product->isSoldOut()) {
      // show nothing
   } else {
      $args['propertyOrder'] = $controller->propertyOrder;
      Loader::element('product/display_simple', $args);
   }
}

This template is the exact same thing as the normal product block view, except it is calling a different element. You will need to create the element.

Step Two:

Download this file and save it on your site at [site root]/elements/product/display_simple.php

Code File

This is the code that will actually show the product information. It drops the named images, the overlay and lightbox from the default block and only uses the "Additional Product Images". It also ignores any formatting set in the block options, and adds in some CSS classes and IDs that can be grabbed for styling.

Step Three:

Go to a product block on your site, and switch its template to "Simple". You should see a gallery of images with clickable thumbnails to change the main image.

Step Four:

This is example code. It will need some sprucing up to make it production. We did at least give you a head start by setting the thumbnails to display inline and gave the div the main picture sits in an appropriate height. The script could also be replaced with some jazzier gallery code.

Thumbnail Intermediate Core Team

Learn More

  • eCommerce Home
  • Pre-Sale Questions
  • Reviews
  • Documentation
    • Operator's Guide
    • Developer's Guide
      • Customizing the Display of the eCommerce Add-On
      • Extending Discounts
      • Creating a Shipping Type
      • Creating a Payment Method
      • A Very Basic Gallery Example
      • Adding Events
  • Features
  • Version History
  • Additional Shipping and Payment Gateways
  • License
  • Roadmap
  • Support
  • Marketplace
  • Add-Ons
  • eCommerce
  • Documentation
  • Developer's Guide
  • A Very Basic Gallery Example

Do you have questions

  • What are users saying?
  • Who is using concrete5?
  • What makes concrete5 easy?
  • Why develop on concrete5?
 

We’re on “The Twitter”

RT @concrete5japan: Mac の WEBコーディングソフト「Coda 2」リリーススペシャルUST番組 な週刊 #concrete5 を YouTube にアップ http://t.co/TcD80TOk 買うの迷っている人、貴重なナカノヒト、長谷川さん @noby829 さんの話をきこう! ^KU

Follow concrete5

About

  • Try it Out
  • For Developers
  • For Agencies
  • For Designers
  • For Anyone
  • Testimonials
  • Showcase
  • History
  • Our Philosophy
  • Credits
  • What does free mean?
  • Blog

Community

  • Members
  • Forums
  • Chat
  • International
  • Jobs
  • eNewsletters

Developers

  • Download concrete5
  • Join Beta Team
  • Translate concrete5
  • Bug Tracker
  • Beta
  • Submit to Marketplace
  • Code Submissions
  • News
  • Community Leaders
  • User Doc Group

Marketplace

  • Add-Ons
  • Themes
  • Add-on Installation
  • Deal Of The Day
  • Swag

Services

  • Hosting
  • Support Options
  • Consulting
  • Training
  • Enterprise

Documentation

  • Getting Started
  • Editor's Guide
  • Developers Guide
  • How-Tos

Legal

  • Privacy Policy
  • Terms of Use
  • Refund Policy
  • Contact Us
© 2008 to 2012 Concrete CMS Inc. All Rights Reserved.

Sign In?

You must have a user account and be signed to perform this action.

  • Sign In
  • Register