JValenzuela Posted February 24, 2012 Share Posted February 24, 2012 Buenos días, Estoy tratando de cambiar el zoom de prestashop por defecto por el Cloud zoom: http://www.professor.../cloud-zoom.htm He conseguido que funcione pero las miniaturas no me funcionan, no se pasan al cuadrado grande y al abrirse en thinckbox no se ven. He usado el siguiente código del foro en ingles, OK here are steps you need to do, but before make backup of files you are changing. First download latest version of cloud zoom then unpack(unzip) file. You will see two js files and one css file. Copy cloud-zoom.1.0.2.min.js to your js/jquery folder and open header.tpl in your theme folder. Add following line next to rest of script calls. <script type="text/javascript" src="{$content_dir}js/jquery/cloud-zoom.1.0.2.min.js"></script> Then copy code from cloud-zoom.css to end of your theme global.css. Next step is to change code in product.tpl also in your theme folder. Find <!-- product img--> <div id="image-block"> {if $have_image} <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"/> {else} <img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" /> {/if} </div> and replace it with <!-- product img--> <div id="image-block"> {if $have_image} {if $jqZoomEnabled}<a id="zoom1" rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4" class="cloud-zoom" href="{$link->getImageLink($product->link_rewrite, $cover.id_image,'thickbox')}" style="position: relative; display: block;"> <img alt="{$product->name|escape:'htmlall':'UTF-8'}" title="{$product->name|escape:'htmlall':'UTF-8'}" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" style="display: block;"> </a> {else} <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" id="bigpic"/> {/if} {else} <img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" /> {/if} </div> Next step is to enable change of big image when thumbnail is clicked (this is different from default - hover). Change this code <div id="thumbs_list"> <ul style="width: {math equation="width * nbImages" width=80 nbImages=$images|@count}px" id="thumbs_list_frame"> {foreach from=$images item=image name=thumbnails} {assign var=imageIds value=`$product->id`-`$image.id_image`} <li id="thumbnail_{$image.id_image}"> <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" 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, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" /> </a> </li> {/foreach} </ul> </div> to {if $jqZoomEnabled} <div id="thumbs_list"> <ul id="thumbs_list_frame"> {foreach from=$images item=image name=thumbnails} {assign var=imageIds value=`$product->id`-`$image.id_image`} <li id="thumbnail_{$image.id_image}"> <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" 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, 'medium')}" alt="{$image.legend|htmlspecialchars}"/></a> </li> {/foreach} </ul> </div> {else} <div id="thumbs_list"> <ul style="width: {math equation="width * nbImages" width=80 nbImages=$images|@count}px" id="thumbs_list_frame"> {foreach from=$images item=image name=thumbnails} {assign var=imageIds value=`$product->id`-`$image.id_image`} <li id="thumbnail_{$image.id_image}"> <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" 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, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" /> </a> </li> {/foreach} </ul> </div> {/if} That is it. Almost forgot - you need to enable jqzoom in Back Office >> Preferences >> Products to make this work. If you have any trouble with code let me know. alguna opinión? 1 Link to comment Share on other sites More sharing options...
PrestashopTrackglobe Posted March 9, 2012 Share Posted March 9, 2012 Yo estoy en las mismas, has podido solucionarlo finalmente de alguna forma¿¿ Link to comment Share on other sites More sharing options...
PrestashopTrackglobe Posted March 9, 2012 Share Posted March 9, 2012 Ya esta solucionado. Simplemente era que llamabamos en un lado a zoom1 y en otro a zoom2 y tiene que ser en ambos igual. Un saludo. Link to comment Share on other sites More sharing options...
Vilas Posted October 6, 2012 Share Posted October 6, 2012 Buenos días, Estoy tratando de cambiar el zoom de prestashop por defecto por el Cloud zoom: http://www.professor.../cloud-zoom.htm He conseguido que funcione pero las miniaturas no me funcionan, no se pasan al cuadrado grande y al abrirse en thinckbox no se ven. He usado el siguiente código del foro en ingles, OK here are steps you need to do, but before make backup of files you are changing. First download latest version of cloud zoom then unpack(unzip) file. You will see two js files and one css file. Copy cloud-zoom.1.0.2.min.js to your js/jquery folder and open header.tpl in your theme folder. Add following line next to rest of script calls. <script type="text/javascript" src="{$content_dir}js/jquery/cloud-zoom.1.0.2.min.js"></script> Then copy code from cloud-zoom.css to end of your theme global.css. Next step is to change code in product.tpl also in your theme folder. Find <!-- product img--> <div id="image-block"> {if $have_image} <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"/> {else} <img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" /> {/if} </div> and replace it with <!-- product img--> <div id="image-block"> {if $have_image} {if $jqZoomEnabled}<a id="zoom1" rel="position: 'inside' , showTitle: false, adjustX:-4, adjustY:-4" class="cloud-zoom" href="{$link->getImageLink($product->link_rewrite, $cover.id_image,'thickbox')}" style="position: relative; display: block;"> <img alt="{$product->name|escape:'htmlall':'UTF-8'}" title="{$product->name|escape:'htmlall':'UTF-8'}" src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" style="display: block;"> </a> {else} <img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large')}" id="bigpic"/> {/if} {else} <img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" /> {/if} </div> Next step is to enable change of big image when thumbnail is clicked (this is different from default - hover). Change this code <div id="thumbs_list"> <ul style="width: {math equation="width * nbImages" width=80 nbImages=$images|@count}px" id="thumbs_list_frame"> {foreach from=$images item=image name=thumbnails} {assign var=imageIds value=`$product->id`-`$image.id_image`} <li id="thumbnail_{$image.id_image}"> <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" 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, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" /> </a> </li> {/foreach} </ul> </div> to {if $jqZoomEnabled} <div id="thumbs_list"> <ul id="thumbs_list_frame"> {foreach from=$images item=image name=thumbnails} {assign var=imageIds value=`$product->id`-`$image.id_image`} <li id="thumbnail_{$image.id_image}"> <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" 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, 'medium')}" alt="{$image.legend|htmlspecialchars}"/></a> </li> {/foreach} </ul> </div> {else} <div id="thumbs_list"> <ul style="width: {math equation="width * nbImages" width=80 nbImages=$images|@count}px" id="thumbs_list_frame"> {foreach from=$images item=image name=thumbnails} {assign var=imageIds value=`$product->id`-`$image.id_image`} <li id="thumbnail_{$image.id_image}"> <a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" 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, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" /> </a> </li> {/foreach} </ul> </div> {/if} That is it. Almost forgot - you need to enable jqzoom in Back Office >> Preferences >> Products to make this work. If you have any trouble with code let me know. alguna opinión? Hi, Thanks for details. I like to know how to add other effects to this script? Like big zoom etc.. Regards Link to comment Share on other sites More sharing options...
rakepl Posted August 3, 2013 Share Posted August 3, 2013 Hi Heiser_ do you have modyfication for PS 1.4.10.0 ? Thank you Link to comment Share on other sites More sharing options...
Recommended Posts