Product Item Viewer Carousel with CSS3 & jQuery

The Item Viewer is a responsive, cross browser and lightweight jQuery plugin that helps you to create product item viewer carousel / gallery. Basically, it is well designed single product’s image carousel with small thumbnails. When user click on image thumbnail, the large image of product fade in.

Also, this plugin provide beautiful template of product details, i.e description, buy button, product size & quantity etc.

Plugin Overview

Plugin: Item viewer
Author: Stanislav Andreev
Licence: MIT Licence
Published: January 19, 2024
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (HTML, CSS & JavaScript )
Package Size: 639 KB

How to Use Product Item Viewer Carousel

1. To create product image carousel, first of all load the jQuery and item viewer‘s CSS and JavaScript file into your HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Item Viewer CSS -->
<link rel="stylesheet" href="css/style.css" />

<!-- Item Viewer Js -->
<script src="js/viewer.js"></script>

2. After that, create HTML structure for your product’s image gallery / carousel with basic product details.

 <div class="gallery">
        <div id="photo-viewer"></div>
        <div id="thumbnails">
          <a href="img/photo-1.jpg" class="thumb active" title="Pierre Cardin"><img src="img/thumb-1.jpg" alt="Mens Polo Shirt" /></a>
          <a href="img/photo-2.jpg" class="thumb" title="Pierre Cardin"><img src="img/thumb-2.jpg" alt="Mens Polo Shirt" /></a>
          <a href="img/photo-3.jpg" class="thumb" title="Pierre Cardin"><img src="img/thumb-3.jpg" alt="Mens Polo Shirt" /></a>
          <a href="img/photo-4.jpg" class="thumb" title="Pierre Cardin"><img src="img/thumb-4.jpg" alt="Mens Polo Shirt" /></a>
          <a href="img/photo-5.jpg" class="thumb" title="Pierre Cardin"><img src="img/thumb-5.jpg" alt="Mens Polo Shirt" /></a>
        </div>
      </div>
      <div class="description">
        <p class="standfirst">
          <strong>Pierre Cardin Cut And Sew Polo Shirt Mens</strong>
        </p>
        <p>
          Designed with a classic fold down collar that features a three button fastening placket, three cut and sew tri-coloured panels, single coloured back and short sleeves.
        </p>
        <p><strong>$10.75</strong></p>
        <form action="#">
        <p><strong>Size:</strong>
          <select class="choice">
            <option value="Small" selected>Small</option>
            <option value="Medium">Medium</option>
            <option value="Large">Large</option>
            <option value="Extra Large">Extra Large</option>
            <option value="XX Large">XX Large</option>
          </select>
        </p>
        <p><strong>Quantity:</strong> <input class="choice" id="number" type="number" value="1" />
        </p>
      </form>
        <a href="#" id="buy">Buy now</a>
      </div>

Note: The item viewer plugin will automatically initialized on body load.

3. The basic CSS styles to customize the item image viewer.

  /********** MAIN PICTURE **********/
  #photo-viewer {
    position: relative;
    height: 300px;
    overflow: hidden;}

  #photo-viewer.is-loading:after {
    content: url('../img/load.gif');
    position: absolute;
    top: 0;
    left: 0;}

  #photo-viewer img {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    left: 50%;}

  /********** THUMBNAILS **********/
  #thumbnails {
    margin: 10px 5px 0 0;
    height: 60px;}

  a.active {
    opacity: 0.3;}

  /********** PARTS OF PAGES **********/
  .gallery{
    width: 400px;
    padding: 20px;
    float: left;}

  .description {
    width: 180px;
    float: right;
    padding: 20px 20px 0 0;
    font-size: 85%;
    line-height: 1em;}

  .standfirst {
    margin: 0;}

  /********** BUY BUTTON **********/
  a#buy {
    background-color: #cc3333;
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 7px 10px 9px 10px;
    margin: 5px 0 20px 0;
    float: left;
    letter-spacing: 0.1em;
    text-transform: uppercase;}

  a#buy:hover {background-color: #333;}

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...