Aumentar Bloco Do Jqzoom

[higorsilvarosa]

Olá!

 

Eu uso o recurso de JqZoom na minha loja do Prestashop (versão: 1.5.3.1) e preciso aumentar o bloco em que aparece a imagem com o Zoom.

 

Existe uma maneira fácil de eu fazer isso?

 

Em anexo, segue uma imagem com o tamanho atual do bloco do JqZoom em minha loja.

 

Agradeço desde já.

 

Att,

 

Higor

[CarlosC]

Boas,

 

Indique o link da sua loja, dessa for será mais fácil ajudar.

 

Cumps

[higorsilvarosa]

Segue o link: http://glamourmesa.com.br/index.php

Produto de teste: http://glamourmesa.com.br/index.php?id_product=9&controller=product

[Daniel - PrestaBR]

Uma pesquisa no fórum (ou no Google) sempre ajuda bastante.

http://www.prestashop.com/forums/topic/145456-jqzoom-box-size/

http://www.prestashop.com/forums/topic/124129-solved-jqzoom-box-resize-help-please/

http://www.prestashop.com/forums/topic/123021-solved-how-to-increase-jqzoom-size/

http://www.prestashop.com/forums/topic/62942-solvedjqzoom-how-to-change-size-for-zoom-box/

http://www.prestashop.com/forums/topic/42860-solved-can-the-picture-in-jqzoom-be-enlarge/

 

Boa sorte

[Pedro Henrique]

Boa tarde Higor.

 

Para fazer isso é simples, mas primeiro tenha em mente que o que dá a impressão de zoom-in é o tamanho da foto em exibição. Se trocar uma foto de 600x600 por 1200x1200, o quadro de zoom pegará uma porção mais detalhada e menor de sua imagem.

 

Muito bem, entre na pasta js/jquery da raiz de sua loja virtual. Procure pelo arquivo jquery.jqzoom.js e altere a função:

 

$.fn.jqueryzoom = function(options) {

var settings = {

xzoom: 200, //zoomed width default width

yzoom: 200, //zoomed div default width

offset: 10, //zoomed div default offset

position: "right" //zoomed div default position,offset position is to the right of the image

};

 

setando as propriedades desejadas para xzoom e yzoom.

 

Em seguida, acesse o arquivo jqzoom.css dentro da pasta CSS da raiz de sua loja. Altere a classe .zoomdiv e altere as propriedades width e height para o efeito estético desejado do quadro.

 

No mais, só isso. Não esqueça de habilitar o "Forçar compilação" para esvaziar o cache do smarty.

 

Até mais.

[higorsilvarosa]

Pedro Hnrique, obrigado pelo tutorial, mas infelizmente ele não funcionou.

Procurei o arquivo mencionado e o CSS, editei ambos, porém não houve mudança no site.

 

Eu consegui resolver editando um arquivo, dentro do diretório do meu tema, chamado "Product.js". Nesse arquivo tinha a mesma função $.fn.jqueryzoom = function(options)

 

Daniel, obrigado também pelos links.

[Mateus Gandra]

VOCÊ é o cara........

[regboy]

Obrigado Higor. Funcionou para mim também. 

 

Abraços

 

 

Pedro Hnrique, obrigado pelo tutorial, mas infelizmente ele não funcionou.
Procurei o arquivo mencionado e o CSS, editei ambos, porém não houve mudança no site.

Eu consegui resolver editando um arquivo, dentro do diretório do meu tema, chamado "Product.js". Nesse arquivo tinha a mesma função $.fn.jqueryzoom = function(options)

Daniel, obrigado também pelos links.

[llrsle]

Boa tarde camaradas.

 

Estava precisando de uma solução assim, mas esta mudança somente no xzoom e yzoom não me ajudaram muito, pois a imagem que era aumentada, estava no tamanho da imagem que era exibida.

 

Para fazer com que o jqzoom exibisse a imagem grande do produto, tive que alterar dois locais.

Na página product.tpl

 

<span id="view_full_size">

<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'produto')|escape:'html'}"{if $jqZoomEnabled && $have_image} class="jqzoom"{/if} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" id="bigpic" rel="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'thickbox_default')|escape:'html'}" />

 

Inseri o campo "Rel" e a chamada da imagem configurada para o thickbox, que no meu caso é de 1024x1024.

 

no arquivo product.js, mudei a linha

$('#bigpic').attr('rel', $('#bigpic').attr('src').replace('large', 'thickbox'));

 

para

 

$('#bigpic').attr('rel', $('#bigpic').attr('rel').replace('large', 'thickbox'));

 

Assim o thickbox ira usar o atributo "rel" para determinar que imagem será aumentada.

 

Espero ter ajudado alguém.