Show product images in a nice way on your e commerce website with responsive Smoothproducts. Smoothproducts is a mobile friendly jquery ecommerce product gallery with product zoom & product image popup with navigation.

  • Mobile friendly
  • Image hover zoom
  • Image popup
  • light weight
  • easily customization

Free download this amazing jquery Product image gallery plugin from Github or the link below

Basic Usage

css – Load smoothproducts.css file in the head section of your website

 <link rel="stylesheet" href="css/smoothproducts.css">

HTML – add html part for the gallery

<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>
     <a href="images/3.jpg"><img src="images/3_tb.jpg" alt=""></a>
     <a href="images/4.jpg"><img src="images/4_tb.jpg" alt=""></a>
     <a href="images/5.jpg"><img src="images/5_tb.jpg" alt=""></a>
     <a href="images/6.jpg"><img src="images/6_tb.jpg" alt=""></a>
  </div>

Jquery – Load jQuery & Smooth products plugin at the bottom of your web page.

<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="text/javascript" src="js/smoothproducts.min.js"></script>

Js – calling the plugin

<script type="text/javascript">
	/* wait for images to load */
	$(window).load(function() {
		$('.sp-wrap').smoothproducts();
	});
</script>

Author

Hi! I’m Dimuthu Freelance Web Designer, Developer, Creative Graphic Designer, Digital Marketer & Successful Blogger. Hire me! if you need any support.

Write A Comment

Pin It