mirac
OpenCart-TR
- Katılım
- 7 Şub 2010
- Mesajlar
- 1,383
- Tepkime puanı
- 0
- Puanları
- 36
- Yaş
- 43
- Konum
- Beykoz____
- Web sitesi
- www.notebook-cantasi.com
Kullanıcılarınız sitenizdeki resimleri büyük boy görüntülemek istediklerinde sayfa kararır ve resim ön plana gelir.. Diğer resimlere bakmak istediklerinde mecburen o resmi kapatıp diğer resme tıklamaları lazım..
Bunu ortadan kaldırmak ve birazcıkta efekt katmak için FancyBox'u kullanmanız yeterli..
Öncelikle FancyBox'u indirelim.. Sıkıştırılmış paket içindeki fancybox klasörünü sitemizin "catalog/view/javascript/jquery" dizinine atalım..
catalog/view/theme/KULLANACAĞINIZ TEMA/template/common/header.tpl dosyasını açalım ve alttaki kodları bulup değiştirelim..
Bul..
Bu kodla değiştir..
İşlem bitince sitenizdeki görüntüler bu şekilde görünecektir..
Bunu ortadan kaldırmak ve birazcıkta efekt katmak için FancyBox'u kullanmanız yeterli..
Öncelikle FancyBox'u indirelim.. Sıkıştırılmış paket içindeki fancybox klasörünü sitemizin "catalog/view/javascript/jquery" dizinine atalım..
catalog/view/theme/KULLANACAĞINIZ TEMA/template/common/header.tpl dosyasını açalım ve alttaki kodları bulup değiştirelim..
Bul..
Kod:
<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" />
Bu kodla değiştir..
Kod:
<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.0.pack.js"></script>
<link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/fancybox/jquery.fancybox-1.3.0.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>
İşlem bitince sitenizdeki görüntüler bu şekilde görünecektir..