Vamos a realizar la implementación sobre el tema que trae Prestashop por defecto, situado en ‘themes/prestashop’

  1. Nos vamos a ‘http://www.shadowbox-js.com/’ y nos descargamos los ficheros con la configuración según nuestras necesidades.
  2. Una vez bajado, dejamos los ficheros en el directorio ‘js/jquery’ donde hemos instalado la tienda.
  3. Abrimos el fichero ‘header.tpl’ y agregamos
    <link href="{$content_dir}js/jquery/shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" src="{$content_dir}js/jquery/shadowbox-3.0.3/shadowbox.js"></script>
    <script type="text/javascript">window.onload = Shadowbox.init;</script>
    
  4. Después del siguiente código en la línea (31)
    <script type="text/javascript" src="{$content_dir}js/jquery/jquery.hotkeys-0.7.8-packed.js"></script>
    
  5. Abrimos el fichero “product.tpl” del tema y comentamos la línea (12):
    var jqZoomEnabled = {if $jqZoomEnabled}true{else}false{/if};
  6. Reemplazamos la línea (102):
    <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" {if $jqZoomEnabled}class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox')}"{else} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" {/if} id="bigpic"/>

    Por:

    <a href="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" rel="shadowbox[galerieproduit]"><img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" /></a>
  7. Reemplazamos la línea (ligne 116) :
    <li id="thumbnail_{$image.id_image}">
    <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" title="{$image.legend|htmlspecialchars}">
    <img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
    </a>
    </li>

    Por :

    <li id="thumbnail_{$image.id_image}">
    <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="shadowbox[galerieproduit]" title="{$image.legend|htmlspecialchars}">
    <img id="thumb_{$image.id_image}" rel="shadowbox[nomdelagalerie]" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
    </a>
    </li>
  8. Abrimos el fichero “product.php” , situado en el raíz de la tienda y comentamos la línea (79):
    $css_files = array(
    __PS_BASE_URI__.'css/thickbox.css' => 'screen'
    );
  9. Comentamos también la linea (85):
    __PS_BASE_URI__.'js/jquery/thickbox-modified.js',
  10. Comentamos la línea (93)
    /* jqZoom */
    $jqZoomEnabled = (Configuration::get('PS_DISPLAY_JQZOOM') == 1);
    if ($jqZoomEnabled)
    {
    $js_files[] = __PS_BASE_URI__.'js/jquery/jquery.jqzoom.js';
    $css_files[__PS_BASE_URI__.'css/jqzoom.css'] = 'screen';
    }