CSS ile Resim Önizleme

debreli

OpenCart-TR
Katılım
31 Ağu 2010
Mesajlar
196
Tepkime puanı
0
Puanları
0
Web sitesi
vakifshop.com
adszvoid.png


catalog/view/theme/default/stylesheet/stylesheet.css aç

sonuna ekle
Kod:
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */

}

catalog/controller/module/featured.php bul

Kod:
'image'   		=> $this->model_tool_image->resize($image, 38, 38),

38 yazan yerleri istediğiniz resim boyutlarına ayarlayın.

catalog/view/theme/default/template/module/featured_home.tpl aç
bul
Kod:
<a href="<?php echo str_replace('&', '&', $products[$j]['href']); ?>"><img src="<?php echo $products[$j]['thumb']; ?>" title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" /></a><br />

değiştir

Kod:
<div class="thumbnail"><img src="<?php echo $products[$j]['thumb']; ?>" title="<?php echo $products[$j]['name']; ?>" alt="<?php echo $products[$j]['name']; ?>" onclick="location = '<?php echo str_replace('&', '&', $products[$j]['href']); ?>'"/><span><a href="<?php echo str_replace('&', '&', $products[$j]['href']); ?>"><?php echo $products[$j]['name']; ?></a><br><a href="<?php echo str_replace('&', '&', $products[$j]['href']); ?>"><img src="<?php echo $products[$j]['image']; ?>"></a><br><?php echo $products[$j]['model']; ?><br /><?php if ($display_price) { ?>
      <?php if (!$products[$j]['special']) { ?>
      <?php echo $products[$j]['price']; ?>
      <?php } else { ?>
      <div style="color: #900; font-weight: bold; text-decoration: line-through;"><?php echo $products[$j]['price']; ?></div> <?php echo $products[$j]['special']; ?>
      <?php } ?>
      <a class="button_add_small" href="<?php echo $products[$j]['add']; ?>" title="<?php echo $button_add_to_cart; ?>" >&nbsp;</a>
      <?php } ?>
      <br />
      <?php if ($products[$j]['rating']) { ?>
      <img src="catalog/view/theme/default/image/stars_<?php echo $products[$j]['rating'] . '.png'; ?>" alt="<?php echo $products[$j]['stars']; ?>" />
      <?php } ?></span></div>

<div class="thumbnail">buraya resmin ufak görüntüsü gelicek buraya resm yolu vermek için bu şekilde verin <img src="<?php echo $products[$j]['thumb']; ?>" onclick="location = '<?php echo str_replace('&', '&', $products[$j]['href']); ?>'"/ ><span>bu iki span arasına popup pencerede cıkacak resim ve linkler gelecek</span></div>


stylesheet.css'ye yukarıda ki eklediğiniz koddaki
background-color: lightyellow; popup pencerenin arka planını değştirebilirsiniz.

diğer modüllerede bu sekilde uygulayablirsiniz.​
 

proxlive

OpenCart-TR
Katılım
4 Eyl 2009
Mesajlar
21
Tepkime puanı
0
Puanları
0
eline saglık akrdeş ama sçalışmıyro anlatım eksik
 

debreli

OpenCart-TR
Katılım
31 Ağu 2010
Mesajlar
196
Tepkime puanı
0
Puanları
0
Web sitesi
vakifshop.com
stylesheet.css de eklediğiniz kodda

bul
Kod:
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

değiştir

Kod:
.thumbnail:hover {
	text-decoration:none;
        background-color: transparent;
        z-index: 50;
	font-size: 100%; /* IE5.x/Win duzeltmek icin */
}
 
Üst