Fórum OpenCart Brasil

Enviado: **30 Nov 2011, 12:10**

Funcionou certinho, realmente o caminho estava errado, com uma pasta a mais.

façam o que o Aleflorida disse:

''Altere estas linhas:

<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/jqzoom/css/jquery.jqzoom.css" />
<script src="catalog/view/javascript/jquery/jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>

Para:

<link rel="stylesheet" type="text/css" href="catalog/view/jquery/jqzoom/css/jquery.jqzoom.css" />
<script src="catalog/view/jquery/jqzoom/js/jquery.jqzoom-core.js" type="text/javascript"></script>
''

Porem a foto principal ficou estatica, alguem sabe como faz para ao passar o mouse em cima da subfotos em baixo, ele muda automaticamente na foto principal?

até logo

Boa noite galera!

Eu consegui fazer funcionar editando direto os arquivos...
Porem não consegui com o vQmod, criei o arquivo xml joguei la na pasta e nada!

Alguem poderia explicar como criar o arquivo ou então disponibilizar para download???

Obrigado

Muito boa noite à todos.

Eu gostaria de dar a minha humilde parabenização ao Manoel.

Procurei este recurso, segui os passos e funcionou perfeitamente.

Parabéns Manoel, é de pessoas inteligentes como você que o mundo precisa.

Uma pequena obervação:

Será que é possivel fazer algo em cima desse código para aplicar nas outras fotos também?
Pois no meu open as outras fotos abrem em uma página sozinha, não gostei muito deste modelo tradicional do Opencart.

No mais, meus parabéns!

Olá Davi,

Então, eu fiz o seguinte pra funcionar com o vqmod.
Coloquei o plugin do jquery que o Manoel disponibilizou seguindo a estrutura de pastas.
No arquivo "catalog/view/theme/SEU_TEMA/template/product/product.tpl" acima da linha:

Código: Selecionar todos

<script type="text/javascript"><!--
$('.fancybox').fancybox({cyclic: true});
//--></script>

Adicionei em cima:

Código: Selecionar todos

<!-- marcacao vqmod zoom produto -->

Tive que usar esse artifício pois o vqmod não estava encontrando o código.
Depois de criar o xml, coloquei na pasta vqmod/xml e tudo funcionou direitinho... rsss.

Segue meu xml.

Código: Selecionar todos

<?xml version="1.0" encoding="UTF-8"?>
<modification>
	<id>Efeito de Zoom na imagem principal.</id>
	<version>1.0</version>
	<vqmver>2.1.5</vqmver>
	<author>Manoel Vidal</author>
	<file name="catalog/view/theme/testes/template/product/product.tpl">
		<operation>
			<search position="replace"><![CDATA[<a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="fancybox" rel="fancybox"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" /></a>]]></search>
			<add><![CDATA[<a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="jqzoom"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" /></a>]]></add>
		</operation>
                <operation>
                    <search position="before"><![CDATA[<!-- marcacao vqmod zoom produto -->]]></search>
                    <add><![CDATA[<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/jqzoom/css/jquery.jqzoom.css" />
                        <script src="catalog/view/javascript/jquery/jqzoom/js/jquery.jqzoom-core-pack.js" type="text/javascript"></script>
                        <script type="text/javascript">
                           $(document).ready(function(){
                              $(".jqzoom").jqzoom({
                                 showEffect: 'fadein',
                                 hideEffect: 'fadeout',
                                 fadeoutSpeed: 'slow',
                                 title: true,
                                 lens: true,
                                 zoomWidth: 350,
                                 zoomHeight: 350,
                                 preloadText: 'Carregando'
                              });
                           });
                        </script>]]></add>
                </operation>
        </file>
</modification>

Na opção "file name" altera para o caminho correto para o arquivo product.tpl.

Manoel, parabéns pelo tutorial e tudo que tem contribuido para a comunidade.

Abs!

Olá lyon.

Parabéns pela contribuição

Oi o Arquivo no exemplo inicial ta errado, não é jquery.jqzoom-core-pack sim jquery.jqzoom-core

Enviado: **01 Jan 2012, 05:36**

Olá amigos. Desde já um Feliz Ano novo a todos, desejo um ano de sucesso, conquistas e realizações.

Tentei fazer os primeiros passos que o Manoel ensinou, porem não tive sucesso.
Para facilitar para todos tive uma ideia.

Depois de tudo corrigido se alguém puder, disponibiliza o arquivo (product.tpl) ja editado que dai é só agente baixar e substituir.
Obrigado a todos vocês que tem se dedicado em nos ajudar.
Abraços.

Enviado: **16 Jan 2012, 15:59**

Obrigado cara, precisava exatamente disso.
Funcionou perfeito aqui!
Só gostaria de saber se é possível alterar o tamanho da visualização... ao invés de ser este quadrado, deixar em 640x480px... há a possibilidade?
Desde já agradeço por compartilhar.

_____________________________________________________________
EDIT: Usei o site http://jsbeautifier.org/ para descompactar o javascript e consegui alterar o código... Obrigado.

Enviado: **18 Jan 2012, 14:23**

Aqui só funciono depois que tirei o " <?xml version="1.0" encoding="UTF-8"?> " do inicio do arquivo xml
ralei pra descobrir! kkkkkk

Vlw Manoel e Lyon!

Enviado: **18 Jan 2012, 14:34**

thiibs escreveu:Obrigado cara, precisava exatamente disso.
Funcionou perfeito aqui!
Só gostaria de saber se é possível alterar o tamanho da visualização... ao invés de ser este quadrado, deixar em 640x480px... há a possibilidade?
Desde já agradeço por compartilhar.
_____________________________________________________________
EDIT: Usei o site http://jsbeautifier.org/ para descompactar o javascript e consegui alterar o código... Obrigado.

Substitui o código

Código: Selecionar todos

    <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/jqzoom/css/jquery.jqzoom.css" />
                            <script src="catalog/view/javascript/jquery/jqzoom/js/jquery.jqzoom-core-pack.js" type="text/javascript"></script>
                            <script type="text/javascript">
                               $(document).ready(function(){
                                  $(".jqzoom").jqzoom({
                                     showEffect: 'fadein',
                                     hideEffect: 'fadeout',
                                     fadeoutSpeed: 'slow',
                                     title: true,
                                     lens: true,
                                     zoomWidth: 350,
                                     zoomHeight: 350,
                                     preloadText: 'Carregando'
                                  });
                               });
                            </script>

Por...

Código: Selecionar todos

    <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/jqzoom/css/jquery.jqzoom.css" />
    <script src="catalog/view/javascript/jquery/jqzoom/js/jquery.jqzoom-core-pack.js" type="text/javascript"></script>
    <script type="text/javascript">
       $(document).ready(function(){
          $(".jqzoom").jqzoom({
             showEffect: 'fadein',
             hideEffect: 'fadeout',
             fadeoutSpeed: 'slow',
             title: true,
             lens: true,
             zoomWidth: 640,
             zoomHeight: 480,
             preloadText: 'Carregando'
          });
       });
    </script>,

Porem fiz o teste aqui não ficou muito legal, mais da uma olhada ai no que vc acha...
Caso queria outro tamanho é só alterar os valores de " zoomWidth: " e " zoomHeight: "

Fórum OpenCart Brasil

[TUTORIAL] Efeito zoom na foto principal do produto - 11/12

Re: [TUTORIAL] Efeito zoom na foto principal do produto

Re: [TUTORIAL] Efeito zoom na foto principal do produto - 11

Re: [TUTORIAL] Efeito zoom na foto principal do produto - 11

Re: [TUTORIAL] Efeito zoom na foto principal do produto - 11

Re: [TUTORIAL] Efeito zoom na foto principal do produto - 11

Re: [TUTORIAL] Efeito zoom na foto principal do produto - 11

Re: [TUTORIAL] Efeito zoom na foto principal do produto - 11

Re: [TUTORIAL] Efeito zoom na foto principal do produto - 11

Re: [TUTORIAL] Efeito zoom na foto principal do produto - 11

Re: [TUTORIAL] Efeito zoom na foto principal do produto - 11