KAWWA Markup Pattern Library


eCommerce

Product Gallery Component Information

  • Class name: (k-product-gallery)
  • Version: 1.0
  • jQuery jQuery Interactive feature
  • Tapestry Tapestry Integration
  • Angular Angular Integration

Add to list

The Product Gallery component groups thumbnails functionalities and an image magnifier function to your product image.

HTML5 Plain Code

COPY
  1. <div class="k-product-gallery photo-data">
  2. 	<p><a class="jqzoom" rel="gal1" href="/assets/0.0.2-SNAPSHOT/ctx/img/image_examples/p1_hd_3.png" title="Zoom this image">
  3. 		<img class="photo" src="/assets/0.0.2-SNAPSHOT/ctx/img/image_examples/p1_3.png" alt="Title of product" /></a></p>
  4. 		<ul class="thumblist">
  5. 
                                
  6. 			<li><a class="zoomThumbActive" href="#" rel="{gallery: 'gal1', smallimage:'/assets/0.0.2-SNAPSHOT/ctx/img/image_examples/p1_3.png',largeimage:'/assets/0.0.2-SNAPSHOT/ctx/img/image_examples/p1_hd_3.png'}">
  7. 							<img src="/assets/0.0.2-SNAPSHOT/ctx/img/image_examples/p1_thumb_3.png" alt="View of product" /></a></li>
  8. 
                                
  9. 			<li><a href="#" rel="{gallery: 'gal1', smallimage:'/assets/0.0.2-SNAPSHOT/ctx/img/image_examples/p1_1.png',largeimage:'/assets/0.0.2-SNAPSHOT/ctx/img/image_examples/p1_hd_1.png'}">
  10. 							<img src="/assets/0.0.2-SNAPSHOT/ctx/img/image_examples/p1_thumb_1.png" alt="View of product" /></a></li>
  11. 
                                
  12. 			<li><a href="#" rel="{gallery: 'gal1', smallimage:'/assets/0.0.2-SNAPSHOT/ctx/img/image_examples/p1_2.png',largeimage:'/assets/0.0.2-SNAPSHOT/ctx/img/image_examples/p1_hd_2.png'}">
  13. 							<img src="/assets/0.0.2-SNAPSHOT/ctx/img/image_examples/p1_thumb_2.png" alt="View of product" /></a></li>
  14. 		</ul>
  15. </div>

CSS Code

COPY
  1. /* LIST OF THUMBS */
  2. 
                                
  3. ul.thumblist {clear: both; padding: 0;}
  4. 
                                
  5. 	ul.thumblist li {
  6. 		float: left;
  7. 		width: auto;
  8. 		list-style-type: none;
  9. 		margin-right: 5px;
  10. 	}
  11. 		ul.thumblist li a, ul.thumblist li a:link, ul.thumblist li a:visited {
  12. 			display: block;
  13. 			padding: 1px;
  14. 			border: 1px solid #CCC;
  15. 		}
  16. 		ul.thumblist li a:hover, ul.thumblist li a.zoomThumbActive {
  17. 			background: #000;
  18. 			border: 1px solid #000;
  19. 		}
  20. 		ul.thumblist img {vertical-align: bottom;}
  21. 
                                
  22. /* ZOOM */
  23. 
                                
  24. .zoomPad {
  25. 	position: relative;
  26. 	float: left;
  27. 	cursor: crosshair;
  28. 	z-index: 99;
  29. }
  30. 
                                
  31. .zoomPreload {
  32.    position: absolute;
  33.    top: 0;
  34.    left: 0;
  35.    width: 90px;
  36.    height: 43px;
  37.    text-decoration: none;
  38.    text-align:center;
  39.    color: #333;
  40.    background: #FFF url(../img/k-theme0/zoomloader.gif) 43px 30px no-repeat;
  41.    padding: 8px;
  42.    border: 1px solid #CCC;
  43.    opacity: 0.8;
  44.    z-index: 110;
  45. }
  46. 
                                
  47. .zoomPup {
  48. 	overflow: hidden;
  49. 	position: absolute;
  50. 	background: #FFF;
  51. 	opacity: 0.5;
  52. 	outline: 1px solid #FFF;
  53. 	box-shadow: 0 0 2px #000;
  54. 	z-index: 120;
  55.     z-index: 101;
  56. 	cursor: crosshair;
  57. }
  58. 	.zoomPup:after {
  59. 		content: " ";
  60. 		width: 40px;
  61. 	}
  62. 
                                
  63. .zoomOverlay{
  64. 	display: none;
  65. 	position: absolute;
  66. 	left: 0;
  67. 	top: 0;
  68. 	width: 100%;
  69. 	height: 100%;
  70. 	background:#FFF;
  71. 	/*opacity:0.5;*/
  72. 	z-index:5000;
  73. 	z-index: 101;
  74. }
  75. 
                                
  76. .zoomWindow {
  77. 	position: absolute;
  78. 	top: 40px;
  79. 	left: 110%;
  80. 	height: auto;
  81. 	background: #FFF;
  82. 	box-shadow: 0 0 3px #999;
  83.  	z-index: 10000;
  84. }
  85. .zoomWrapper {
  86. 	position: relative;
  87. 	border: 1px solid #999;
  88.   	z-index: 110;
  89. }
  90. .zoomWrapperTitle {display: none;}
  91. 
                                
  92. .zoomWrapperImage {
  93. 	display: block;
  94. 	position: relative;
  95. 	overflow: hidden;
  96. 	z-index: 110;
  97. }
  98. 	.zoomWrapperImage img {
  99. 	  display: block;
  100. 	  position: absolute;
  101. 	  max-width: 2000px; /*cancels max-width 100%*/
  102. 	  border: 0;
  103. 	  z-index:101;
  104. 	}
  105. 
                                
  106. .zoomIframe {
  107.   position: absolute;
  108.   display: block;
  109.   opacity: 0.8;
  110.   z-index: -1;
  111. }
  112. 
                                

How to apply

COPY
  1. (function($){
  2. 	'use strict';
  3. 
                                
  4. 	$(document).ready(function(){
  5. 		if($.fn.jqzoom) {
  6. 			$('.jqzoom').jqzoom({
  7. 				zoomType: 'standard',
  8. 				lens: true,
  9. 				preloadImages: true,
  10. 				alwaysOn: false
  11. 			});
  12. 		}
  13. 	});
  14. })(jQuery);

For more information about how to apply this plugin, its options, events and methods, see the jQZoom site.

IE Backward Compatibility

In order to correct display bugs for Internet Explorer versions prior to 9, your html pages need to call the following file by Conditional Comments:

Tapestry Integration

ProductGallery parameters
Name Required Java Type Default Prefix Default Value Description
params true List<FrontProductImage> prop The list of the images you want to use with this component. The list has to contain FrontProductImage objects. With this interface, you need to implement 4 methods, returning the name of image, and the path of the 3 needed versions of the same image.
productImages false JSONObject literal false The basic JSON-type parameter of the jQuery widget

The Template

COPY
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd" 
  4. 	xmlns:p="tapestry:parameter">
  5. <body>
  6. 	
  7. 	
  8. 		<div t:type="kawwa2/productgallery" t:productImages="productImages"></div>
  9. 		
  10. </body>
  11. </html>

Java Implementation

COPY
  1. package net.atos.kawwaportal.components.test.pages;
  2. 
                                
  3. import java.util.ArrayList;
  4. import java.util.List;
  5. 
                                
  6. import net.atos.kawwaportal.components.data.ecommerce.FrontProductImage;
  7. 
                                
  8. import org.apache.tapestry5.ioc.annotations.Inject;
  9. import org.apache.tapestry5.services.AssetSource;
  10. 
                                
  11. public class ProductGallery {
  12. 
                                
  13. 	@Inject
  14. 	private AssetSource as;
  15. 	
  16. 	public List<FrontProductImage> getProductImages() {
  17. 		List<FrontProductImage> list = new ArrayList<FrontProductImage>();
  18. 
                                
  19. 		list.add(new FrontProductImage() {
  20. 
                                
  21. 			public String getUriThumb() {
  22. 				return as.getContextAsset("static/img/productgallery/p1_thumb_1.jpg", null).toClientURL();
  23. 			}
  24. 
                                
  25. 			public String getUriSmall() {
  26. 				return as.getContextAsset("static/img/productgallery/p1_1.jpg", null).toClientURL();
  27. 			}
  28. 
                                
  29. 			public String getUriLarge() {
  30. 				return as.getContextAsset("static/img/productgallery/p1_hd_1.jpg", null).toClientURL();
  31. 			}
  32. 
                                
  33. 			public String getName() {
  34. 				return "Image1";
  35. 			}
  36. 		});
  37. 
                                
  38. 		list.add(new FrontProductImage() {
  39. 
                                
  40. 			public String getUriThumb() {
  41. 				return as.getContextAsset("static/img/productgallery/p1_thumb_2.jpg", null).toClientURL();
  42. 			}
  43. 
                                
  44. 			public String getUriSmall() {
  45. 				return as.getContextAsset("static/img/productgallery/p1_2.jpg", null).toClientURL();
  46. 			}
  47. 
                                
  48. 			public String getUriLarge() {
  49. 				return as.getContextAsset("static/img/productgallery/p1_hd_2.jpg", null).toClientURL();
  50. 			}
  51. 
                                
  52. 			public String getName() {
  53. 				return "Image2";
  54. 			}
  55. 		});
  56. 
                                
  57. 		return list;
  58. 	}
  59. 
                                
  60. }

Angular Integration

Create an image gallery using the jqzoom jQuery plugin.

productGallery parameters
Name Required Java Type Description
title true String Give a title to your gallery
gallery true {Array of Object} targets a variable from the scope of the controller. It is an array of object containing for each one : - title: the title of the image - thumb: the path to the thumblr image - small: the path to the small image - hd: the path to the big image
targets true Object a variable from the scope of the controller. It allows you to overload the jqzoom jQuery plugin.

The Template

COPY
  1. <!doctype html>
  2. <html ng-app="app">
  3. <head>
  4.     <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery-1.8.3.js"></script>
  5.     <script src="http://got5.github.io/KAWWA/grunt-scripts/angular.js"></script>
  6.     <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery.ui.core.js"></script>
  7.     <script src="http://got5.github.io/KAWWA/grunt-scripts/jquery.ui.widget.js"></script>
  8.     <script src="http://got5.github.io/KAWWA/grunt-scripts/kawwa-directives-full.js"></script>
  9.     <script src="script.js"></script>
  10. </head>
  11. <body>
  12. <div class="content" ng-controller="myCtrl">
  13.     <div data-title="gal1" data-product-gallery data-gallery="gallery" data-options="galleryOptions"></div>
  14. </div>
  15. </body>
  16. </html>

The JavaScript

COPY
  1. var module = angular.module('app',['kawwa2']);
  2. module.controller('myCtrl',function($scope){
  3. 
                                
  4.     var baseImagePath ='';
  5.     $scope.gallery = [
  6.         {
  7.             title: "first image",
  8.             thumb: baseImagePath + 'img/productGallery/1s.png',
  9.             small: baseImagePath + 'img/productGallery/1m.png',
  10.             hd: baseImagePath + 'img/productGallery/1hd.png'
  11.         }, {
  12.             title: 'second image',
  13.             thumb: baseImagePath + 'img/productGallery/2s.png',
  14.             small: baseImagePath + 'img/productGallery/2m.png',
  15.             hd: baseImagePath + 'img/productGallery/2hd.png'
  16.         }, {
  17.             title: 'third image',
  18.             thumb: baseImagePath + 'img/productGallery/3s.png',
  19.             small: baseImagePath + 'img/productGallery/3m.png',
  20.             hd: baseImagePath + 'img/productGallery/3hd.png'
  21.         }];
  22.     $scope.options = {
  23.         zoomType:'innerzoom',
  24.         lens: false,
  25.         preloadImages: true,
  26.         alwaysOn: false
  27.     };
  28. 
                                
  29. });

Top


List of Components

Top

jQuery Feature
jQuery Interactive Feature
Tapestry Integration
Tapestry integration
AngularJS Feature
AngularJS Feature

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce