Skip to content

Latest commit

 

History

History
executable file
·
76 lines (59 loc) · 2.43 KB

README.md

File metadata and controls

executable file
·
76 lines (59 loc) · 2.43 KB
Raw

Smoothproducts

A lightweight & simple jQuery product viewer script

Demo

Open demo in new window

Features

  • Easy to use
  • Easy to style
  • Responsive
  • Handles different image sizes
  • 'Quick zoom' on hover with mouse
  • Lightbox style full zoom on click
  • Handles multiple instances on one page

Usage

  • Add the CSS to your stylesheet, or just call it in your header:
<link rel="stylesheet" href="css/smoothproducts.css">
  • Add & call javascript in your footer:
<script type="text/javascript" src="js/smoothproducts.min.js"></script>
<script type="text/javascript">
    /* wait for images to load */
    $(window).load( function() {
        $('.sp-wrap').smoothproducts();
    });
</script>
  • In your HTML, add a wrapper div called "sp-wrap". Inside should be your medium-sized thumbnail images. Each thumbnail should be linked to the higher-resolution version of its self. Use thumbnails of the same width for best results. (You may use different heights)
<div class="sp-wrap">
	<a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
	<a href="images/2.jpg"><img src="images/2_tb.jpg" alt=""></a>
</div>
  • You may add an element with a class of "sp-loading" and style it however you'd like. This div will be removed once the images have loaded and the viewer gets added to the page.
<div class="sp-loading"><img src="images/sp-loading.gif" alt=""><br>LOADING IMAGES</div>
<div class="sp-wrap">
	<a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
	<a href="images/2.jpg"><img src="images/2_tb.jpg" alt=""></a>
</div>
  • You may wish to add a max-width equal to the width of your preview images. Apply this to the .sp-wrap class in the stylesheet.
	.sp-wrap {
	    max-width: 300px;
	}
  • You may add a class of "sp-default" to an image link. This will cause that image to be selected by default when the page loads, instead of the first image in the list. (Thanks to Andy Noelker)
<div class="sp-wrap">
	<a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
	<a href="images/2.jpg" class="sp-default"><img src="images/2_tb.jpg" alt=""></a>
</div>

Plugins

A Rails plugin providing the necessary files is available here.

Licensing

Free to use and modify personally or commercially. Not for resale.