Professor Cloud Zoom

[Gökhan TAYLAN]

- Tints
- İnner Zoom
- Soft Focus

Tints Opencart 1.4.9.3 versiyona Uygulama

demo : bknz.

indirdiğiniz dosyaları catalog/view/javascript/jquery/ içine yükleyin 3 adet dosya.

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

Düzenleme:

catalog/view/theme/SİZİN TEMANIZ/template/common/header.tpl

BUL

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

ALTINA EKLE
<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">[/code]

catalog/view/theme/SİZİN TEMANIZ/template/product/product.tpl

Bul :

<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>

Değiştir:

<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>

Ekdeki dosyaları catalog/view/javascript/jquery/ dizinine yükleyin.

Not : Arkadaşlar Farklı Eklentiler kullanmış olabilirsiniz o yüzden hatalarınızı paylaşırsanız yardımcı olmaya çalışalım .

 

[osmanozg]

paylaşım için teşekkürler
1.4.8 e nasıl uygularız.

birde <style type"text/css"> bulamadım

stylesheet" type="text/css" var ama çoğu yerde var tam söylersen hangisi olduğunu daha kolay yapılabilir.

 

[admin]

Koddaki fazlalıklar eksikler hatalar düzeltildi tekrar uygulayınız.

paylaşım için teşekkürler
1.4.8 e nasıl uygularız.

birde <style type"text/css"> bulamadım

stylesheet" type="text/css" var ama çoğu yerde var tam söylersen hangisi olduğunu daha kolay yapılabilir.

1.4.8 içinde aynısı geçerlidir.

 

[genyapi]

buu çalıştırmak için jquery resim görüntüleyiciyi kaldırmak mı gerekior, bende çalışmadı da o yüzden

 

[admin]

Bu kurduğunuzda resim görüntüleyici(Thickbox) devre dışı kalıyor. Baştan tekrar deneyiniz.

 

[bilgikur]

Tşk ederim gökhan paylaşımın ıcın. tam aradıgım kod

 

[osmanozg]

paylaşım çok güzel ama bunu
FancyBox ile beraber nasıl kullanabiliriz.
fancybox aktfiken pasife düşüyor.
kullanılmıyor

 

[tolga35]

Açılır menu resimin altında kalıyor bunun için ne yapmamız gerekli arkadaşlar

 

[resif]

Açılır menu resimin altında kalıyor bunun için ne yapmamız gerekli arkadaşlar

Arkadaşım :
cloud-zoom.min.101.js adlı dosyayı aç z-index:9999 bul
z-index:100 ile değiştir sorun düzelecektir .

 

[tolga35]

Açılır menu resimin altında kalıyor bunun için ne yapmamız gerekli arkadaşlar

Arkadaşım :
cloud-zoom.min.101.js adlı dosyayı aç z-index:9999 bul
z-index:100 ile değiştir sorun düzelecektir .

Hocam dediğin gibi
cloud-zoom.min.1.0.2.js adlı dosyayı açtım, z-index:9999 buldum
z-index:100 ile değiştirdim ama malesef sorun düzelmedi
bir yanlışlık olabilirmi _?

 

[resif]

Arkadaşım :
cloud-zoom.min.101.js adlı dosyayı aç z-index:9999 bul
z-index:100 ile değiştir sorun düzelecektir .

Hocam dediğin gibi
cloud-zoom.min.1.0.2.js adlı dosyayı açtım, z-index:9999 buldum
z-index:100 ile değiştirdim ama malesef sorun düzelmedi
bir yanlışlık olabilirmi _?

Ben kullanmıyorum bunu sitemde ama senin için kendi sistemimde uyguladım işe yaradı hatta üreticisinin sayfasındanda araştırdım bu şekilde çözüm olabileceği yazılmış , akşam yine zaman bulabilirsem tekrar bakarım . iyi çalışmalar.

 

[expert]

ustat lar diğer resimleri nasıl gösterip zoom yapacaz.

---

ustat lar hangi modül ile yapılacak

 

[etipsgo]

Nasıl Sürüm 1.4.9.4 ile çalışır?

 

[syrus]

Çok güzel. Emeğine sağlık.

 

[grafikes]

arkadaşlar ben bu özelliği v1.5 üzerinde nasıl yapabilirim arkadaşlar. Sistem yapısı çok güzel 1.5 e entegre edebilirmiyiz.

 

[Gökhan TAYLAN]

1.5.1.1 için :

İlk Olarak Mesajdaki eklentileri catalog/view/javascript/jquery yükleyin
sonra catalog/view/theme/default/template/common/ header.tpl içinde
bul

<script type="text/javascript" src="catalog/view/javascript/jquery/tabs.js"></script>

ekle altına

<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"/>

sonra
: catalog/view/theme/default/template/product/product.tpl

Bul :

<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>

Değiştir :

 <div class="zoom-section">
              <div class="zoom-small-image"><a href="<?php echo $popup; ?>" class = "fancybox cloud-zoom" id="zoom1" rel="tint:'#ff0000',tintOpacity:0.5 ,smoothMove:5,zoomWidth:228, 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;"></span></td>

arkadaşlar ben bu özelliği v1.5 üzerinde nasıl yapabilirim arkadaşlar. Sistem yapısı çok güzel 1.5 e entegre edebilirmiyiz.

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"

 

[neyzel]

<script type="text/javascript" src="catalog/view/javascript/jquery/cloud-zoom.1.0.2.js"></script>
<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"/>

Burada eklenmesini istediğiniz cloud-zoom.1.0.2.js ve cloud-zoom.1.0.2.min.js aynı işlevi gören iki dosya değilmi? Bu dosyalardan sadece birini yüklemek gerekmiyor mu?

 

[admin]

evet ikisi de aynı işlevi görüyor. hata düzeltildi

 

[Hknsl]

Merhabalar, zoom özelliği oldukça güzel fakat resmin altında ve üstünde ''Büyütmek için resime tıklayın'' yazısı mevcut bende. Bu altlı üstlü yazıyı nasıl silebilirim acaba?

 

[Gökhan TAYLAN]

Merhabalar, zoom özelliği oldukça güzel fakat resmin altında ve üstünde ''Büyütmek için resime tıklayın'' yazısı mevcut bende. Bu altlı üstlü yazıyı nasıl silebilirim acaba?

catalog/view/theme/SİZİN TEMANIZ/template/product/product.tpl burda :

<?php echo ' Resmi Büyütmek İçin Tıklayınız...'?></a>

bulun ve silin.