Professor Cloud Zoom [ürün Sayfasında Resmin Üzerine Gelindiğinde Önizleme]

Konusu 'Diğer Modifikasyonlar ve Eklentiler' forumundadır ve chntns tarafından 19 Şubat 2012 başlatılmıştır.

  1. chntns
    Çevrimdışı

    chntns

    Katılım:
    19 Şubat 2012
    Mesajlar:
    45
    Beğenilen Mesaj:
    6
    Ödül Puanları:
    1
    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;
    Kod:
    <script type="text/javascript" src="catalog/view/javascript/jquery/tab.js"></script> 
    hemen altına ekleyiniz;

    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:
    <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:
    <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:
    <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:
    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;
    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" 
     
    farfar31 ve Network Destek bunu beğendi.
  2. chntns
    Çevrimdışı

    chntns

    Katılım:
    19 Şubat 2012
    Mesajlar:
    45
    Beğenilen Mesaj:
    6
    Ödül Puanları:
    1
    Dosya ektedir
     

    Ekli Dosyalar:

  3. cakirberat
    Çevrimdışı

    cakirberat

    Katılım:
    12 Ekim 2012
    Mesajlar:
    0
    Beğenilen Mesaj:
    0
    Ödül Puanları:
    0
    Merhaba öncelikle paylaşım için teşekkür ederim. Bu eklenti ile sadece ürünün ana resmi zoomlanıyor. Aynı ürüne ait Ek/İlave resimlerinde seçildiğinde ana resmin bulunduğu alanda görünmesini ve o resminde zoomlanmasını nasıl sağlayabiliriz?
     
  4. desprate
    Çevrimdışı

    desprate

    Katılım:
    20 Mart 2013
    Mesajlar:
    0
    Beğenilen Mesaj:
    0
    Ödül Puanları:
    0
    Merhaba,
    Ben Sürüm 1.5.5.1 kullanıyorum bu sürümde sorunsuz çalışan bir yol varmı? Kullanan yada uygulayan varsa paylaşım yaparsa çok sevinirim...
     

Sayfayı Paylaş

Opencartfrm.com misafirleri bu sayfayı şunları arayarak geldiler :

  1. cloud-zoom.1.0.2.zip

    ,
  2. php resmi zoomlama

    ,
  3. opencart ana ürün resmi ile ek resim boyutları değiştirme