Opencart Türkiye Destek Sitesi ,E-Ticaret Yazılımı Destek Paylaşım Forumu

e-ticaretdersleri Tüm Mesajlarını Bul · 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" 

nokta Tüm Mesajlarını Bul · Konu Tarihi: **08-02-2012 06:20 PM**

Emeğine sağlık üstad.

EnginDeniz Tüm Mesajlarını Bul · Konu Tarihi: **08-02-2012 06:53 PM**

Güzel oldu hocam bu twitter kayma olayıda kayboldu teşekkürler .

HesenovKenan Tüm Mesajlarını Bul · Konu Tarihi: **04-25-2013 08:36 AM**

teshekkur ederim..


Direk Link
HTML Link
BBCode Link
Sosyal Paylaş	Sabah net google facebook digg twiter yahoo mixx stumbleupon delicious reddit myspace friendfeed google buzz linkedin

Benzeyen Konular
Konu:		Yazar	Cevaplar:	Gösterim:	Son Mesaj
	katagorilerdeki ürün sayılarını kaldırma	mukoonline	3	9,880	11-22-2021 10:01 AM Son Mesaj: Jadoosa
	Ürün sayfasında resimlerin üzerine gelindiğinde aktif etmek	e-ticaretdersleri	1	7,062	04-28-2021 05:14 AM Son Mesaj: goker1
	Ürün Sayfasında Üreticiler Logosu Faklı	e-ticaretdersleri	5	8,956	03-08-2021 01:06 PM Son Mesaj: Mehmet1990
	Ürün Sayfasına Hemen Al butonu eklemek	BLaDe	33	31,429	05-28-2020 01:09 PM Son Mesaj: muchblood
	opencart 1.5.6 ürün ekleme oturum kapanma sorunu	emir28	1	988	10-25-2019 03:04 AM Son Mesaj: sembolpc
	[Modifikasyon] Breadcrumb - Ürün tam yolu	ITECHINN	13	10,836	01-01-2019 05:23 PM Son Mesaj: safakozt
	lcwaikiki.com gibi ürün seçeneği sistemi?	yusufsayi	1	2,183	12-10-2018 11:07 PM Son Mesaj: teknohiz
	sizin için seçtiklerimiz ürünlerini slider yapma	emir28	5	1,813	11-07-2018 10:15 PM Son Mesaj: e-ticaretdersleri
	1.5.6.4 için merkez bankasında güncelleme istek	nickelaj	5	1,641	10-23-2018 10:12 AM Son Mesaj: nickelaj
	Ürün Listeme (Session ID) Yardım	alish	0	1,243	06-29-2018 12:56 PM Son Mesaj: alish

	Şuanki Zaman: 12-18-2024, 10:57 PMHoşgeldin Misafir !
	Beni Hatırla Şifremi Hatırlat

« Önceki \| Sonraki »

Opencart Türkiye Destek Sitesi ,E-Ticaret Yazılımı Destek Paylaşım Forumu

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