JQZoom ile Ürün Resimlerini Önizleme

tukrok · 8 Ara 2009

Zip'in içindeki Js/jqzoom.pack.1.0.1.js dosyasını kopyalayıp, catalog\view\javascript\jquery klasörüne yapıştırın.

Daha sonra hangi template'i kullanıyorsanız,
Catalog\view\theme\TEMPLATE ADI\template\common\herader.tpl dosyasını açın.

Bu Satırı Bulun,

Kod:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>

Altına Bunu Ekleyin

Kod:

<script type="text/javascript" src="catalog/view/javascript/jquery/jqzoom.pack.1.0.1.js"></script>

Daha sonra;

Catalog\view\theme\TEMPLATE ADI\template\product\product.tpl dosyasını açın.

Bu kodu bulun

Kod:

<a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="thickbox">

Bununla Değişitirin.

Kod:

<script type="text/javascript" src="catalog/view/javascript/jquery/jqzoom.pack.1.0.1.js"></script>
<script type="text/javascript"> 
// Get main product image dimensions from db
var imgWidth = 250;
var imgHeight = 250;
$(document).ready(function(){
        
    $('#image').parent().addClass("zoom");
    
    var options =
        {
            zoomWidth: imgWidth, //or change to a number like '250'
            zoomHeight: imgHeight, //or change to a number like '250'
            title: false,
            zoomType:'reverse' // Or 'standard'
        }
    $('.zoom').jqzoom(options);
});
</script>

JQZoom'unuz hayırlı olsun.
Kolay gelsin. ( Opencart'ı bu gün kullanmaya başladım. Güzelmiş..)

catalog\view\javascript\jquery\thickbox\thickbox.css

dosyasının en altına da aşağıdaki css kodlarını eklerseniz, görünüm tam olacaktır :mrgreen:

Kod:

div.jqZoomTitle
{
	z-index:5000;
	text-align:center;
	font-size:11px;
	font-family:Tahoma;
	height:16px;
	padding-top:2px;
	position:absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	color: #FFF;
	background: #999;

}

.jqZoomPup
{
		overflow:hidden;
		background-color: #FFF;
		-moz-opacity:0.6;
		opacity: 0.6;
		filter: alpha(opacity = 60);
		z-index:10;
		border-color:#c4c4c4;
		border-style: solid;
		cursor:crosshair;
}

.jqZoomPup img
{
	border: 0px;
}

.preload{
	-moz-opacity:0.8;
	opacity: 0.8;
   filter: alpha(opacity = 80);
	color: #333;
	font-size: 12px;
	font-family: Tahoma;
   text-decoration: none;
	border: 1px solid #CCC;
   background-color: white;
   padding: 8px;
	text-align:center;
   background-image: url(../images/zoomloader.gif);
   background-repeat: no-repeat;
   background-position: 43px 30px;
	width:90px;
	* width:100px;
	height:43px;
	*height:55px;
	z-index:10;
	position:absolute;
	top:3px;
	left:3px;

}

.jqZoomWindow
{
	border: 1px solid #999;
	background-color: #FFF;
}

mirac · 28 Nis 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

Konu ilk mesajda toplanıp 1.4.7 sürümünde test edilmiştir.. Sorunsuz çalışmaktadır..

samnet · 28 Nis 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

eline sağlık dostum en kısa zamanda ekliycem

sahinb · 6 May 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

teşekkürler 1.4.7 de çalışıyor

proxlive · 11 May 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

eline saglık kardeş ama kod satırları forumda gözükmüyor bu yüzden hangi kod nereye eklenecek blemiyouz eklenmiş yaınlamanız mümkünmü yada modül olarak eklemeniz mümkünmü

mirac · 12 May 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

İlk mesajda hangi kod nereye eklenecek açıklanmış daha başka yapacak birşey yok gibi sanırım özel tasarımdan başka.. Bu iki dosyadaki herhangi bir hata sitede sorunlara neden olacağı için modul olarak yayınlamak yanlış olur.. Konuyu dikkatlice okuyup uygularsanız sorunsuz çalıştırırsınız..

proxlive · 12 May 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

sagol açıklaman için kardeş ama an latmak istedigim anlaşılmamış hangi kod enreye eklenecek gözükmüyor explorer da ve operadaacaba bu sorun nedendir zaten görsem yayınlayın dememki kardeş eger mümkünse 1.4.7 sürümde eklenmiş dosya yükleyemezmisiniz ayda not defterine yazsanızda olursa tabi mümkünse

admin · 12 May 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

IE, Opera, FF, Safari ve Chrome da da bir sorun yok. Kendi tarayıcılarınızı kontrol ediniz.

mirac · 13 May 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

proxlive' Alıntı:
sagol açıklaman için kardeş ama an latmak istedigim anlaşılmamış hangi kod enreye eklenecek gözükmüyor explorer da ve operadaacaba bu sorun nedendir zaten görsem yayınlayın dememki kardeş eger mümkünse 1.4.7 sürümde eklenmiş dosya yükleyemezmisiniz ayda not defterine yazsanızda olursa tabi mümkünse

Alttaki linki deneyiniz..

http://forum.opencart-tr.com/archive/index.php/thread-310.html

byturel · 15 May 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

Aynı sorun bendede var Loading diyor kalıyor 3 tane browserde denedim 3 ündede aynı google crome + mozilla + IE 3 ündede loading dedi kaldı

burada anlatılanları eksiksiz harfi harfine dikkatlice yaptım ama olmadı

mirac · 15 May 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

İşlemleri geri alıp alttaki işlemi yapınız..
Ekteki dosyaları catalog\view\javascript\jquery klasörünün içine atınız..

catalog\view\theme\KULLANDIĞINIZ TEMA\template\common\header.tpl Aç..

Bul..

Kod:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>

Altına Ekle..

Kod:

<script type="text/javascript" src="catalog/view/javascript/jquery/jqzoom.pack.1.0.1.js"></script>
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.jqzoom1.0.1.js"></script>
<link rel="stylesheet" href="catalog/view/javascript/jquery/jqzoom.css" type="text/css">
<style type"text/css">
div.notes{
	font-size:12px;
}
div.notes a{
	color:#990000;
}

</style>
<script type="text/javascript">

$(function() {
	$(".jqzoom").jqzoom();
});
</script>

catalog\view\theme\KULLANDIĞINIZ TEMA\template\product\product.tpl Aç..

Bul..

Kod:

<a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="thickbox">

Sadece zoom özelliğini kullanmak için alttaki kodla değiştiriniz..
Değiştir

Kod:

<a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="jqzoom">

Hem popup thinckbox hemde zoom özelliğini aynı anda kullanmak için alttaki kodu kullanınız..
Değiştir..

Kod:

<a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>" class="thickbox jqzoom">

oguzhan51511 · 29 May 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

mirac' Alıntı:
Konu ilk mesajda toplanıp 1.4.7 sürümünde test edilmiştir.. Sorunsuz çalışmaktadır..

1.4.7 de kurulumu beceremedim sanıyorum. http://bezciogluiletisim.net/upload/index.php
yardımcı olursanız sevinirim

mirac · 30 May 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

Alttaki mesajı inceleyiniz.. İşlemleri yaparsanız çalıştırabilirsiniz..

http://forum.opencart-tr.com/thread-310-post-5497.html#pid5497

oguzhan51511 · 30 May 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

mirac' Alıntı:
Alttaki mesajı inceleyiniz.. İşlemleri yaparsanız çalıştırabilirsiniz..

http://forum.opencart-tr.com/thread-310-post-5497.html#pid5497

bahsettiğin işlemleride uyguladum. fakat hala çalışmıyor. bahsi gecen dosyaları eklemek istedim incelemen için fakat başaramadım. rapide attım. bi incelersen bi hata varmı yaptığım işlemlerde.
http://rapidshare.com/files/393280932/bez.rar.html

mirac · 30 May 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

Ekteki dosyaları catalog\view\javascript\jquery klasörünün içine attığına eminmisin.. Kodlarda sorun yok.. Sunucuda çalışıyorsan ftp kullanıcı adı ve şifreleri pm ile gönder kontrol ederim..

thuleorfe · 1 Haz 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

Benim bir problemim var arkadaşlar Zoom gayet güzel çalışıyor ama , onu kurmadan evvel herhangi bir ürüne girdiğimde , Sepete Ekle dediğimde ürünün tam üstünden güzel bir efekle sepetim kısmına dogru giden bir resim vardı , o şimdi açıklama Tablarının oradan gidiyormuş gibi sepete ama daha aşağıya kaydığı için o ambians bozulmuş durumda , JQZoom da açılan o zoom penceresinin yerini değiştirsem düzelirmi? düzelirse o pencereyi nasıl değiştirebilirim.??

www.thuleorfe.net/open

den bakabilirsiniz......

mirac · 9 Haz 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

thuleorfe' Alıntı:
Benim bir problemim var arkadaşlar Zoom gayet güzel çalışıyor ama , onu kurmadan evvel herhangi bir ürüne girdiğimde , Sepete Ekle dediğimde ürünün tam üstünden güzel bir efekle sepetim kısmına dogru giden bir resim vardı , o şimdi açıklama Tablarının oradan gidiyormuş gibi sepete ama daha aşağıya kaydığı için o ambians bozulmuş durumda , JQZoom da açılan o zoom penceresinin yerini değiştirsem düzelirmi? düzelirse o pencereyi nasıl değiştirebilirim.??

www.thuleorfe.net/open

den bakabilirsiniz......

Eklediğiniz java scriptler birbiriyle çakışıyor ve böyle bir durum ortaya çıkıyor anladığım kadarıyla.. Biraz oynamayla bu hale getirdim ajax kodunu.. Biraz daha kurcalansa istediğin gibi olabilir.. Şu an resim doğru yerden kayıyor gibi ama soldan sağa geçerken mausa çarpınca sinyal veriyor..

catalog\view\theme\KULLANDIĞIN TEMA\template\module\cart.tpl Aç..

Bul..

Kod:

<script type="text/javascript"><!--
$(document).ready(function () {
	$('#add_to_cart').replaceWith('<a onclick="" id="add_to_cart" class="button">' + $('#add_to_cart').html() + '</a>');

	$('#add_to_cart').click(function () {
		$.ajax({
			type: 'post',
			url: 'index.php?route=module/cart/callback',
			dataType: 'html',
			data: $('#product :input'),
			success: function (html) {
				$('#module_cart .middle').html(html);
			},	
			complete: function () {
				var image = $('#image').offset();
				var cart  = $('#module_cart').offset();
	
				$('#image').before('<img src="' + $('#image').attr('src') + '" id="temp" style="position: absolute; top: ' + image.top + 'px; left: ' + image.left + 'px;" />');
	
				params = {
					top : cart.top + 'px',
					left : cart.left + 'px',
					opacity : 0.0,
					width : $('#module_cart').width(),  
					heigth : $('#module_cart').height()
				};		
	
				$('#temp').animate(params, 'slow', false, function () {
					$('#temp').remove();
				});		
			}			
		});			
	});			
});
//--></script>

Değiştir..

Kod:

<script type="text/javascript"><!--
$(document).ready(function () {
	$('#add_to_cart').replaceWith('<a onclick="" id="add_to_cart" class="button">' + $('#add_to_cart').html() + '</a>');

	$('#add_to_cart').click(function () {
		$.ajax({
			type: 'post',
			url: 'index.php?route=module/cart/callback',
			dataType: 'html',
			data: $('#product :input'),
			success: function (html) {
				$('#module_cart .middle').html(html);
			},	
			complete: function () {
				var image = $('#image').offset();
				var cart  = $('#module_cart').offset();
	
				$('#image').before('<img src="' + $('#image').attr('src') + '" id="temp" style="position: absolute; top: ' + image.top + '-250px; left: ' + image.left + '-250px;" />');
	
				params = {
					top : cart.top + '-250px',
					left : cart.left + '-250px',
					opacity : 0.0,
					width : $('#module_cart').width(),  
					heigth : $('#module_cart').height()
				};		
	
				$('#temp').animate(params, 'slow', false, function () {
					$('#temp').remove();
				});		
			}			
		});			
	});			
});
//--></script>

Resmin açılma yerinide alttaki işlemle yapabilirsiniz..

Bul..

Kod:

<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.3.2.min.js"></script>

Altına ekle..

Kod:

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

\catalog\view\javascript\jquery\jquery.jqzoom1.0.1.js Aç..

Bul..

Kod:

position: "right" ,

Değiştir..

Kod:

position: "left" ,

thuleorfe · 10 Haz 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

waw super su an icin deneme sansım olmayacak ama bu kısmı mutlaka simdi kayıt altına alıp denemesini yapacagım en kısa zaman icerisinde... yardım icin cok tesekkur ederim.

ozmofa · 13 Haz 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

internet explorer 8 de çalışmıyor.
Artı resmin üzerine geldiğinde de looding image deyip kalıyor. Bi çözüm bulamadım :S

ozgurkar · 1 Tem 2010

RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

1.4.8 kullaniyorum verdiginiz kodu denedim fakat loading image deyip kaliyor yardim edebilecek biri yok mu

JQZoom ile Ürün Resimlerini Önizleme

OpenCart-TR

Ekli dosyalar

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

Administrator

OpenCart-TR

OpenCart-TR

OpenCart-TR

Ekli dosyalar

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR

OpenCart-TR