[ KAWWA PORTAL ] Components : Product Gallery

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.

Demo
Snippets
Tapestry Integration
Angular Integration

HTML5 Plain Code

COPY

<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

COPY

```
/* 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

COPY

```
(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

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

<!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

COPY

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.

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

```
<!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

COPY

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
```
```
    };
```
```
});
```

Top

KAWWA Markup Pattern Library

eCommerce

Product Gallery

HTML5 Plain Code

CSS Code

How to apply

IE Backward Compatibility

Tapestry Integration

The Template

Java Implementation

Angular Integration

The Template

The JavaScript

Download List (0)

Dependencies:

List of Components

Navigation

Forms

Tables

Blocks

Site Utilities

Editorial

eCommerce