Opencart için farklı bir resim gösterimi (jQuery lightbox)

Merhaba, Opencart'ın kendi thickbox resim büyütmesinden memnun olmayanlar için alternatif jQuery lightbox efekti nasıl eklenir / yapılır anlatmak istedim.

Öncelikle benim kurmak için tercih ettiğim Code Canyon adresinde ki jQuery Lightbox Evolution satın alıp indirebilirsiniz. Benim anlatımım bu lightbox üzerinden olacak fakat aynı adımları izleyerek istediğiniz bir free lightbox seçeneğini de sitenize yerleştirebilirsiniz.

Örnek site: TopiX Goldmen

1- Öncelikle herhangi bir sorun yaşanmaması için jQuery sitesinden son sürüm jQuery indiriyoruz. Paketin içinden çıkan jquery dosyasında sitenizdeki diğer eklentiler ile çakışma yapabiliyor.

2- İster kolaylık olması için anadizine javascript klasörü açarak dosyaları sitenize yükleyin isterseniz catalog/view/javascript/ klasörüne paket içindekilerini yükleyin. Paketin içindeki jquery.min.js dosyasını silip jQuery adresinden indirdiğiniz dosya ile değiştirebilirsiniz.

3- Temanızın klasörüne gidin ve template/common/header.tpl içine " head "ten hemen sonra

< script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.4.4.min.js" > kodunu ekleyin. (jquery-1.4.4.min.js ismi şuanki son sürüm sizin jQuery sitesinden indirdiğiniz başka ise ismi o şekilde değiştirin.)

Daha sonra lightbox stil dosyalarını ve jQuerynin sorunsuz çalışması için devamına aşağıki kodu yapıştırın.

< link rel="stylesheet" type="text/css" href="javascript/lightbox/themes/default/jquery.lightbox.css" />

< script type="text/javascript" src="javascript/lightbox/jquery.lightbox.js" >script >

< script type="text/javascript" >

$(document).ready(function(){

$('.lightbox').lightbox();

});

script >

Not: buradaki src= kodunda belirtilen adres site anadizinden yola çıkılarak yazılmıştır. catalog/view/ içindeki javascript dosyasına yüklediyseniz eğer src="catalog/view/javascript" olarak düzenleyin.

4- tema klasörünüzdeki template/product/product.tpl dosyası içinde class="thickbox" yazan kısımları class="lightbox" olarak değiştirin.

Hepsi bu kadar sorununuz olursa karizmastudio@gmail.com adresine mail atabilirsiniz.