{{if count($aFiles) > 0}}
	<img id="product_image" src="{{$config.dir_files}}400/{{$aFiles[0].sFileName}}" alt="{{$aFile.sDescription}}" title="{{$aFile.sDescription}}" data-zoom-image="{{$config.dir_files}}{{$config.max_image_size_full}}/{{$aFiles[0].sFileName}}" />
	<div id="gallery_list">
		{{foreach from=$aFiles item=aFile}}
			<a href="#" data-image="{{$config.dir_files}}400/{{$aFile.sFileName}}" data-zoom-image="{{$config.dir_files}}{{$config.max_image_size_full}}/{{$aFile.sFileName}}" class="elevatezoom-gallery {{if $aFile@iteration == 1}}active{{/if}}"> <img src="{{$config.dir_files}}100/{{$aFile.sFileName}}" alt="{{$aFile.sDescription}}" title="{{$aFile.sDescription}}" /> </a>
		{{/foreach}}
	</div>

	<script type="text/javascript">
	$(document).ready(function(){
		//initiate the plugin and pass the id of the div containing gallery images
		$("#product_image").elevateZoom({gallery:'gallery_list', cursor: 'pointer', galleryActiveClass: 'active', imageCrossfade: true, zoomWindowFadeIn: 500, zoomWindowFadeOut: 500, lensFadeIn: 500, lensFadeOut: 500, scrollZoom : true,  zoomType : "lens", lensShape : "round", lensSize : 200 });

		$("#product_image").bind("click", function(e){
			var ez = $('#product_image').data('elevateZoom');
			$list = $($.map(ez.getGalleryList(false), function(el){return $(el);}));
			$.colorbox({href: $('#gallery_list a.active').attr('data-zoom-image'), title: $('#gallery_list a.active img').attr('title'), relatedOptions: $list });
			return false;
		});
	});
	</script>
{{/if}}