Product images — switching between them — product image gallery

[PrestaRob]

Hello,

 

is there any chance to switch between product images like it's possible in ordinary image galleries? I mean when you click on the thumbnail and enjoying full-size image? (previous & next buttons, switching with arrows — as seen in Lightbox galleries)

 

Product with images example.

 

Below is my image block code from product.tpl:

<div id="image-block">
			{if $have_image}
				{if $jqZoomEnabled}
					<a id="zoom1" rel="position: 'inside' , showTitle: false, adjustX:0, adjustY:0" class="cloud-zoom" href="{$link->getImageLink($product->link_rewrite, $cover.id_image,'thickbox')}" style="position: relative; display: block; width:106px!important; height:106px!important;">
						<img alt="{$product->name|escape:'htmlall':'UTF-8'}" width="106" height="106"  title="{$product->name|escape:'htmlall':'UTF-8'}" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" style="display: block ; z-index:2; opacity:0; width:106px!important; height:106px!important;">
						<img alt="{$product->name|escape:'htmlall':'UTF-8'}" id="bigpic" class="picpic" width="304" height="388" title="{$product->name|escape:'htmlall':'UTF-8'}" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" style="display: block; margin-top:0px; margin-left:0; top:-270px; left:-186px; position:absolute; z-index:1">
					</a>
				{else}
					<a href="{$link->getImageLink($product->link_rewrite, $cover.id_image)}" class="thickbox" title="{$product->name|escape:'htmlall':'UTF-8'}">
						<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" id="bigpic" /></a>
				{/if}
				{else}
					<a href="{$link->getImageLink($product->link_rewrite, $cover.id_image)}" class="thickbox" title=" $product->name|escape:'htmlall':'UTF-8'}">
						<img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" alt="" id="bigpic" title="{$product->name|escape:'htmlall':'UTF-8'}" />
					</a>
				{/if}
		</div> 
		{if isset($images) && count($images) > 0}
			<!-- thumbnails -->
			<div id="views_block" {if isset($images) && count($images) < 2}class="hidden"{/if}>
				<div class = 'container'>
					<div class = 'iosSlider'>
						<div class = 'slider'>
                            {if isset($images)}
                                {foreach from=$images item=image name=thumbnails}
									{assign var=imageIds value="`$product->id`-`$image.id_image`"}
									<div id='item'>
										 {if $jqZoomEnabled}
											<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'zoom')}" class="cloud-zoom-gallery" title="{$image.legend|htmlspecialchars}" rel="useZoom: 'zoom1', smallImage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large')}'">
												<img src="{$link->getImageLink($product->link_rewrite, $imageIds, 'larg-mini')}" alt="{$image.legend|htmlspecialchars}"/>
											</a>
										{else}
											<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
												<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'larg-mini')}" alt="{$image.legend|htmlspecialchars}"  />
											</a>
										{/if} 
									</div>
                                {/foreach}
                            {/if}
                        </div>
						{if isset($images) && count($images) > 3}	<div class = 'next2'></div>{/if}
						{if isset($images) && count($images) > 3}	<div class = 'prev2 unselectable2'></div>{/if}
                    </div>
                </div>
			</div>
		{/if}
		{if isset($images) && count($images) > 1}
			<p class="resetimg"  style="display:none;">
				<span id="wrapResetImages" style="display: none;">
					<img src="{$img_dir}icon/cancel_11x13.gif" alt="{l s='Cancel'}" width="11" height="13"/>
					<a id="resetImages" href="{$link->getProductLink($product)}" onclick="$('span#wrapResetImages').hide('slow');return (false);">{l s='Display all pictures'}</a>
				</span>
			</p>
		{/if}
	</div>

Thanks in advance!