[Soluzione] Disattivare zoom da immagine principale e thumbnail in pagina prodotto

[Hot Peppers]

• Passo 1

Modifica: Eliminare il riquadro nell'immagine principale dove è scritto: Visualizza ingrandito

File: themes/default-bootstrap/product.tpl

Soluzione: Commentare la seguente riga:

{* <span class="span_link no-print">{l s='View larger'}</span> *}

• Passo 2

Modifica: Disattivare evento che al click ingrandisce immagine principale

File: themes/default-bootstrap/js/product.js

Soluzione: Commentare le seguenti righe:

/* $(document).on('click', '#view_full_size, #image-block', function(e){
$('#views_block .shown').click();
}); */

• Passo 3

Modifica: Disattivare evento che al click ingrandisce immagine thumbnail

File: themes/default-bootstrap/js/product.js

Soluzione: modificare il seguente codice come segue:

da

<li id="thumbnail_{$image.id_image}"{if $smarty.foreach.thumbnails.last} class="last"{/if}>
<a{if $jqZoomEnabled && $have_image && !$content_only} href="javascript:void(0);" rel="{literal}[spam-filter]/literal}gallery: 'gal1', smallimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'large_default')|escape:'html':'UTF-8'}',largeimage: '{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}'{literal[spam-filter]{/literal}" {else} href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html':'UTF-8'}" data-fancybox-group="other-views" class="fancybox{if $image.id_image == $cover.id_image} shown {/if}"{/if} title="{$imageTitle}">
<img class="img-responsive" id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'cart_default')|escape:'html':'UTF-8'}" alt="{$imageTitle}" title="{$imageTitle}" height="{$cartSize.height}" width="{$cartSize.width}" itemprop="image" />
</a>
</li>

a

<li id="thumbnail_{$image.id_image}">                      
<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')}" onclick="return false" title="{$image.legend|htmlspecialchars}">
<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium_default')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" /></a></li>

Le modifiche a questo punto potrebbero bastare, ma se come me ci tenete ai dettagli o particolari della pagina andate avanti

 

• Passo 4

Modifica: Puntatore a freccia invece della mano su immagine principale

File: themes/default-bootstrap/css/product.css

Soluzione: Commentare la riga "cursor: pointer;" del seguente codice 

.pb-left-column #image-block {
  position: relative;
  display: block;
  /* cursor: pointer; */
  padding: 5px;
  border: 1px solid #dbdbdb;
  background: white; }

• Passo 5

Modifica: Puntatore a freccia invece della mano su immagine thumbnail

File: themes/default-bootstrap/css/product.css

Soluzione: Aggiungere cursor:default; nel seguente codice

#thumbs_list li a {
      display: block;
      border: 3px solid white;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
      -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      background: #fbfbfb; 
      cursor:default;}

Ciao a tutti,

Andrea

Edited January 4, 2015 by Hot Peppers (see edit history)

[platini76]

ciao ti segnalo che al punto 3 c'e' un errore

 

Modifica: Disattivare evento che al click ingrandisce immagine thumbnail

File: themes/default-bootstrap/js/product.js

 

il file non è product.js ma product .tpl

Soluzione: modificare il seguente codice come segue:

da

 

 

inoltre sua su chrome sia su safari non mi seleziona correttamente l'immagine da visualizzare sulla finestra...

 

http://shop.mokaor.com/it/cialde-capsule/76-confezione-50-cialde-pausa-caffe.html

Edited February 22, 2016 by platini76 (see edit history)

[mukkapollo]

Ciao Scusate io andando a eliminare la riga, la scritta "visualizza ingrandito" non si toglie!