[KOD] Resimin üzerine gelince önizleme

BLaDe

OpenCart-TR
Katılım
4 Şub 2010
Mesajlar
459
Tepkime puanı
0
Puanları
0
Yaş
36
Konum
izmir
Web sitesi
www.ondermedikal.com
Merhaba arkadaşlar;

verilmiş olan diğer resim üzerine gelince ön izleme araclarından biraz daha farklıdır.

hangi ürünlerde kullanmak istiyorsan onun modül dosyasını editleyebilirsin.

Yeni Ürünler => latest.tpl
kampanyalı ürünler => sipecial.tpl
sizin için sectiklerimiz => featured.tpl
En Çok Satılanlar => bestteller.tpl

Yeni ürünleri örnek olarak anlatacağım;

PHP:
catalog/controller/module/latest.php aç

Bul;
PHP:
'rating'     => $rating,

Altına Ekle;
PHP:
'image'     => $this->model_tool_image->resize($result['image'], 300, 300),

PHP:
catalog/view/theme/KENDİ-TEMANIZ/template/module/latest.tpl

Açıyoruz ve kodu buluyoruz.
PHP:
<div class="box">
En üst kısımda;

Hemen önüne yani kodlar en başta olacak şekilde ekliyoruz.
PHP:
<style type="text/css">
.tip {
	color: #38B0E3;
	background:#e3e3e3;
	display:none; 
	padding:3px;
	position:absolute;	z-index:1000;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
	//Tooltips
	$(".tip_trigger").hover(function(){
		tip = $(this).find('.tip');
		tip.show(); 
	}, function() {
		tip.hide();  
	}).mousemove(function(e) {
		var mousex = e.pageX + 20;
		var mousey = e.pageY + 20; 
		var tipWidth = tip.width(); 
		var tipHeight = tip.height(350); 
		
		var tipVisX = $(window).width() - (mousex + tipWidth);
		var tipVisY = $(window).height() - (mousey + tipHeight);
		  
		if ( tipVisX < 20 ) { 
			mousex = e.pageX - tipWidth - 20;
		} if ( tipVisY < 20 ) { 
			mousey = e.pageY - tipHeight - 20;
		} 
		tip.css({  center: mousey, center: mousex });
	});
});
</script>

kodların ne işe yaradığını en altta anlatacağım.

Bul;
PHP:
        <div class="image"><a href="<?php echo $product['href']; ?>"><img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>" /></a></div>

Değiştir;
PHP:
        <div class="container">
    <a href="<?php echo $product['href']; ?>" class="tip_trigger">
        <img src="<?php echo $product['thumb']; ?>" alt="<?php echo $product['name']; ?>"/>
        <span class="tip" style="width: 300px;"><img src="<?php echo $product['image']; ?>" style="float: center; margin-right: 20px;" width="300" height="300" alt="<?php echo $product['name']; ?>" /><center><?php echo $product['name']; ?></br> <div class="price"><?php if (!$product['special']) { ?><?php echo $product['price']; ?><?php } else { ?><s><?php echo $product['price']; ?></s></br> <b><?php echo $product['special']; ?></b><?php } ?></b></p></center></a></div>

Örnek olarak ;
www.ondermedikal.com sitesinden bakabilirsin.
s5vbyd.png


CSS Kodların Açıklaması ;

.tip {
color: #38B0E3; ===> Ürün adı Rengi
background:#e3e3e3; ===> tablonun rengi
display:none; ===> resim ile alakalı dokunmayın.
padding:3px; ===> Tablo Kenar Kalınlıkları
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 10px; ===>Tablonun kenar yuvarlakları
}

Resim Boyutlarını Kendinize Göre Ayarlayabilirsiniz. Ben 300 Yaptım...
 

smartcoder

OpenCart-TR
Katılım
15 Şub 2011
Mesajlar
27
Tepkime puanı
0
Puanları
0
hocam
bitanede benden :D

http://www.professorcloud.com/mainsite/cloud-zoom.htm
 

alisim

OpenCart-TR
Katılım
20 May 2011
Mesajlar
42
Tepkime puanı
0
Puanları
0
Yaş
46
Eline sağlık kardeşim paylaşım için teşekkürler.
 

smartcoder

OpenCart-TR
Katılım
15 Şub 2011
Mesajlar
27
Tepkime puanı
0
Puanları
0
hocam
eklenti bu sitede yok...
opencarta entegre etmek gerekiyor... :D
sizden yani :D
hocam biri entegre etsin işte...

kod
http://www.2shared.com/file/nTT2EJx3/jquery_Cloud_Zoom.html
 

almerax

OpenCart-TR
Katılım
1 Eki 2011
Mesajlar
2
Tepkime puanı
0
Puanları
0
üstadım bu dediklerinizi yaptım yeni eklenen ürünler için sorunsuz çalışmakta, lakin sizin için sectiklerimiz bölümünde yapmaya kalktım faturet.php dosyasına 'image' => $this->model_tool_image->resize($result['image'], 300, 300), kodu ekleyince sayfanın en üstünde Notice: Undefined variable: result in /home/ecemcice/public_html/ecem/catalog/controller/module/featured.php on line 53

yazıyor ve menü isimlerindeki ve dosya isimlerindeki türkçe karekterler değişti
resmin üzerine gelincede çerçeve çıkıyor ve resim önizlemesi görünmüyor...
featured.php içerisine eklediğim bu satırı 'image' => $this->model_tool_image->resize($result['image'], 300, 300),
silince karekterler düzeliyor ve sayfanın en başındaki undefined hatası gidiyor ama sizin için sectiklerimiz bölümündeki ürünlerin üzerine gelince yine çerçeve çıkıyor ama içerisinde resim önizlemesi görünmüyor, ne yapmamı tavsiye edersiniz, cevaplarınızı bekliyorum şimdiden teşekkürler...
 

tutkun

OpenCart-TR
Katılım
15 Kas 2011
Mesajlar
2
Tepkime puanı
0
Puanları
0
Arkadaşlar, yeni konu açamadım. Açacak olduğum konu ile ilgili bir başlık da bulamadım. O yüzden buraya yazıyorum:

Ben ürün resmi eklediğim zaman ürün resminin yüksekliğinin genişliğine oranı birebir değilse küçük olan kısımda beyaz alan oluşuyor.

Yani elimdeki resim 500x550 diyelim.
Ürün sayfamda gözükecek resim 220x220 boyutunda olsun.
Ürünlere resim eklediğimde thumbs resmi 220x220 oranına küçültülüyor.
Ama orjinal resim 500x550 olduğu için thumbs resminin üstten ve alttan 25'er px beyaz bant oluşuyor.

Bunu önlemek için resme zoom yapacak eklentiyi hangi dosyada monte ederim?
 

muhammettas

OpenCart-TR
Katılım
24 Ocak 2011
Mesajlar
10
Tepkime puanı
0
Puanları
0
dediklerinizn aynısını uyguladım fakat mozilla chrome de süper ççalışıyor ama internet explorerde tek resim gözüküyor ve kayık gösteriyor
 

vedattutal

OpenCart-TR
Katılım
6 Şub 2011
Mesajlar
35
Tepkime puanı
0
Puanları
0
denileni harfiyen yaptım ama haat alıyorum defult temada :(

pardon İE de hata veriyor nasıl ayarlarım hata vermemesini ie (İnternet Explorer) ?
 

sBrHvRn

OpenCart-TR
Katılım
26 Nis 2011
Mesajlar
43
Tepkime puanı
0
Puanları
0
Yaş
32
Konum
Van
1.4.9.x için olanı war mı acaba arkadaşlar ?
 

asded

OpenCart-TR
Katılım
27 May 2010
Mesajlar
5
Tepkime puanı
0
Puanları
0
HOCAM BEN CALİŞTİRDİM FAKAT BENİM TEMAMDA TAB MENÜ MODÜLÜ VAR VE ÖNİZLEMEDEKİ RESİM ALTİNDA KALİYOR BUNU NASİL HALEDE BİLİRİM
 

mumisigi34

OpenCart-TR
Katılım
21 Tem 2013
Mesajlar
12
Tepkime puanı
0
Puanları
0
catalog/view/theme/KENDİ-TEMANIZ/template/module/latest.tpl

un içinde

<div class="box">

kodu yok bende nasıl yapabilirim. versiyon 1.5.1.3.1
 
Üst