Link do strony gdzie można zobaczyć działanie powiększania grafiki ogłoszenia.
http://www.skrypt2.pusku.com/oferty.php?kategoria=17
Kod javascript do powiększania i zmniejszania obrazka:
Kod: Zaznacz cały
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var indexes = new Array();
function zoomIn(item) {
if(!indexes[item.attr('src')]) {
item.stop();
item.animate({
width: item.width() * 2 + 'px',
height: item.height() * 2 + 'px'
}, 1000, function() {
indexes[item.attr('src')] = true;
});
}
}
function zoomOut(item) {
if(indexes[item.attr('src')]) {
item.stop();
item.animate({
width: item.width() * 0.5 + 'px',
height: item.height() * 0.5 + 'px'
}, 1000, function() {
indexes[item.attr('src')] = false;
});
}
}
</script>
Kod: Zaznacz cały
<div class="first">
<div class="grafikauz">
<a href="image.php?id=<?php echo $zdjecie['id']; ?>">
<img src="zdjecia/<?php echo $zdjecie['zdjecie']?>" width="115" height="165" onload="indexes[this.src] = true;" onmouseover="zoomIn($(this));" onmouseout="zoomOut($(this));" />
</a>
</div>
.
. Dalszy kod
.
</div>
Kod: Zaznacz cały
div.grafikauz
{
position:relative; top: -37px; right:0px; bottom:0px; left: -15px;
z-index: 100;
width: 200px;
border: solid red 0px;
}
div.first
{
width: 928px;
height: 170px;
float: left;
margin: 0 auto;
border: solid blue 0px;
background-image: url('');
text-align: center;
background-repeat: no-repeat;
background-position: center;
position:relative; top: 0px; right:0px; bottom:0px; left: 4px;
}
