Dynamic Drive sitesinde geçenlerde güzel bir javascript ile karşılaştım. Çok hoşuma gitti ve sizlerle de paylaşmak istedim. Dynamic Drive’deki sayfasına buradan ulaşabilirsiniz.
Bu logoyu sayfanıza direk olarak html kodlarıyla da ekleyebilirsiniz tabi ki ama bu Javascript ile eklediğiniz de giriş ve çıkış efekti verebiliyorsunuz. İsterseniz logonun belirli bir süre görünmesini sonra kaybolmasını sağlayabilir ya da sürekli kalmasını sağlayabilirsiniz. Logoyu OpenCart Türkiye sitesinde kullanıyorum. Siteyi ziyaret ederek inceleyebilirsiniz.
Uzatmadan kurulum ve ayarlara geçelim.
Kurulumu son derece basit eklemek istediğiniz sayfanın <head></head> tagları arasına aşağıdaki kodları eklemeniz yeterli.
[code lang="js"]<script type="text/javascript" src="http://siteadresiniz/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://siteadresiniz/js/staticlogo.js"></script>[/code]
Bu javascript jquery kullandığı için jquery kaynak dosyasını da kullanmamız gerekli. Aksi taktir de çalışmayacaktır.
Ayarlarımızı staticlogo.js dosyasından yapacağız. Dosyayı metin editörü ile açınız(Tavsiyem gelişmiş bir editör olan NotePad++ kullanmanız). Ayarları dosyayı açtığınızda en üste bulunan şu kısımdan yapacağız.
[code lang="js"]var ddsitelogo={
setting: {orientation:2, visibleduration:10000, fadeduration:[1000, 1000]},
offsets: {x:0, y:0},
logoHTML: '<img src="image/turkiye.png" title="OpenCart Türkiye" style="width:77px; height:77px; border:0" />',[/code]
setting kısmında bulunan orientation:2 site deki konumunu belirliyor. Buraya 1 den 4 e kadar değer verebilirsiniz.
1 değeri logoyu sitenin üstünde sol köşeye, 2 değeri logoyu sitenin üstünde sağ köşeye yaslar.
3 değeri logoyu sitenin altında sol köşeye, 4 değeri logoyu sitenin altında sağ köşeye yaslar.
visibleduration:10000 değeri görüneceği süreyi belirler. Sıfır yaparsanız süreli görünür.
fadeduration:[1000, 1000] değerleri giriş ve çıkış efekti süresini belirler. İlk 1000 değeri giriş ikinci 1000 değeri ise çıkış süresidir. visibleduration değerini sıfır olarak girdiğiniz de ikinci değerin bir anlamı(işlevi) yoktur.
Girdiğiniz süre değerleri milisaniye cinsinden dir. örn: 1000=1 sn
offsets: {x:0, y:0} değerleri logoyu yasladığınız yöne göre yukarı ve aşağıya doğru oynamanızı sağlar.
logoHTML: kısmında ise logo dosyanızın yolunu belirliyorsunuz.
Gerekli dosyaları buradan indirebilirsiniz: Static Logo
İçerisinde jquery-1.3.2.js, staticlogo.js, logo olarak kullanmanız için Türk bayrağı ve örnek bir sayfa mevcuttur.
merhabalar;
opencartta ilk kodları nereye kopyalamamız lazım acaba…
catalog/view/theme/tema/template/common/header.tpl dosyasında head tagının üzerine eklemelisiniz.
cevap için teşekkürler, son bi soru; js klasöründekileri nereye kopyalıycam
OpenCart ile ilgili javascript dosyaları da bu klasörde bulunuyor buraya atabilirsin. Ayrıca OpenCart da jquery-x.x.x.js dosyası mevcut onu atmana gerek yok.
Pingback: Sayfanızla Beraber Aşağıya Doğru Kayan Bayrak | Bahanesi BoL Günlük