Lightweight Product Viewer / Slider Plugin With jQuery - Product Showcase

Product Showcase is a jQuery plugin used for creating a responsive product viewer / slideshow where the users has the ability to fade through product images by clicking on the thumbnails. Licensed under the GNU General Public License.

How to use it:

1. Include jQuery JavaScript library and the jQuery product showcase plugin's JS & CSS files on your html page.

<script src="//code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="product-showcase.js"></script>
<link href="product-showcase.css" rel="stylesheet">

2. Add your product images / thumbnails / descriptions / urls / etc information into the product showcase using html5 data attributes as follows:

• data-icon: thumbnail image
• data-image: original image
• data-title: product title
• data-description: product description
• data-button-text: text for action button
• data-button-link: url
• data-align: text alignment for the slide
• data-selected: show the slide when the page is loaded
• data-text-highlight: highlight text

<div class="product-showcase">

  <div class="ps-icon"
       data-icon="thumb-1.jpg"
       data-image="1.jpg"
       data-title="Product 1"
       data-description="Product 1"
       data-button-text="Buy Now!"
       data-button-link="#"
       data-align="right"
       data-selected="true"
       data-text-highlight="true">
  </div>


  <div class="ps-icon"
       data-icon="thumb-2.jpg"
       data-image="2.jpg"
       data-title="Product 2"
       data-description="Product 2"
       data-button-text="Buy Now!"
       data-button-link="#"
       data-align="right"
       data-selected="true"
       data-text-highlight="true">
  </div>


  <div class="ps-icon"
       data-icon="thumb-3.jpg"
       data-image="3.jpg"
       data-title="Product 3"
       data-description="Product 3"
       data-button-text="Buy Now!"
       data-button-link="#"
       data-align="right"
       data-selected="true"
       data-text-highlight="true">
  </div>

</div>

3. Initialize the product viewer by calling the function on the top container.

$(".product-showcase").productShowcase({

  // max height of the product viewer
  maxHeight:"550px", 

  // width of the product viewer
  width:"100%",

  // size of the thumbnails
  iconSize:"90px"
  
});

 

---

This awesome jQuery plugin is developed by codehandling. For more Advanced Usages, please check the demo page or visit the official website.