Fórum OpenCart Brasil

[Nyux]

1 - Para instalar, 1o baixe a ultima versao do fancybox (atualmente é a 1.3.3) no link abaixo:

http://code.google.com/p/fancybox/downloads/list

2 - descompacte a pasta "jquery.fancybox-1.3.3" dentro dessa pasta tem uma de example e outra ''fancybox'' copie essa pasta para o seu site por FTP no seguinte local:
"catalog/view/javascript/jquery/"

Feito isso é para ficar assim o caminho:
catalog/view/javascript/jquery/fancybox/*.*

nesta pasta contem 4 .js e 1 .css

3 - EDITE: catalog/view/theme/SEUTEMA/template/common/header.tpl

4 - ENCONTRE:

Código: Selecionar todos

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

5 - SUBSTITUIR POR:

Código: Selecionar todos

<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.3.pack.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.3.css" media="screen" />
<script type="text/javascript">
$(document).ready(function() {
   $("a.thickbox").attr('rel','group');
   $("a.thickbox img").parent().fancybox({
      'overlayShow' : true,
      'speedIn' : 600,
      'speedOut' : 500,
      'transitionIn': 'elastic',
      'transitionOut': 'elastic',
      'easingIn' : 'easeOutBack',
      'easingOut' : 'easeInBack'
   });       
});
</script>

Pronto agora atualize o navegador de internet e clique na imagem do produto.

Lembrando que para ele avançar na img do produto tem que ter mais de 1 imagem.

No caso do meu site que alterei eu customizei as imagen trocando de cor e formato.

para isso eu alterei as seguintes imagens:
fancybox.png
fancy_title_right.png
fancy_title_main.png
fancy_title_left.png
fancybox-x.png
fancy_nav_right.png
fancy_nav_left.png
fancy_close.png

[Nyux]

Exemplo de funcionamento na loja http://www.judaicamisetas.com.br

[Manoel Vidal]

Olá Nyux.

Tópico mudado para a área de contribuições como tutorial, pois acredito ser de utilidade para todos.

Parabéns!

[acesbrasil]

Foi fantástica essa contribuição, muito mais lindo o Fancybox.

Alguém saberia passas as dicas de configuração? Pois vejo que no código é possivel colocar algumas opções de entrada e saida da animação e etc