BLaDe
OpenCart-TR
- Katılım
- 4 Şub 2010
- Mesajlar
- 459
- Tepkime puanı
- 0
- Puanları
- 0
- Yaş
- 37
- 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;
Bul;
Altına Ekle;
Açıyoruz ve kodu buluyoruz.
En üst kısımda;
Hemen önüne yani kodlar en başta olacak şekilde ekliyoruz.
kodların ne işe yaradığını en altta anlatacağım.
Bul;
Değiştir;
Örnek olarak ;
www.ondermedikal.com sitesinden bakabilirsin.
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...
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.tplAçıyoruz ve kodu buluyoruz.
PHP:
<div class="box">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.
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...
