seoseo
tr-opencart

     
avatar Şuanki Zaman: 05-26-2017, 12:19 PMHoş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  3602 - Yorum  3

Kıroğlumarketv
Osmanlı Torunu
******
Süper Moderator user avatar
Çevrimiçi

Mesajlar: 3,025
Konular: 484
Katılma Tarihi: Jan 2012
Rep Puanı: 93
Teşekkürler: 1124
989 Mesajına, 2019 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: 72
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
175 Mesajına, 273 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
  "ürün" yerine "paket" kelimesinin geçmesini istiyorum konumharita38 1 29 05-23-2017 01:19 PM
Son Mesaj: Kıroğlumarket
  Listelenecek ürün sayısı kısmını silmek istiyorum konumharita38 0 26 05-23-2017 07:00 AM
Son Mesaj: konumharita38
  [Modifikasyon] Ürün Detay Sayfasıda Küçük Bir Css Düzenlemesi Kıroğlumarket 10 4,875 04-07-2017 11:09 PM
Son Mesaj: blacktig
  Ürün İsimini Kısaltma Kıroğlumarket 10 3,288 03-22-2017 05:51 PM
Son Mesaj: oktiy
  Kampanyalı Ürünlerde Ürün Detay sayfasına İndirimde ikonu eklemek crea51 20 9,522 03-22-2017 01:58 PM
Son Mesaj: ekremyigiter
  opencart 1.5.5.1 anasayfa ürün sayısı çoğaltma oktiy 0 100 03-17-2017 09:54 AM
Son Mesaj: oktiy
  [Modifikasyon] Breadcrumb - Ürün tam yolu ITECHINN 12 4,053 03-17-2017 09:44 AM
Son Mesaj: oktiy
  Ürüne eklediğim özelliğin + fiyatı, ürün fiyatına yansımıyor. cashr00t 13 1,595 03-16-2017 01:25 AM
Son Mesaj: suko79
  Ürün Fiyatlarının Düz Hesap Olması m.ergul 0 77 03-03-2017 11:20 AM
Son Mesaj: m.ergul
  [Modifikasyon] Anasayfa Modüllerine Yeni Ürün İkonu Eklemek TECHNOLOG 29 9,283 02-27-2017 12:08 PM
Son Mesaj: sekhil

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