eCommerce
Product Gallery 
- Class name: (k-product-gallery)
- Version: 1.0
-
jQuery Interactive feature
-
Tapestry Integration
-
Angular Integration
The Product Gallery component groups thumbnails functionalities and an image magnifier function to your product image.
HTML5 Plain Code
-
<div class="k-product-gallery photo-data">
-
<p><a class="jqzoom" rel="gal1" href="/assets/0.0.2-SNAPSHOT/ctx/img/image_examples/p1_hd_3.png" title="Zoom this image">
-
<img class="photo" src="/assets/0.0.2-SNAPSHOT/ctx/img/image_examples/p1_3.png" alt="Title of product" /></a></p>
-
<ul class="thumblist">
-
<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'}">
-
<img src="/assets/0.0.2-SNAPSHOT/ctx/img/image_examples/p1_thumb_3.png" alt="View of product" /></a></li>
-
<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'}">
-
<img src="/assets/0.0.2-SNAPSHOT/ctx/img/image_examples/p1_thumb_1.png" alt="View of product" /></a></li>
-
<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'}">
-
<img src="/assets/0.0.2-SNAPSHOT/ctx/img/image_examples/p1_thumb_2.png" alt="View of product" /></a></li>
-
</ul>
-
</div>
CSS Code
-
/* LIST OF THUMBS */
-
ul.thumblist {clear: both; padding: 0;}
-
ul.thumblist li {
-
float: left;
-
width: auto;
-
list-style-type: none;
-
margin-right: 5px;
-
}
-
ul.thumblist li a, ul.thumblist li a:link, ul.thumblist li a:visited {
-
display: block;
-
padding: 1px;
-
border: 1px solid #CCC;
-
}
-
ul.thumblist li a:hover, ul.thumblist li a.zoomThumbActive {
-
background: #000;
-
border: 1px solid #000;
-
}
-
ul.thumblist img {vertical-align: bottom;}
-
/* ZOOM */
-
.zoomPad {
-
position: relative;
-
float: left;
-
cursor: crosshair;
-
z-index: 99;
-
}
-
.zoomPreload {
-
position: absolute;
-
top: 0;
-
left: 0;
-
width: 90px;
-
height: 43px;
-
text-decoration: none;
-
text-align:center;
-
color: #333;
-
background: #FFF url(../img/k-theme0/zoomloader.gif) 43px 30px no-repeat;
-
padding: 8px;
-
border: 1px solid #CCC;
-
opacity: 0.8;
-
z-index: 110;
-
}
-
.zoomPup {
-
overflow: hidden;
-
position: absolute;
-
background: #FFF;
-
opacity: 0.5;
-
outline: 1px solid #FFF;
-
box-shadow: 0 0 2px #000;
-
z-index: 120;
-
z-index: 101;
-
cursor: crosshair;
-
}
-
.zoomPup:after {
-
content: " ";
-
width: 40px;
-
}
-
.zoomOverlay{
-
display: none;
-
position: absolute;
-
left: 0;
-
top: 0;
-
width: 100%;
-
height: 100%;
-
background:#FFF;
-
/*opacity:0.5;*/
-
z-index:5000;
-
z-index: 101;
-
}
-
.zoomWindow {
-
position: absolute;
-
top: 40px;
-
left: 110%;
-
height: auto;
-
background: #FFF;
-
box-shadow: 0 0 3px #999;
-
z-index: 10000;
-
}
-
.zoomWrapper {
-
position: relative;
-
border: 1px solid #999;
-
z-index: 110;
-
}
-
.zoomWrapperTitle {display: none;}
-
.zoomWrapperImage {
-
display: block;
-
position: relative;
-
overflow: hidden;
-
z-index: 110;
-
}
-
.zoomWrapperImage img {
-
display: block;
-
position: absolute;
-
max-width: 2000px; /*cancels max-width 100%*/
-
border: 0;
-
z-index:101;
-
}
-
.zoomIframe {
-
position: absolute;
-
display: block;
-
opacity: 0.8;
-
z-index: -1;
-
}
How to apply
-
(function($){
-
'use strict';
-
$(document).ready(function(){
-
if($.fn.jqzoom) {
-
$('.jqzoom').jqzoom({
-
zoomType: 'standard',
-
lens: true,
-
preloadImages: true,
-
alwaysOn: false
-
});
-
}
-
});
-
})(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
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
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
<html xmlns:t="http://tapestry.apache.org/schema/tapestry_5_1_0.xsd"
-
xmlns:p="tapestry:parameter">
-
<body>
-
-
-
<div t:type="kawwa2/productgallery" t:productImages="productImages"></div>
-
-
</body>
-
</html>
Java Implementation
-
package net.atos.kawwaportal.components.test.pages;
-
import java.util.ArrayList;
-
import java.util.List;
-
import net.atos.kawwaportal.components.data.ecommerce.FrontProductImage;
-
import org.apache.tapestry5.ioc.annotations.Inject;
-
import org.apache.tapestry5.services.AssetSource;
-
public class ProductGallery {
-
@Inject
-
private AssetSource as;
-
-
public List<FrontProductImage> getProductImages() {
-
List<FrontProductImage> list = new ArrayList<FrontProductImage>();
-
list.add(new FrontProductImage() {
-
public String getUriThumb() {
-
return as.getContextAsset("static/img/productgallery/p1_thumb_1.jpg", null).toClientURL();
-
}
-
public String getUriSmall() {
-
return as.getContextAsset("static/img/productgallery/p1_1.jpg", null).toClientURL();
-
}
-
public String getUriLarge() {
-
return as.getContextAsset("static/img/productgallery/p1_hd_1.jpg", null).toClientURL();
-
}
-
public String getName() {
-
return "Image1";
-
}
-
});
-
list.add(new FrontProductImage() {
-
public String getUriThumb() {
-
return as.getContextAsset("static/img/productgallery/p1_thumb_2.jpg", null).toClientURL();
-
}
-
public String getUriSmall() {
-
return as.getContextAsset("static/img/productgallery/p1_2.jpg", null).toClientURL();
-
}
-
public String getUriLarge() {
-
return as.getContextAsset("static/img/productgallery/p1_hd_2.jpg", null).toClientURL();
-
}
-
public String getName() {
-
return "Image2";
-
}
-
});
-
return list;
-
}
-
}
Angular Integration
Create an image gallery using the jqzoom jQuery plugin.
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
-
<!doctype html>
-
<html ng-app="app">
-
<head>
-
<script src="http://got5.github.io/KAWWA/grunt-scripts/jquery-1.8.3.js"></script>
-
<script src="http://got5.github.io/KAWWA/grunt-scripts/angular.js"></script>
-
<script src="http://got5.github.io/KAWWA/grunt-scripts/jquery.ui.core.js"></script>
-
<script src="http://got5.github.io/KAWWA/grunt-scripts/jquery.ui.widget.js"></script>
-
<script src="http://got5.github.io/KAWWA/grunt-scripts/kawwa-directives-full.js"></script>
-
<script src="script.js"></script>
-
</head>
-
<body>
-
<div class="content" ng-controller="myCtrl">
-
<div data-title="gal1" data-product-gallery data-gallery="gallery" data-options="galleryOptions"></div>
-
</div>
-
</body>
-
</html>
The JavaScript
-
var module = angular.module('app',['kawwa2']);
-
module.controller('myCtrl',function($scope){
-
var baseImagePath ='';
-
$scope.gallery = [
-
{
-
title: "first image",
-
thumb: baseImagePath + 'img/productGallery/1s.png',
-
small: baseImagePath + 'img/productGallery/1m.png',
-
hd: baseImagePath + 'img/productGallery/1hd.png'
-
}, {
-
title: 'second image',
-
thumb: baseImagePath + 'img/productGallery/2s.png',
-
small: baseImagePath + 'img/productGallery/2m.png',
-
hd: baseImagePath + 'img/productGallery/2hd.png'
-
}, {
-
title: 'third image',
-
thumb: baseImagePath + 'img/productGallery/3s.png',
-
small: baseImagePath + 'img/productGallery/3m.png',
-
hd: baseImagePath + 'img/productGallery/3hd.png'
-
}];
-
$scope.options = {
-
zoomType:'innerzoom',
-
lens: false,
-
preloadImages: true,
-
alwaysOn: false
-
};
-
});