cambiar la forma de como se ven las fotos de los productos

[naghost]

Estoy buscando una forma de cambiar como se ven las fotos de los productos no se que archivo tpl exactamente tendria de modificar estoy buscando un diseño parecido al siguiente:

https://www.zara.com/es/es/mujer/chaquetas/blasier-estampada-fluida-doble-botonadura-c358002p4612512.html

en vez del slider que me viene por defecto en prestashop un saludo cualquier sujerencia es bienvenida

[naghost]

vale creo que voy sacando algo en claro

este es el codigo del tpl que se encarga de gestionar las imagenes de los productos(si no me equivoco)

 

{**
 * 2007-2016 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <[email protected]>
 * @copyright 2007-2016 PrestaShop SA
 * @license   http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
<div class="modal fade js-product-images-modal" id="product-modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        {assign var=imagesCount value=$product.images|count}
        <aside id="thumbnails" class="thumbnails js-thumbnails text-xs-center">
          {block name='product_images'}
            <div class="js-modal-mask mask {if $imagesCount <= 5} nomargin {/if}">
              <ul class="product-images js-modal-product-images">
                {foreach from=$product.images item=image}
                  <li class="thumb-container">
                    <img data-image-large-src="{$image.large.url}" class="thumb js-modal-thumb" src="{$image.bySize.medium_01oslo.url}" alt="{$image.legend}" title="{$image.legend}" width="{$image.bySize.medium_01oslo.width}" height="{$image.bySize.medium_01oslo.height}" itemprop="image">
                  </li>
                {/foreach}
              </ul>
            </div>
          {/block}
          {if $imagesCount > 5}
            <div class="arrows js-modal-arrows">
              <i class="material-icons arrow-up js-modal-arrow-up"></i>
              <i class="material-icons arrow-down js-modal-arrow-down"></i>
            </div>
          {/if}
        </aside>
        <figure>
          <img class="js-modal-product-cover product-cover-modal" width="{$product.cover.bySize.thickbox_01oslo.width}" height="{$product.cover.bySize.thickbox_01oslo.height}" src="{$product.cover.bySize.thickbox_01oslo.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" itemprop="image">
          <figcaption class="image-caption">
            {block name='product_description_short'}
              <div id="product-description-short" itemprop="description">{$product.description_short nofilter}</div>
            {/block}
          </figcaption>
        </figure>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
 

creo que las imagenes las trata como una especie de array la clave seria saber como usa las variables y una vez sabiendo eso puedo modificar a mi antojo las imagenes a ver si alguien puede ayudarme un poquito esta es la web sobre la que estoy trabajando

 

http://wsreina.tk/es/inicio/11-1-anita-competiciontahitian-black-pearl.html#/18-talla-35

 

con la plantilla oslo01

[naghost]

hago otro up para ver si alguien me puede ayudar..

 

el archivo que subi hace un momento no es el que gestionaba lo que queria es el siguiente

 

 

<div class="images-container">
  {block name='product_cover'}
    <div class="product-cover">
      <img class="js-qv-product-cover" src="{$product.cover.bySize.large_01oslo.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" width="{$product.cover.bySize.large_01oslo.width}" height="{$product.cover.bySize.large_01oslo.height}" itemprop="image">
      <div class="layer hidden-sm-down" data-toggle="modal" data-target="#product-modal">
      </div>
    </div>
  {/block}

  {block name='product_images'}
    <div class="js-qv-mask mask">
      <ul class="product-images js-qv-product-images">
        {foreach from=$product.images item=image}
          <li class="thumb-container">
            <img
              class="thumb js-thumb {if $image.id_image == $product.cover.id_image} selected {/if}"
              data-image-medium-src="{$image.bySize.medium_01oslo.url}"
              data-image-large-src="{$image.bySize.large_01oslo.url}"
              src="{$image.bySize.medium_01oslo.url}"
              alt="{$image.legend}"
              title="{$image.legend}"
              width="{$product.cover.bySize.medium_01oslo.width}"
              height="{$product.cover.bySize.medium_01oslo.height}"
              itemprop="image"
            >
          </li>
        {/foreach}
      </ul>
    </div>
  {/block}
</div>
 

 

llego a la misma conclusion es un bucle foreach que itera un elemento pero no se como hacer para iterarlo de forma manual si alguien pudiera ayudarme estaria muy agradecido una vez mas...

[mbhmarck]

Lo que veo de Zara si no me equivoco es un idex scroll

[naghost]

Lo que veo de Zara si no me equivoco es un idex scroll

idex scroll  es la primera vez que escucho eso

he estado mirando por internet y no me aparece nada sobre ello =S