seoseo
tr-opencart

     
avatar Şuanki Zaman: 12-05-2016, 03:21 AMHoşgeldin Misafir !
  Şifremi Hatırlat   kayıt ol
opencart temaları

Ürün Detay resimleri için Fancybox eklentisi Biraz Gelişmişi

Konuyu görüntüleyenler: 1 Misafir
 
Değerlendir:
  • 0 Oy - 0 Yüzde
  • 1
  • 2
  • 3
  • 4
  • 5
%
Cevapla  Gönder 
v  v
Yazar  Kıroğlumarket - Görüntüleme - Okunma  3283 - Yorum  3

Kıroğlumarketv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 2,964
Konular: 474
Katılma Tarihi: Jan 2012
Rep Puanı: 93
Teşekkürler: 1106
964 Mesajına, 1977 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 08-02-2012 05:25 PM
Bu eklenti ile ürün detaydaki resimlere tıkladığımızda lightbox tarzında fancybox ile görüntüleme yapılıyor. Ekteki Dosyayı catalog/view/javascript/jquery dosyasına atınız.Demo şuan veremeyecem.

Genel Özellikleri

1.) Mouse scroll ve klavye yön tuşlarına duyarları resim geçişleri.
2.)Lightboxtaki gibi slayt başlatma ve durdurma özelliği.
3.)Gene lightboxta resim büyütme ve küçültme işlemi.

Kurulumu :

Dosyamızı Açalım : catalog/view/theme/senintema/template/common/header.tpl

Bulalım :


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

Altına Ekleyelim :


PHP Kod:
    <!-- Add mousewheel plugin (this is optional) -->
    <
script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

    <!-- Add fancyBox main JS and CSS files -->
    <script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/source/jquery.fancybox.js?v=2.0.6"></script>
    <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/fancybox/source/jquery.fancybox.css?v=2.0.6" media="screen" />

    <!-- Add Button helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.2" />
    <script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.2"></script>

    <!-- Add Thumbnail helper (this is optional) -->
    <link rel="stylesheet" type="text/css" href="catalog/view/javascript/jquery/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.2" />
    <script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.2"></script>

    <!-- Add Media helper (this is optional) -->
    <script type="text/javascript" src="catalog/view/javascript/jquery/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.0"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            /*
             *  Simple image gallery. Uses default settings
             */

            $('.fancybox').fancybox();

            /*
             *  Different effects
             */

            // Change title type, overlay opening speed and opacity
            $(".fancybox-effects-a").fancybox({
                helpers: {
                    title : {
                        type : 'outside'
                    },
                    overlay : {
                        speedIn : 500,
                        opacity : 0.95
                    }
                }
            });

            // Disable opening and closing animations, change title type
            $(".fancybox-effects-b").fancybox({
                openEffect  : 'none',
                closeEffect    : 'none',

                helpers : {
                    title : {
                        type : 'over'
                    }
                }
            });

            // Set custom style, close if clicked, change title type and overlay color
            $(".fancybox-effects-c").fancybox({
                wrapCSS    : 'fancybox-custom',
                closeClick : true,

                helpers : {
                    title : {
                        type : 'inside'
                    },
                    overlay : {
                        css : {
                            'background-color' : '#eee'
                        }
                    }
                }
            });

            // Remove padding, set opening and closing animations, close if clicked and disable overlay
            $(".fancybox-effects-d").fancybox({
                padding: 0,

                openEffect : 'elastic',
                openSpeed  : 150,

                closeEffect : 'elastic',
                closeSpeed  : 150,

                closeClick : true,

                helpers : {
                    overlay : null
                }
            });

            /*
             *  Button helper. Disable animations, hide close button, change title type and content
             */

            $('.fancybox-buttons').fancybox({
                openEffect  : 'none',
                closeEffect : 'none',

                prevEffect : 'none',
                nextEffect : 'none',

                closeBtn  : false,

                helpers : {
                    title : {
                        type : 'inside'
                    },
                    buttons    : {}
                },

                afterLoad : function() {
                    this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
                }
            });


            /*
             *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
             */

            $('.fancybox-thumbs').fancybox({
                prevEffect : 'none',
                nextEffect : 'none',

                closeBtn  : false,
                arrows    : false,
                nextClick : true,

                helpers : {
                    thumbs : {
                        width  : 50,
                        height : 50
                    }
                }
            });

            /*
             *  Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
            */
            $('.fancybox-media')
                .attr('rel', 'media-gallery')
                .fancybox({
                    openEffect : 'none',
                    closeEffect : 'none',
                    prevEffect : 'none',
                    nextEffect : 'none',

                    arrows : false,
                    helpers : {
                        media : {},
                        buttons : {}
                    }
                });

            /*
             *  Open manually
             */

            $("#fancybox-manual-a").click(function() {
                $.fancybox.open('1_b.jpg');
            });

            $("#fancybox-manual-b").click(function() {
                $.fancybox.open({
                    href : 'iframe.html',
                    type : 'iframe',
                    padding : 5
                });
            });

            $("#fancybox-manual-c").click(function() {
                $.fancybox.open([
                    {
                        href : '1_b.jpg',
                        title : 'My title'
                    }, {
                        href : '2_b.jpg',
                        title : '2nd title'
                    }, {
                        href : '3_b.jpg'
                    }
                ], {
                    helpers : {
                        thumbs : {
                            width: 75,
                            height: 50
                        }
                    }
                });
            });


        });
    </script>
    <style type="text/css">
        .fancybox-custom .fancybox-skin {
            box-shadow: 0 0 50px #222;
        }
    </style> 


Dosyamızı Açalım : catalog/view/theme/senintema/template/product/product.tpl

Bulalım Kalın Gösterdiğim yerlerdeki Kısımları değiştiriniz.

Alıntı: <div class="image"><a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox"><img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image" /></a></div>
<?php } ?>
<?php if ($images) { ?>
<div class="image-additional">
<?php foreach ($images as $image) { ?>
<a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="colorbox" rel="colorbox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>

Bununla Değiştiriniz:


PHP Kod:
"class="fancybox-buttons" data-fancybox-group="button


Ekli Dosya(lar) Önizleme(ler)
Resmi Büyütmek İçin Tıklayın   
.rar fancybox.rar Eklentiyi indir...
Boyut: 62.45 KB İndirme: 69
Telif Hakkı için Rapor Edin...
Kıroğlumarket
Alıntı Yaparak Cevapla
Paylaş!
 Teşekkür Edenler: nokta , EnginDeniz , TECHNOLOG , fe_odaliz
opencart temaları
noktav
Süper Moderator
******
Süper Moderator user avatar
Çevrimdışı

Mesajlar: 629
Konular: 24
Katılma Tarihi: Jan 2012
Rep Puanı: 12
Teşekkürler: 672
174 Mesajına, 272 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 08-02-2012 06:20 PM
Emeğine sağlık üstad.
nokta
Bu Dünya Acılardan Kaçamayacağın Kadar Küçük,
Kaybettiklerini Bir Daha Bulamayacağın Kadar Büyüktür!..
Alıntı Yaparak Cevapla
Paylaş!
 Teşekkür Edenler: Kıroğlumarket
EnginDenizv
Acemi Üye
**
Üye user avatar
Çevrimdışı

Mesajlar: 28
Konular: 3
Katılma Tarihi: Apr 2012
Rep Puanı: 0
Teşekkürler: 6
0 Mesajına, 0 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 08-02-2012 06:53 PM
Güzel oldu hocam bu twitter kayma olayıda kayboldu teşekkürler .
Alıntı Yaparak Cevapla
Paylaş!
HesenovKenanv
Acemi Üye
**
Üye user avatar
Çevrimdışı

Mesajlar: 1
Konular: 0
Katılma Tarihi: Feb 2013
Rep Puanı: 0
Teşekkürler: 0
0 Mesajına, 0 Teşekkür edildi.



Kişisel Bilgileri: v
Konu Tarihi: 04-25-2013 08:36 AM
teshekkur ederim..
Alıntı Yaparak Cevapla
Paylaş!

« Önceki | Sonraki »
Cevapla  Gönder 

Ürün Detay resimleri için Fancybox eklentisi Biraz Gelişmişi Konusunun Linki Direk Link
Ürün Detay resimleri için Fancybox eklentisi Biraz Gelişmişi Konusunun HTML Kodu HTML Link
Ürün Detay resimleri için Fancybox eklentisi Biraz Gelişmişi Konusu BBCode Linki BBCode Link
Ürün Detay resimleri için Fancybox eklentisi Biraz Gelişmişi Konusunu Paylaş Sosyal Paylaş

Benzeyen Konular
Konu: Yazar Cevaplar: Gösterim: Son Mesaj
  Kilo ağlık için yarım kilo ayarlamak emremix 5 1,167 11-27-2016 10:28 PM
Son Mesaj: Acaram
Exclamation Toplu ürün kapatma rekorturk 3 1,481 11-13-2016 10:56 AM
Son Mesaj: bariscaist
  admin tarafından müşterilerin sepetlerine ürün ekleme melihjohnsan 1 210 11-13-2016 10:46 AM
Son Mesaj: bariscaist
  opencart 2.x otomatik ürün kodu ekleme redwhite27 3 1,358 10-20-2016 04:33 PM
Son Mesaj: kurugaddere
  Ürün resimi eklerken resim yöneticisini basit input file ile değiştirme pialfa 2 225 10-05-2016 07:48 PM
Son Mesaj: darkmantr
  ürün sayfasina telefon nosu eklemek istiyorum exkalibur 4 172 09-23-2016 10:27 PM
Son Mesaj: Kıroğlumarket
  [Modifikasyon] Ürün Gelince Haber Ver Modifikasyonu Kıroğlumarket 4 1,129 06-11-2016 03:05 PM
Son Mesaj: alicankalem
  Ürün İsimini Kısaltma Kıroğlumarket 9 2,952 05-21-2016 11:34 PM
Son Mesaj: teknotrend28
  Ürün resimi eklemenin daha kolay bir yolu var mı? pialfa 0 208 05-13-2016 01:27 PM
Son Mesaj: pialfa
  admin panel ürün listeleme de s-ş-ı-i türkçe karekter sorunu evren236 2 544 02-20-2016 03:25 PM
Son Mesaj: maxtor

Ürün Detay resimleri için Fancybox eklentisi Biraz Gelişmişi indir, Ürün Detay resimleri için Fancybox eklentisi Biraz Gelişmişi Videosu, Ürün Detay resimleri için Fancybox eklentisi Biraz Gelişmişi online izle, Ürün Detay resimleri için Fancybox eklentisi Biraz Gelişmişi Bedava indir, Ürün Detay resimleri için Fancybox eklentisi Biraz Gelişmişi Yükle, Ürün Detay resimleri için Fancybox eklentisi Biraz Gelişmişi Hakkında, Ürün Detay resimleri için Fancybox eklentisi Biraz Gelişmişi nedir, Ürün Detay resimleri için Fancybox eklentisi Biraz Gelişmişi Free indir, Ürün Detay resimleri için Fancybox eklentisi Biraz Gelişmişi oyunu, Ürün Detay resimleri için Fancybox eklentisi Biraz Gelişmişi download


Forum Atla: