[TUTORIAL] Fancybox no lugar do Thickbox no OpenCart
Enviado: 05 Nov 2010, 09:45
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:
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
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
5 - SUBSTITUIR POR:
<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" />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
