Professor Cloud Zoom

kobeumut · 22 Eki 2011

bendeki 1.5 de fancybox kurulu ayrıca fancybox ta algılıyor cloudzooma değiştirince algılamıyor. ve ayrıca paylaşa tıklandığında hiç resim görmüyor problem bu

By_Surmeneli · 24 Eki 2011

benim bir sorum olacak jquery image slider kullanıyorum ama belirtilen yerdeki değişilecek kodları yok bu nu nasıl yapabbilirim ?

BLaDe · 24 Eki 2011

hangi temayı kullanıyorsunuz temadan kaynaklı bir sorun...

By_Surmeneli · 24 Eki 2011

default temasını kullanıyorum

BLaDe · 24 Eki 2011

temanın içinde o kodlar mevcuttur tekrar kontrol edebilirmisin komple arama yaparak belki çıkmaya bilir belirli bir kısımı ara istersen

By_Surmeneli · 27 Eki 2011

jquery image slider da görüntülenen resime nasıl zoom yapabilriz arkdaşlar daha öndecen sordu aynı sorun bende de var

erkryan · 10 Kas 2011

arkadaşlar bu sorunu çözebilen kimse var mı? yukarıdaki açılan menü clood zoomun üzerine gelemiyor arkada kalıyor

erkryan · 23 Kas 2011

cloud zoomun boyutunu nerden ayarlıyacaz ya forum kapalımı kimse yazmıyor

yusuf1990 · 4 Ara 2011

resif' Alıntı:
tolga35' Alıntı:

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

Genişletmek için tıkla ...

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.

buyrun arkadaşlar kategori resmin altında kalıyorsa veya hazır yapılmış olarak size cloud-zoom.min.1.0.2.js dosyasını veriyorum ben kullanıyorum şuan hiçbir sorun yok.

PHP:

//////////////////////////////////////////////////////////////////////////////////
// Cloud Zoom V1.0.2
// (c) 2010 by R Cecco. <http://www.professorcloud.com>
// MIT License
//
// Please retain this copyright header in all versions of the software
//////////////////////////////////////////////////////////////////////////////////
(function ($) {

    $(document).ready(function () {
        $('.cloud-zoom, .cloud-zoom-gallery').CloudZoom();
    });

    function format(str) {
        for (var i = 1; i < arguments.length; i++) {
            str = str.replace('%' + (i - 1), arguments[i]);
        }
        return str;
    }

    function CloudZoom(jWin, opts) {
        var sImg = $('img', jWin);
		var	img1;
		var	img2;
        var zoomDiv = null;
		var	$mouseTrap = null;
		var	lens = null;
		var	$tint = null;
		var	softFocus = null;
		var	$ie6Fix = null;
		var	zoomImage;
        var controlTimer = 0;      
        var cw, ch;
        var destU = 0;
		var	destV = 0;
        var currV = 0;
        var currU = 0;      
        var filesLoaded = 0;
        var mx,
            my; 
        var ctx = this, zw;
        // Display an image loading message. This message gets deleted when the images have loaded and the zoom init function is called.
        // We add a small delay before the message is displayed to avoid the message flicking on then off again virtually immediately if the
        // images load really fast, e.g. from the cache. 
        //var	ctx = this;
        setTimeout(function () {
            //						 <img src="/images/loading.gif"/>
            if ($mouseTrap === null) {
                var w = jWin.width();
                jWin.parent().append(format('<div style="width:%0px;position:absolute;top:75%;left:%1px;text-align:center" class="cloud-zoom-loading" >Loading...</div>', w / 3, (w / 2) - (w / 6))).find(':last').css('opacity', 0.5);
            }
        }, 200);


        var ie6FixRemove = function () {

            if ($ie6Fix !== null) {
                $ie6Fix.remove();
                $ie6Fix = null;
            }
        };

        // Removes cursor, tint layer, blur layer etc.
        this.removeBits = function () {
            //$mouseTrap.unbind();
            if (lens) {
                lens.remove();
                lens = null;             
            }
            if ($tint) {
                $tint.remove();
                $tint = null;
            }
            if (softFocus) {
                softFocus.remove();
                softFocus = null;
            }
            ie6FixRemove();

            $('.cloud-zoom-loading', jWin.parent()).remove();
        };


        this.destroy = function () {
            jWin.data('zoom', null);

            if ($mouseTrap) {
                $mouseTrap.unbind();
                $mouseTrap.remove();
                $mouseTrap = null;
            }
            if (zoomDiv) {
                zoomDiv.remove();
                zoomDiv = null;
            }
            //ie6FixRemove();
            this.removeBits();
            // DON'T FORGET TO REMOVE JQUERY 'DATA' VALUES
        };


        // This is called when the zoom window has faded out so it can be removed.
        this.fadedOut = function () {
            
			if (zoomDiv) {
                zoomDiv.remove();
                zoomDiv = null;
            }
			 this.removeBits();
            //ie6FixRemove();
        };

        this.controlLoop = function () {
            if (lens) {
                var x = (mx - sImg.offset().left - (cw * 0.5)) >> 0;
                var y = (my - sImg.offset().top - (ch * 0.5)) >> 0;
               
                if (x < 0) {
                    x = 0;
                }
                else if (x > (sImg.outerWidth() - cw)) {
                    x = (sImg.outerWidth() - cw);
                }
                if (y < 0) {
                    y = 0;
                }
                else if (y > (sImg.outerHeight() - ch)) {
                    y = (sImg.outerHeight() - ch);
                }

                lens.css({
                    left: x,
                    top: y
                });
                lens.css('background-position', (-x) + 'px ' + (-y) + 'px');

                destU = (((x) / sImg.outerWidth()) * zoomImage.width) >> 0;
                destV = (((y) / sImg.outerHeight()) * zoomImage.height) >> 0;
                currU += (destU - currU) / opts.smoothMove;
                currV += (destV - currV) / opts.smoothMove;

                zoomDiv.css('background-position', (-(currU >> 0) + 'px ') + (-(currV >> 0) + 'px'));              
            }
            controlTimer = setTimeout(function () {
                ctx.controlLoop();
            }, 30);
        };

        this.init2 = function (img, id) {

            filesLoaded++;
            //console.log(img.src + ' ' + id + ' ' + img.width);	
            if (id === 1) {
                zoomImage = img;
            }
            //this.images[id] = img;
            if (filesLoaded === 2) {
                this.init();
            }
        };

        /* Init function start.  */
        this.init = function () {
            // Remove loading message (if present);
            $('.cloud-zoom-loading', jWin.parent()).remove();


/* Add a box (mouseTrap) over the small image to trap mouse events.
		It has priority over zoom window to avoid issues with inner zoom.
		We need the dummy background image as IE does not trap mouse events on
		transparent parts of a div.
		*/
            $mouseTrap = jWin.parent().append(format("<div class='mousetrap' style='background-image:url(\".\");z-index:999;position:absolute;width:%0px;height:%1px;left:%2px;top:%3px;\'></div>", sImg.outerWidth(), sImg.outerHeight(), 0, 0)).find(':last');

            //////////////////////////////////////////////////////////////////////			
            /* Do as little as possible in mousemove event to prevent slowdown. */
            $mouseTrap.bind('mousemove', this, function (event) {
                // Just update the mouse position
                mx = event.pageX;
                my = event.pageY;
            });
            //////////////////////////////////////////////////////////////////////					
            $mouseTrap.bind('mouseleave', this, function (event) {
                clearTimeout(controlTimer);
                //event.data.removeBits();                
				if(lens) { lens.fadeOut(299); }
				if($tint) { $tint.fadeOut(299); }
				if(softFocus) { softFocus.fadeOut(299); }
				zoomDiv.fadeOut(300, function () {
                    ctx.fadedOut();
                });																
                return false;
            });
            //////////////////////////////////////////////////////////////////////			
            $mouseTrap.bind('mouseenter', this, function (event) {
				mx = event.pageX;
                my = event.pageY;
                zw = event.data;
                if (zoomDiv) {
                    zoomDiv.stop(true, false);
                    zoomDiv.remove();
                }

                var xPos = opts.adjustX,
                    yPos = opts.adjustY;
                             
                var siw = sImg.outerWidth();
                var sih = sImg.outerHeight();

                var w = opts.zoomWidth;
                var h = opts.zoomHeight;
                if (opts.zoomWidth == 'auto') {
                    w = siw;
                }
                if (opts.zoomHeight == 'auto') {
                    h = sih;
                }
                //$('#info').text( xPos + ' ' + yPos + ' ' + siw + ' ' + sih );
                var appendTo = jWin.parent(); // attach to the wrapper			
                switch (opts.position) {
                case 'top':
                    yPos -= h; // + opts.adjustY;
                    break;
                case 'right':
                    xPos += siw; // + opts.adjustX;					
                    break;
                case 'bottom':
                    yPos += sih; // + opts.adjustY;
                    break;
                case 'left':
                    xPos -= w; // + opts.adjustX;					
                    break;
                case 'inside':
                    w = siw;
                    h = sih;
                    break;
                    // All other values, try and find an id in the dom to attach to.
                default:
                    appendTo = $('#' + opts.position);
                    // If dom element doesn't exit, just use 'right' position as default.
                    if (!appendTo.length) {
                        appendTo = jWin;
                        xPos += siw; //+ opts.adjustX;
                        yPos += sih; // + opts.adjustY;	
                    } else {
                        w = appendTo.innerWidth();
                        h = appendTo.innerHeight();
                    }
                }

                zoomDiv = appendTo.append(format('<div id="cloud-zoom-big" class="cloud-zoom-big" style="display:none;position:absolute;left:%0px;top:%1px;width:%2px;height:%3px;background-image:url(\'%4\');z-index:99;"></div>', xPos, yPos, w, h, zoomImage.src)).find(':last');

                // Add the title from title tag.
                if (sImg.attr('title') && opts.showTitle) {
                    zoomDiv.append(format('<div class="cloud-zoom-title">%0</div>', sImg.attr('title'))).find(':last').css('opacity', opts.titleOpacity);
                }

                // Fix ie6 select elements wrong z-index bug. Placing an iFrame over the select element solves the issue...		
                if ($.browser.msie && $.browser.version < 7) {
                    $ie6Fix = $('<iframe frameborder="0" src="#"></iframe>').css({
                        position: "absolute",
                        left: xPos,
                        top: yPos,
                        zIndex: 99,
                        width: w,
                        height: h
                    }).insertBefore(zoomDiv);
                }

                zoomDiv.fadeIn(500);

                if (lens) {
                    lens.remove();
                    lens = null;
                } /* Work out size of cursor */
                cw = (sImg.outerWidth() / zoomImage.width) * zoomDiv.width();
                ch = (sImg.outerHeight() / zoomImage.height) * zoomDiv.height();

                // Attach mouse, initially invisible to prevent first frame glitch
                lens = jWin.append(format("<div class = 'cloud-zoom-lens' style='display:none;z-index:98;position:absolute;width:%0px;height:%1px;'></div>", cw, ch)).find(':last');

                $mouseTrap.css('cursor', lens.css('cursor'));

                var noTrans = false;

                // Init tint layer if needed. (Not relevant if using inside mode)			
                if (opts.tint) {
                    lens.css('background', 'url("' + sImg.attr('src') + '")');
                    $tint = jWin.append(format('<div style="display:none;position:absolute; left:0px; top:0px; width:%0px; height:%1px; background-color:%2;" />', sImg.outerWidth(), sImg.outerHeight(), opts.tint)).find(':last');
                    $tint.css('opacity', opts.tintOpacity);                    
					noTrans = true;
					$tint.fadeIn(500);

                }
                if (opts.softFocus) {
                    lens.css('background', 'url("' + sImg.attr('src') + '")');
                    softFocus = jWin.append(format('<div style="position:absolute;display:none;top:2px; left:2px; width:%0px; height:%1px;" />', sImg.outerWidth() - 2, sImg.outerHeight() - 2, opts.tint)).find(':last');
                    softFocus.css('background', 'url("' + sImg.attr('src') + '")');
                    softFocus.css('opacity', 0.5);
                    noTrans = true;
                    softFocus.fadeIn(500);
                }

                if (!noTrans) {
                    lens.css('opacity', opts.lensOpacity);										
                }
				if ( opts.position !== 'inside' ) { lens.fadeIn(500); }

                // Start processing. 
                zw.controlLoop();

                return; // Don't return false here otherwise opera will not detect change of the mouse pointer type.
            });
        };

        img1 = new Image();
        $(img1).load(function () {
            ctx.init2(this, 0);
        });
        img1.src = sImg.attr('src');

        img2 = new Image();
        $(img2).load(function () {
            ctx.init2(this, 1);
        });
        img2.src = jWin.attr('href');
    }

    $.fn.CloudZoom = function (options) {
        // IE6 background image flicker fix
        try {
            document.execCommand("BackgroundImageCache", false, true);
        } catch (e) {}
        this.each(function () {
			var	relOpts, opts;
			// Hmm...eval...slap on wrist.
			eval('var	a = {' + $(this).attr('rel') + '}');
			relOpts = a;
            if ($(this).is('.cloud-zoom')) {
                $(this).css({
                    'position': 'relative',
                    'display': 'block'
                });
                $('img', $(this)).css({
                    'display': 'block'
                });
                // Wrap an outer div around the link so we can attach things without them becoming part of the link.
                // But not if wrap already exists.
                if ($(this).parent().attr('id') != 'wrap') {
                    $(this).wrap('<div id="wrap" style="top:0px;z-index:1;position:relative;"></div>');
                }
                opts = $.extend({}, $.fn.CloudZoom.defaults, options);
                opts = $.extend({}, opts, relOpts);
                $(this).data('zoom', new CloudZoom($(this), opts));

            } else if ($(this).is('.cloud-zoom-gallery')) {
                opts = $.extend({}, relOpts, options);
                $(this).data('relOpts', opts);
                $(this).bind('click', $(this), function (event) {
                    var data = event.data.data('relOpts');
                    // Destroy the previous zoom
                    $('#' + data.useZoom).data('zoom').destroy();
                    // Change the biglink to point to the new big image.
                    $('#' + data.useZoom).attr('href', event.data.attr('href'));
                    // Change the small image to point to the new small image.
                    $('#' + data.useZoom + ' img').attr('src', event.data.data('relOpts').smallImage);
                    // Init a new zoom with the new images.				
                    $('#' + event.data.data('relOpts').useZoom).CloudZoom();
                    return false;
                });
            }
        });
        return this;
    };

    $.fn.CloudZoom.defaults = {
        zoomWidth: 'auto',
        zoomHeight: 'auto',
        position: 'right',
        tint: false,
        tintOpacity: 0.5,
        lensOpacity: 0.5,
        softFocus: false,
        smoothMove: 3,
        showTitle: true,
        titleOpacity: 0.5,
        adjustX: 0,
        adjustY: 0
    };

})(jQuery);

srtkrt · 14 Ara 2011

<a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="cloud-zoom-gallery" id="zoom1" rel="useZoom: 'zoom1',SmallImage: '<?php echo $image['thumb']; ?>' "><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>

Bu kod 1.5.3 te çalışmıyor. Hatası küçük resimlere tıklayınca üsteki mouse ile gezilecek alan resmi değişmiyor. ancak inner zoom alanında resim değişiyor.

Opencartta diğer resimler için çalışmıyor bu kod yardım edebilecek birisi varmı acaba

Gökhan TAYLAN · 15 Ara 2011

Version
All Versions
v1.5.1.3
v1.5.1.2
v1.5.1.1
v1.5.1
v1.5.0.5
v1.5.0.4
v1.5.0.3
v1.5.0.2
v1.5.0.1
v1.5.0
v1.4.9.6
v1.4.9.5
v1.4.9.4
v1.4.9.3
v1.4.9.2
v1.4.9.1
v1.4.9
v1.4.8b
v1.4.8
v1.4.7

1.5.3 diye bir sürüm bilmiyorum ! modifiye yazılım kullanıyorsanız kurulumu yapan ile iletişime geçiniz onun hatası olabilir.

yapılan aşamaları ve yardımları inceleyiniz çalışmasa paylaşılmaz. bireysel bir hatanız olabilir. yenisiniz öncelikle forum kurallarını okuyunuz. ÇALIŞMIYOR DEMEK YERİNE , çalıştıramadık veya çalıştıramadım demeniz daha doğru olacaktır.

srtkrt' Alıntı:
<a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="cloud-zoom-gallery" id="zoom1" rel="useZoom: 'zoom1',SmallImage: '<?php echo $image['thumb']; ?>' "><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>

Bu kod 1.5.3 te çalışmıyor. Hatası küçük resimlere tıklayınca üsteki mouse ile gezilecek alan resmi değişmiyor. ancak inner zoom alanında resim değişiyor.

Opencartta diğer resimler için çalışmıyor bu kod yardım edebilecek birisi varmı acaba

srtkrt · 15 Ara 2011

Gökhan Bey merhaba,

Anlatım sorunu için kusura bakmayın. "Çalıştıramadık" düzeltmesini yapıyorum hemen. Opencart Sürümünü bu siteden indirdim. 1.5.1.3.1 Sürümü yazacaktım ancak aradaki 1 eksik yazmısım. Daha önce bir çok modül ve eklentisini kurdum ancak bu modülü defalarca çalıştırmaya çalışmama rağmen olmadı. Kurulumu adım adım yaptım.

www.opencart-tr.com adresinden OC 1.5.1.3.1 Tam Sürümünü indirdim ve hostuma sorunsuz bir şekilde kurdum.

Yaptığım işlemleri sırası ile yazıyorum atladığım bir yermi var acaba?

1. adım olarak :/catalog/view/javascript/jquery klasörünün içine

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

dosyalarını attım.

2. adım olarak : /catalog/view/theme/default/template/common/header.tpl dosyasını açtım ve

Kod:

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

Altına

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

ekledim ve dosyayı kaydederek sunucuya attım.

3. adım olarak : /catalog/view/theme/default/template/product/product.tpl dosyasını açtım ve

ilk işlem :

Kod:

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

yukarıdaki kodu aşağıdaki kod ile değiştirdim

Kod:

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

ikinci işlem :

Kod:

        <a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="fancybox" rel="fancybox"><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>

kodunu buldum ve aşağıdaki ile değiştirdim.

Kod:

<a href="<?php echo $image['popup']; ?>" title="<?php echo $heading_title; ?>" class="cloud-zoom-gallery" id="zoom1" rel="useZoom: 'zoom1',SmallImage: '<?php echo $image['thumb']; ?>' "><img src="<?php echo $image['thumb']; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a>

ve b u dosyayıda değiştirdikten sonra dosyaları sunucuya yolladım.

Sonuç olarak.

Ana resim : Sürekli sabit kalıyor. diğer işlemler normal çalışıyor.

Hata resmi aşağıdaki gibidir. :

Hatam nerde gösterirseniz düzeltme yoluna gideceğim. Ayrıca Admin Panelden yapılması gereken bir şey varmı ?

ozkiremitci · 17 Ara 2011

@srtkrt uygulamanda sorun yok, sen kodu olması gerektiği gibi çalıştırmışsın. Aynı sorunla bende karşılaştım ve 3 haftadır ara ara uğraşlarımda karşılaştığım sorunları burada paylaşıp çözümlemeyi umuyorum.

Versiyon olarak son sürümde(1.5.1.3) fancybox scripti çalışıyor ve resimler popup olarak açılıyor. Önceki sürümlerini hiç test etmedim,kullanmadım. Bundan sonraki açıklamaları ve sorunları 1.5.1.3 sürümü üzerine değerlendiricem.

Bu scripti ürün sayfamızda çalıştırdığımızda birkaç farklı sorunla karşılaşıyoruz. Benim farkettiğim;

1- Ürün önizleme de resmi thumb çektiği için değişiklik olmuyor yada istenilen büyüme sağlanmıyor.
2- resimlerimiz artık popup olarak açılmıyor.
3- Diğer resimler yani varsayılan ürün resmi dışındaki diğer resimlerimize tıkladığımızda popup olarak açılıyor ve önizleme yapamıyoruz. Bu sorunu bu konuya daha önce atılan mesajlarda çözüme kavuşturdular. [4. sayfa 35. mesaj bakınız.]

Bu sorunu çözebilmek için veri tabanı ve php kodlarına baktım, ayrıca template dosyalarına eklememiz gereken kodları ve template dosyalarını da inceledim.

şimdi benim iki sorum var ki bunlar sanırım tüm son sürüm kullanıcıların yaşadığı sorunlar;

1- resimlerde istenilen büyümeyi nasıl sağlayabilirim, anladığım kadarıyla $popup değişkeni ile gelen resim üzerinde büyüme gerçekleştiriliyor. Ayrıca resmin kırpılmamış ilk yüklenen dosyasınıda çekmeye çalıştım fakat "/opencart/data/urunler/upload_edilen_resim.jpg" gördüğünüz gibi "image" dizinini atlatı; bunuda

controller/product/product.php dosyasında;

PHP:

$this->data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));

şu değişikliği yaparak elde etmeye çalıştım;

PHP:

$this->data['popup'] = $product_info['image'];

resmin yeniden boyutlandırılarak $popup ve $thumb a aktarılan kod bloğu;

PHP:

			$this->load->model('tool/image');
			// resme tıklandıktan sonra açılan 'popup' resimi buradan çekiyoruz.
			if ($product_info['image']) {
				$this->data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));
			} else {
				$this->data['popup'] = '';
			}
			// ürün sayfasında küçük resmi ve resim üzerinde gelindiğinde gösterilmesini istediğimiz resmi 'thumb' buradan çekiyoruz.
			if ($product_info['image']) {
				$this->data['thumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height'));
			} else {
				$this->data['thumb'] = '';
			}
			
			$this->data['images'] = array();

2- bu kırpma işleminde artalan kısımları otomatik olarak beyaz veriyor, ben resimlerde siyah arkaplan çalışıyorum, bu artalan kısımları beyazdan siyaha çevirmem için nereye bakmam gerekir?

teşekkür ederim.

bedircanpolat · 23 Ara 2011

Gökhan TAYLAN' Alıntı:

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

PHP:

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

ekle altına

PHP:

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

PHP:

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

PHP:

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

grafikes' Alıntı:
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.

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"

bende 1.5.1 yüklü ve senin dedigin gibi yaptim ama sonra begenmedim sildim, sildikten sonra sayfanin basindaki yeni ürünler sirasinin altin kücük bir resim cikiyor, en son koydugum ürünün kücük resmi hep orda kaliyor, neden oldugu hakkinda bir fikrin varmi

djgun1 · 15 Ocak 2012

Merhaba,
ben 1.5.1.3.1 versiyonunu kullanıyorum.
zoom özelliğini kurdum aktif çalışıyor ama ürünün diğer resimleri ( ufak gözüken ) e tıklandığında popupda açılıyor ona tıklayınca ana resmin bölümünde değişmesini sağlayabilirmiyim ? tabi bunu yaptığımda altta ufak resimlerde ana resminde gözükmesi gerekecek..
nasıl yapabilirim bunu ?

Gökhan TAYLAN · 15 Ocak 2012

konuyu detaylı inceleyin aradığınız cvp paylaşılmıştır.

djgun1' Alıntı:
Merhaba,
ben 1.5.1.3.1 versiyonunu kullanıyorum.
zoom özelliğini kurdum aktif çalışıyor ama ürünün diğer resimleri ( ufak gözüken ) e tıklandığında popupda açılıyor ona tıklayınca ana resmin bölümünde değişmesini sağlayabilirmiyim ? tabi bunu yaptığımda altta ufak resimlerde ana resminde gözükmesi gerekecek..
nasıl yapabilirim bunu ?

ozkiremitci · 25 Ocak 2012

Düzeltme: ÇÖZÜLDÜ, Üzgünüm id="zoom1" 1. resim kısmında silmişim, fakettim ve düzelttim teşekkürler.

@cosanon ve osdem66 arkadaşlar konunun önce ki mesajlarında 1. resim yerine 2. ve 3. resimleri çekip bunlar üzerinde inner zoom' u çözdüğünüzü okudum ve çözümü uyguladım. bendeki sorun 2. ve 3. fotoğraflara tıkladığımda sayfanın üzerine açması. Bunu nasıl 1. resmin bulunduğu yerde açabilirim. kodlarımı inceledim, tüm işlemleri gözden geçirip tekrar tekrar denedim, hatam nedir?

Resimlerin Kod Bloğu;

PHP:

    <div class="left">
      <?php if ($thumb) { ?>
			<div class="image">
			<div class="zoom-section">
			<div class="zoom-small-image">
				<a href="<?php echo $popup; ?>" class = "cloud-zoom" rel="position: 'inside' , showTitle: true, adjustX:-4, adjustY:-4">
				<img src="<?php echo $thumb; ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" id="image">
				</a>
			</div>
			</div>
			</div>
	  <?php } ?>
      <?php if ($images) { ?>
      <div class="image-additional">
        <?php foreach ($images as $image) { ?>
			<a href='<?php echo $image['popup']; ?>' class='cloud-zoom-gallery' title='<?php echo $heading_title; ?>'
			rel="useZoom: 'zoom1', smallImage: '<?php echo $image['popup2']; ?>' ">
			<img src="<?php echo $image['thumb']; ?>" alt = "<?php echo $heading_title; ?>"/></a>
	<?php } ?>
      </div>
      <?php } ?>
    </div>

2. ve 3. resimleri yine de 1. resim kısmında açamadım, şimdi "loading" yazısı ve "resim yok". hatam nedir?

Arkadaşlar üstteki sorumda, tanımladığımız $popup2 değişkenini ekrana yazdırmak istediğimde "tanımlanamayan değişken" hatasını aldım, resimde de gördüğünüz gibi küçük bir düzeltmem kaldığını düşünüyorum, yardımlarınızı bekliyorum.

Tanimsiz · 7 Mar 2012

Merhaba,
1.4.9.5 icin nasıl uygulayabılırız?

tesekkurler

Gökhan TAYLAN · 7 Mar 2012

http://forum.opencart-tr.com/thread-3009.html

bu alandaki bilgileri uygulayabilirsin. sorun çıkmaz.

Tanimsiz' Alıntı:
Merhaba,
1.4.9.5 icin nasıl uygulayabılırız?

tesekkurler

Tanimsiz · 8 Mar 2012

Gökhan TAYLAN' Alıntı:
http://forum.opencart-tr.com/thread-3009.html

bu alandaki bilgileri uygulayabilirsin. sorun çıkmaz.

Tanimsiz' Alıntı:

Merhaba,
1.4.9.5 icin nasıl uygulayabılırız?

tesekkurler

Genişletmek için tıkla ...

Uygulama başarili. Çok teşekkûr ederîm.

Professor Cloud Zoom

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

Ekli dosyalar

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR