JQZoom ile Ürün Resimlerini Önizleme

tukrok

OpenCart-TR
Katılım
8 Ara 2009
Mesajlar
37
Tepkime puanı
0
Puanları
0
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;
}
 

Ekli dosyalar

  • jqzoom_ev1.0.1.zip
    509.6 KB · Görüntüleme: 1,059

mirac

OpenCart-TR
Katılım
7 Şub 2010
Mesajlar
1,383
Tepkime puanı
0
Puanları
36
Yaş
42
Konum
Beykoz____
Web sitesi
www.notebook-cantasi.com
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

OpenCart-TR
Katılım
22 Nis 2010
Mesajlar
63
Tepkime puanı
0
Puanları
0
Yaş
38
Konum
istanbul
RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

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

sahinb

OpenCart-TR
Katılım
3 May 2010
Mesajlar
5
Tepkime puanı
0
Puanları
0
RE: [KOD] JQZoom ile Ürün Resimlerini Önizleme

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

proxlive

OpenCart-TR
Katılım
4 Eyl 2009
Mesajlar
21
Tepkime puanı
0
Puanları
0
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

OpenCart-TR
Katılım
7 Şub 2010
Mesajlar
1,383
Tepkime puanı
0
Puanları
36
Yaş
42
Konum
Beykoz____
Web sitesi
www.notebook-cantasi.com
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

OpenCart-TR
Katılım
4 Eyl 2009
Mesajlar
21
Tepkime puanı
0
Puanları
0
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

Administrator
Yönetici
Katılım
13 Ağu 2009
Mesajlar
3,200
Tepkime puanı
1
Puanları
38
Yaş
38
Konum
Bursa
Web sitesi
www.opencart-tr.com
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

OpenCart-TR
Katılım
7 Şub 2010
Mesajlar
1,383
Tepkime puanı
0
Puanları
36
Yaş
42
Konum
Beykoz____
Web sitesi
www.notebook-cantasi.com
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

OpenCart-TR
Katılım
14 Nis 2010
Mesajlar
37
Tepkime puanı
0
Puanları
0
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

OpenCart-TR
Katılım
7 Şub 2010
Mesajlar
1,383
Tepkime puanı
0
Puanları
36
Yaş
42
Konum
Beykoz____
Web sitesi
www.notebook-cantasi.com
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">
 

Ekli dosyalar

  • jquery_zoom.zip
    12.1 KB · Görüntüleme: 236

oguzhan51511

OpenCart-TR
Katılım
28 May 2010
Mesajlar
6
Tepkime puanı
0
Puanları
0
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

OpenCart-TR
Katılım
7 Şub 2010
Mesajlar
1,383
Tepkime puanı
0
Puanları
36
Yaş
42
Konum
Beykoz____
Web sitesi
www.notebook-cantasi.com
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

OpenCart-TR
Katılım
28 May 2010
Mesajlar
6
Tepkime puanı
0
Puanları
0
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

OpenCart-TR
Katılım
7 Şub 2010
Mesajlar
1,383
Tepkime puanı
0
Puanları
36
Yaş
42
Konum
Beykoz____
Web sitesi
www.notebook-cantasi.com
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

OpenCart-TR
Katılım
31 May 2010
Mesajlar
22
Tepkime puanı
0
Puanları
0
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

OpenCart-TR
Katılım
7 Şub 2010
Mesajlar
1,383
Tepkime puanı
0
Puanları
36
Yaş
42
Konum
Beykoz____
Web sitesi
www.notebook-cantasi.com
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

OpenCart-TR
Katılım
31 May 2010
Mesajlar
22
Tepkime puanı
0
Puanları
0
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

OpenCart-TR
Katılım
13 Eyl 2009
Mesajlar
19
Tepkime puanı
0
Puanları
0
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

OpenCart-TR
Katılım
30 Haz 2010
Mesajlar
1
Tepkime puanı
0
Puanları
0
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
 
Üst