Yeni Cevap 
 
Konuyu Değerlendir
  • 1 Oy - 5 Ortalama
  • 1
  • 2
  • 3
  • 4
  • 5
Professor Cloud Zoom [Ürün sayfasında Resmin Üzerine Gelindiğinde Önizleme]
Yazar Mesaj
ozkiremitci Çevrimdışı
Member
***

Mesajlar: 34
Katılım: Nov 2011
Rep Puanı: 0
Mesaj: #1
Professor Cloud Zoom [Ürün sayfasında Resmin Üzerine Gelindiğinde Önizleme]
Bu modifikasyonu (1.4.9.3) sürümüne uyarlayarak anlatımını yapıyorum. Vereceğim linkten örneklere bakabilirsiniz, bakınız.

Ekteki(cloud-zoom.1.0.2.zip) dosyayı indirip açınız.
Dikkat edin açtığınız dosyada iki adet .js-(javascript) dosyası var bunlardan sadece birini kopyalamanız yeterlidir.

Açtığınız bu dosyaları opencart' ta aşağıdaki dizine kopyalayınız;

catalog/view/javascript/jquery/

şimdi opencart dosyalarımız içerisinde düzenlemeler yapacağız. lütfen aşağıdaki adımları çok dikkatli uygulayınız ve değişiklik yapacağımız dosyalarımızın birer yedeğini almayı unutmayınız.

Aşağıdaki dizinden "header.tpl" dosyamızı bulup her hangibir düzenleme programında açınız;

catalog/view/theme/TEMANIZ/template/common/header.tpl

açtığımız bu dosyada, aşağıdaki kodu bulunuz;

PHP Kod:
<script type="text/javascript" src="catalog/view/javascript/jquery/tab.js"></script> 

hemen altına ekleyiniz;

PHP Kod:
<script type="text/javascript" src="catalog/view/javascript/jquery/cloud-zoom.1.0.2.min.js"></script>
<link rel="stylesheet" href="catalog/view/javascript/jquery/cloud-zoom.css" type="text/css"/> 

Style ve Scriptimizi sayfamıza çağırdıktan sonra, ürün sayfamızda değişiklik yapacağımız dosyayı açıyoruz.

catalog/view/theme/TEMANIZ/template/product/product.tpl

Açtığınız dosyada aşağıdaki kodu bulunuz;
Daha kolay bulmanız için arama; <?php if ($thumb) { ?> mavi kodu kopyalayıp arayabilirsiniz.
PHP Kod:
<td style="text-align: center; width: 250px; vertical-align: top;">
<
a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="thickbox" rel="gallery">
<
img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" style="margin-bottom: 3px;" />
</
a><br />
<
span style="font-size: 11px;"><?php echo $text_enlarge?></span></td> 

ve bu kodla değiştiriniz;

PHP Kod:
<td style="text-align: center; width: 250px; vertical-align: top;"><div class="zoom-section">
<
div class="zoom-small-image">
<
a href="<?php echo $popup; ?>" class = "thickbox cloud-zoom" id="zoom1" rel="tint:'#ff0000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:285, adjustY:-4, adjustX:10">
<
img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image">
</
a>
</
div></div>
<
span style="font-size: 11px;"><?php echo $text_enlarge?></span></td> 

Tüm bunları yaptıktan sonra olumlu sonuç almanız gerekiyor. Her hangibir sorununuz olursa açık bir şekilde ifade ederseniz yardımcı olabilirim. Bazı eklerden ve düzenlemelerden bahsetmek istiyorum, Lütfen buradan sonrasını uygulamadan sonuç aldıktan sonra devam ediniz;

Resim üzerine gelindiğinde önizle kutusu şeffaf, dışında kalan resim üstü ise farklı renkte bunu; 'product.tpl' ye eklediğimiz kodda, aşağıda;

PHP Kod:
<a href="<?php echo $popup; ?>" class = "thickbox cloud-zoom" id="zoom1" rel="tint:'#ff0000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:285, adjustY:-4, adjustX:10">
<
img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image">
</
a

rel kısmında değişiklikler yaparak farklı sonuçlar elde edebiliriz.;

PHP Kod:
rel="tint:'#ff0000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:285, adjustY:-4, adjustX:10" 

buradaki tüm özellikler küçük resim üzerine gelindiğinde meydana gelen olaylar;

tint:'#ff0000' : önizleme kısmı dışında kalan renk.
tintOpacity:0.5 : Önizleme şeffaflığı.
smoothMove:5 : Gezinirken önizleme hızı. Slowmotion gibi.
zoomWidth:285: Önizleme kutucuğu.

Farklı Zoom için rel kodumuzu aşağıdakilerden istediğiniz ile değiştirebilirsiniz;
PHP Kod:
Standard Zoom Ayarları :  rel="adjustX: 10, adjustY:-4" 
Tints Zoom Ayarı :  rel="tint: '#ff0000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:480, adjustY:-4, adjustX:10"
İnner Zoom Ayarı :  rel="position: 'inside' , showTitle: true, adjustX:-4, adjustY:-4"
Soft Focus Zoom Ayarı rel="softFocus: true, position:'anypos', smoothMove:2" 

Opencart 1.4.9.3 sürümü için anlatım burada bitmiştir.
İkinci Mesajda Son Sürüm (1.5.1.3) uyarlama yapacağız. Bu sürümde bazı eksiklikler meydana geliyor, umuyorum ki tecrübelerimizi paylaşarak burada bu konuyu çözeceğiz.

Ek: Konunun anlatımı ve uygulamasında opencart-tr.com sitesinden Gökhan TAYLAN adlı üyenin tecrübelerinden istifade ettim.


Eklenti Dosyaları
.zip  cloud-zoom.1.0.2.zip (Boyut: 7.04 KB / İndirilme: 228)

http://about.me/ozkiremitci
(En son düzenleme: 18-12-2011 09:28 ozkiremitci.)
18-12-2011 07:23
Kullanıcının websitesini ziyaret et Bu kullanıcının gönderdiği tüm mesajları bul Bu mesajı alıntı yap
ozkiremitci Çevrimdışı
Member
***

Mesajlar: 34
Katılım: Nov 2011
Rep Puanı: 0
Mesaj: #2
Professor Cloud Zoom [Opencart son sürüm(1.5.1.3) uyarlama]
Ekteki(cloud-zoom.1.0.2.zip) dosyayı açtıktan sonra aşağıdaki dosyaları göreceğiz;

cloud-zoom.css
cloud-zoom.1.0.2.js
cloud-zoom.1.0.2.min.js


Bu dosyaları opencart' ta aşağıdaki dizine kopyalayınız.Dikkat edin açtığınız dosyada iki adet .js-(javascript) dosyası var bunlardan sadece birini kopyalamanız yeterlidir;

catalog/view/javascript/jquery/

Hatırlatma: Opencart dosyalarımızda değişiklik yapacağız, tüm bu değişiklikleri yapmadan önce dosyaların birer yedeğini almayı unutmayınız.

Aşağıdaki dizinden "header.tpl" dosyamızı bulup her hangibir düzenleme programında açınız;

catalog/view/theme/TEMANIZ/template/common/header.tpl

açtığımız bu dosyada, aşağıdaki kodu bulunuz;

PHP Kod:
<script type="text/javascript" src="catalog/view/javascript/jquery/tab.js"></script> 

hemen altına ekleyiniz (dikkat! kopyaladığınız javascript dosya adlarını doğru yazınız.);

PHP Kod:
<script type="text/javascript" src="catalog/view/javascript/jquery/cloud-zoom.1.0.2.min.js"></script>
<link rel="stylesheet" href="catalog/view/javascript/jquery/cloud-zoom.css" type="text/css"/> 

Style ve Scriptimizi sayfamıza çağırdıktan sonra, ürün sayfamızda değişiklik yapacağımız dosyayı açıyoruz.

catalog/view/theme/TEMANIZ/template/product/product.tpl

Açtığınız dosyada aşağıdaki kodu bulunuz;

PHP Kod:
<div class="image">
 <
a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="fancybox" rel="fancybox">
 <
img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" />
 </
a>
 </
div

ve bu kodla değiştiriniz;

PHP Kod:
<div class="image">
<
div class="zoom-section">
<
div class="zoom-small-image">
<
a href="<?php echo $popup; ?>" class = "cloud-zoom" rel="tint:'#dfdfdf',tintOpacity:0.5 ,smoothMove:10,zoomWidth:320, adjustY:-4, adjustX:10">
<
img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image">
</
a>
</
div>
</
div>
</
div

buraya kadar kodlarımızı doğru bir şekilde uyguladığınızda hata almadan sonucu elde etmiş olmanız gerekir. Buradan sonraki yazılanları lütfen uygulamadan sonuç aldıktan sonra takip ediniz;

Uygulamayı çalıştırdıktan sonra karşılaştığımız sorunları listeliyorum ve çözümlediklerimizi bu mesajın altında vericem;

1) resim üzerine gelindiğinde istenilen büyüme oranını elde edemiyoruz. bunun nedeni tekrar boyutlandırılan resmin ($thumb değişkeninin aldığı değer) küçük boyutta olması zannediyorum.Ayrıca sizlerden de benim gibi resimlerinde siyah zemin kullanan var ise; yeniden kırpılıp boyutlandırılan resimlerimizin kenarlarına beyaz renk attığını göreceksiniz, buda düzeltmem gereken sorunlarımdan.
2) Resime tıkladığımızda "fancybox" scriptimiz yani popup resim artık çalışmıyor. Bunu popup açıp orada da inner zoom olarak yapmaya çalışabiliriz.
3) İlk ürün resmimizde önizleme elde ettik, diğer resimlerimizde ise ilk ürün resminin yerine gelmesini ve bu resimlerimizde de önizleme işlemini gerçekleştirme üzerine çalışacağız.

http://about.me/ozkiremitci
18-12-2011 09:27
Kullanıcının websitesini ziyaret et Bu kullanıcının gönderdiği tüm mesajları bul Bu mesajı alıntı yap
EnverYigit Çevrimdışı
Junior Member
**

Mesajlar: 2
Katılım: Dec 2011
Rep Puanı: 0
Mesaj: #3
RE: Professor Cloud Zoom [Ürün sayfasında Resmin Üzerine Gelindiğinde Önizleme]
inner zoom kodlarını arıyordum bende teşekkürler..
21-12-2011 22:37
Bu kullanıcının gönderdiği tüm mesajları bul Bu mesajı alıntı yap
alkimoberon Çevrimdışı
Junior Member
**

Mesajlar: 2
Katılım: Jan 2012
Rep Puanı: 0
Mesaj: #4
RE: Professor Cloud Zoom [Ürün sayfasında Resmin Üzerine Gelindiğinde Önizleme]
ana sayfakadi ürünlerde çalıştıramadım, ama ürün deayında zoomlama yapıyor
08-01-2012 01:58
Bu kullanıcının gönderdiği tüm mesajları bul Bu mesajı alıntı yap
ozkiremitci Çevrimdışı
Member
***

Mesajlar: 34
Katılım: Nov 2011
Rep Puanı: 0
Mesaj: #5
RE: Professor Cloud Zoom [Ürün sayfasında Resmin Üzerine Gelindiğinde Önizleme]
(08-01-2012 01:58)alkimoberon demiş ki:  ana sayfakadi ürünlerde çalıştıramadım, ama ürün deayında zoomlama yapıyor

bu kodlamalar ürün sayfası için tasarlanmıştır. sizin bahsettiğiniz kategori, yeni ürünler, kampanya vs. için farklı bir olay.

http://about.me/ozkiremitci
(En son düzenleme: 02-02-2013 07:34 ozkiremitci.)
26-01-2012 22:49
Kullanıcının websitesini ziyaret et Bu kullanıcının gönderdiği tüm mesajları bul Bu mesajı alıntı yap
vcakar Çevrimdışı
Junior Member
**

Mesajlar: 6
Katılım: Feb 2012
Rep Puanı: 0
Mesaj: #6
RE: Professor Cloud Zoom [Ürün sayfasında Resmin Üzerine Gelindiğinde Önizleme]
Çok güzel teşekkürler
03-02-2012 16:48
Bu kullanıcının gönderdiği tüm mesajları bul Bu mesajı alıntı yap
filiz Çevrimdışı
Member
***

Mesajlar: 35
Katılım: Nov 2011
Rep Puanı: 0
Mesaj: #7
RE: Professor Cloud Zoom [Ürün sayfasında Resmin Üzerine Gelindiğinde Önizleme]
ozkiremitci
Merhaba emeğine sağlık, uzun zamandır bu script ile uğraşıyorum. Oscommerce de bu eklentiyi bir türlü kuramamıştım sayende opencarda kurabildim
Opencard ile yeni tanıştım. LOcalhosta kurdum ve kendimce düzenlemeler yapmaya çalışıyorum. opencart-tr_v1.5.1.3.1 sürümü üzerinde çalışıyorum çoklu resim görüntüleme var bu eklenti bir resim için çalışıyor ama diğer küçük resimlere bastığımda eskisi gibi bir pencere açılıyor.
Benim istediğim ise sadece resim değişsin ve yine o resmi de zoom yapsın. Bu durumda düzeltmem gereken kod hangisi yardımcı olabilirsen çık memnun olurum
şimdiden teşekkürler

"Herkes en az bir yetenekle gönderilir"
17-03-2012 02:35
Bu kullanıcının gönderdiği tüm mesajları bul Bu mesajı alıntı yap
ozkiremitci Çevrimdışı
Member
***

Mesajlar: 34
Katılım: Nov 2011
Rep Puanı: 0
Mesaj: #8
RE: Professor Cloud Zoom [Ürün sayfasında Resmin Üzerine Gelindiğinde Önizleme]
(17-03-2012 02:35)filiz demiş ki:  ozkiremitci
Merhaba emeğine sağlık, uzun zamandır bu script ile uğraşıyorum. Oscommerce de bu eklentiyi bir türlü kuramamıştım sayende opencarda kurabildim
Opencard ile yeni tanıştım. LOcalhosta kurdum ve kendimce düzenlemeler yapmaya çalışıyorum. opencart-tr_v1.5.1.3.1 sürümü üzerinde çalışıyorum çoklu resim görüntüleme var bu eklenti bir resim için çalışıyor ama diğer küçük resimlere bastığımda eskisi gibi bir pencere açılıyor.
Benim istediğim ise sadece resim değişsin ve yine o resmi de zoom yapsın. Bu durumda düzeltmem gereken kod hangisi yardımcı olabilirsen çık memnun olurum
şimdiden teşekkürler

İlave resimleri tıkladığınızda ürün görselinde görüntüleyip zoom yapabilmek için;

1- Yönetim paneli > Sistem > Genel ayarlar > Resime girip. İlave Resim Boyutu' nu Ürün Küçük Resim Boyutu ile aynı yapmalısınız.

2- Kodlamada ki değişiklikler. (Yedek almayı unutmayınız.)

2.a- Product.tpl dosyanızdaki aşağıdaki kodu bulun.

PHP Kod:
<div class="image-additional">
        <?
php foreach ($images as $image) { ?>
        <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title?>" class="fancybox" rel="fancybox">
        <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title?>" alt="<?php echo $heading_title?>" />
        </a>
        <?php ?>
      </div> 

2.b- Aşağıdaki kod ile değiştirin ve ilave küçük resim için göstermek istdiğiniz ENxBOY oranlarını girin.

PHP Kod:
<div class="image-additional">
    <?
php foreach ($images as $image) { ?>
        <a href='<?php echo $image['popup']; ?>' class='cloud-zoom-gallery' title='<?php echo $heading_title?>'rel="useZoom:'zoom1', smallImage:'<?php echo $image['thumb']; ?>' ">
        <img src="<?php echo $image['thumb']; ?>" alt = "<?php echo $heading_title?>" width="EN" height="BOY"/>
        </a>
    <?php ?>
  </div> 

Bu düzenlemeden sonra ilave resimlerinize tıklandığında ürün görselinde açılacak ve zoom yapılabilecektir. geç verilen cevap için üzgünüm.

http://about.me/ozkiremitci
(En son düzenleme: 02-02-2013 07:33 ozkiremitci.)
02-02-2013 07:32
Kullanıcının websitesini ziyaret et Bu kullanıcının gönderdiği tüm mesajları bul Bu mesajı alıntı yap
yor3y Çevrimdışı
Junior Member
**

Mesajlar: 1
Katılım: Feb 2012
Rep Puanı: 0
Mesaj: #9
RE: Professor Cloud Zoom [Ürün sayfasında Resmin Üzerine Gelindiğinde Önizleme]
Merhaba,

1.5.5.1 için uyarlamaya çalıştım lakin sonuç hüsran Smile
27-05-2013 16:30
Bu kullanıcının gönderdiği tüm mesajları bul Bu mesajı alıntı yap
Muhammet02 Çevrimdışı
Junior Member
**

Mesajlar: 1
Katılım: Jun 2013
Rep Puanı: 0
Mesaj: #10
RE: Professor Cloud Zoom [Ürün sayfasında Resmin Üzerine Gelindiğinde Önizleme]
(02-02-2013 07:32)ozkiremitci demiş ki:  
(17-03-2012 02:35)filiz demiş ki:  ozkiremitci
Merhaba emeğine sağlık, uzun zamandır bu script ile uğraşıyorum. Oscommerce de bu eklentiyi bir türlü kuramamıştım sayende opencarda kurabildim
Opencard ile yeni tanıştım. LOcalhosta kurdum ve kendimce düzenlemeler yapmaya çalışıyorum. opencart-tr_v1.5.1.3.1 sürümü üzerinde çalışıyorum çoklu resim görüntüleme var bu eklenti bir resim için çalışıyor ama diğer küçük resimlere bastığımda eskisi gibi bir pencere açılıyor.
Benim istediğim ise sadece resim değişsin ve yine o resmi de zoom yapsın. Bu durumda düzeltmem gereken kod hangisi yardımcı olabilirsen çık memnun olurum
şimdiden teşekkürler

İlave resimleri tıkladığınızda ürün görselinde görüntüleyip zoom yapabilmek için;

1- Yönetim paneli > Sistem > Genel ayarlar > Resime girip. İlave Resim Boyutu' nu Ürün Küçük Resim Boyutu ile aynı yapmalısınız.

2- Kodlamada ki değişiklikler. (Yedek almayı unutmayınız.)

2.a- Product.tpl dosyanızdaki aşağıdaki kodu bulun.

PHP Kod:
<div class="image-additional">
        <?
php foreach ($images as $image) { ?>
        <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title?>" class="fancybox" rel="fancybox">
        <img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title?>" alt="<?php echo $heading_title?>" />
        </a>
        <?php ?>
      </div> 

2.b- Aşağıdaki kod ile değiştirin ve ilave küçük resim için göstermek istdiğiniz ENxBOY oranlarını girin.

PHP Kod:
<div class="image-additional">
    <?
php foreach ($images as $image) { ?>
        <a href='<?php echo $image['popup']; ?>' class='cloud-zoom-gallery' title='<?php echo $heading_title?>'rel="useZoom:'zoom1', smallImage:'<?php echo $image['thumb']; ?>' ">
        <img src="<?php echo $image['thumb']; ?>" alt = "<?php echo $heading_title?>" width="EN" height="BOY"/>
        </a>
    <?php ?>
  </div> 

Bu düzenlemeden sonra ilave resimlerinize tıklandığında ürün görselinde açılacak ve zoom yapılabilecektir. geç verilen cevap için üzgünüm.

Abicim Benim Opencart 1.4.9.3 Version Yanlız Benim Temada(Smrel) Product Klasörü Yok (Common Klasörü Dışında Başka Bir Klasör Yok)
Ne Yapabilirim Yardımcı Olurmusun ?
07-06-2013 16:57
Bu kullanıcının gönderdiği tüm mesajları bul Bu mesajı alıntı yap
Yeni Cevap 


Benzer Konular...
Konu: Yazar Cevaplar: Gösterim: Son Mesaj
  indirimli ürün görseli tsenol 4 4,217 11-04-2016 17:18
Son Mesaj: tsenol
  Ürün resimleri ismailua 0 1,563 24-05-2013 09:21
Son Mesaj: ismailua
  Ürün gösterim biçimi, hizlama ve sütun işlemleri duzgun 10 8,166 02-02-2013 07:54
Son Mesaj: ozkiremitci
  Ürün içeriğindeki mevcut seçeneklerin kombinasyonu mahsusfirar 0 2,355 08-03-2012 15:30
Son Mesaj: mahsusfirar

Foruma Git:


Bu konuyu görüntüleyen kullanıcı(lar): 1 Ziyaretçi