
<div id="thumb-slider" class="thumb-vertical-outer">
	<ul class="thumb-vertical">
		{% for key,image in images %}
		<li class="image-additional">
			<a data-index="{{key}}" class="img thumbnail" data-image="{{image.popup}}" title="{{ heading_title }}">
				<img  class="lazyload"  data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{ image.thumb }}" title="{{ heading_title }}" alt="{{ heading_title }}" />
			</a>
		</li>
		{% endfor %}
		
	</ul>

</div>
{#==== Gallery - Large image  ==== #}
<div class="large-image  {{class_honizol}}">
	<img itemprop="image" class="product-image-zoom lazyload" data-sizes="auto" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="{{popup}}" data-zoom-image="{{popup}}" title="{{ heading_title }}" alt="{{ heading_title }}" />
	
</div>



<script type="text/javascript"><!--
	$(document).ready(function() {
		var zoomCollection = '.large-image img';
		$( zoomCollection ).elevateZoom({
			//value zoomType (window,inner,lens)
			{% if soconfig.get_settings('product_enablezoom')%}
			zoomType        : "inner",
			{% else %}
			zoomType        :"none",
			{% endif %}
			lensSize    :'250',
			easing:false,
			scrollZoom : true,
			gallery:'thumb-slider',
			cursor: 'pointer',
			galleryActiveClass: "active",
		});
		$(zoomCollection).bind('touchstart', function(){
		    $(zoomCollection).unbind('touchmove');
		});
		
		
		{% if images %}
		$('.large-image img').magnificPopup({
			items: [
			{% for   image in images %}
				{src: '{{image.popup}}'},
			{% endfor %}
			],
			gallery: { enabled: true, preload: [0,2] },
			type: 'image',
			mainClass: 'mfp-fade',
			callbacks: {
				open: function() {
					{% if images %}
						var activeIndex = parseInt($('#thumb-slider .img.active').attr('data-index'));
					{% else %}
						var activeIndex = 0;
					{% endif %}
					var magnificPopup = $.magnificPopup.instance;
					magnificPopup.goTo(activeIndex);
				}
			}

		});
		{% endif %}
		
	});
//--></script>