Был бы признателен если бы подсказали как добавить id для фото которое увеличивается.
Скрипт то работает только увеличении фото происходит не где я нажимаю на фото а в шапки сайта. как то надо координаты задать на центр экрана где бы я не находился либо в вверху либо в низу либо по середине что бы всегда фото увеличивалась в центре. (Не знаю какое слово правильное подобрать глобальные координаты что ли 😆)
Не помогло :(
Выложил фото там нарисовал что происходит
когда опускаюсь в самый низ и нажимаю на фото то его вообще не видно так как оно открывается в шапки сайта
в этом то и проблема я js не знаю php без проблем. Как то надо выводить в центре экрана, а как.... все равно спасибо. Буду дальше голову ломать
<table class='krani'> <tr> <td class='pace'> <p class='krani_p'>База: Урал, Стрела: 8 м, Пробег: 2500, Привод: 4x4x4, Грузоподъемность: 25, Год выпуска: 2005, Регион: Иркутск, Дополнительная информация: Хороший кран</p> </td> <td> <p><a href="big.jpg" onclick="this.href = 'javascript:void(0);';"> <img src="small.jpg" border="0" onClick="new ImageExpander(this, 'big.jpg');"> </a></p> </a> </td> <td class='pacecen'> <p class='krani_p'>Цена: 15000</p> </td> <td> <p class='krani_p'><a href='zakaz.php?id=1'>Заказать</a> </p> </td> </tr> </table>
VanKar добавил 10.03.2010 в 10:53
Я код еще изменил
<?php $result = mysql_query ("SELECT * FROM krani ORDER BY cena",$db); $myrow = mysql_fetch_array ($result); do{ $id = $myrow["id"]; $fo="admin/"; printf ("<table class='krani'> <tr> <td class='pace'> <p class='krani_p'>База: %s, Стрела: %s, Пробег: %s, Привод: %s, Грузоподъемность: %s, Год выпуска: %s, Регион: %s, Дополнительная информация: %s</p> </td> <td> <p>%s</p> </a> </td> <td class='pacecen'> <p class='krani_p'>Цена: %s</p> </td> <td> <p class='krani_p'><a href='zakaz.php?id=$id'>Заказать</a> </p> </td> </tr> </table></td>", $myrow["base"], $myrow["strela"],$myrow["probeg"],$myrow["privod"],$myrow["gruzpod"],$myrow["godv"],$myrow["region"],$myrow["dop"],$myrow["putk"],$myrow["cena"]); } while ($myrow = mysql_fetch_array ($result)); ?>
для проверки сделал, а толку все равно нет.
VanKar добавил 10.03.2010 в 10:55
Вот сам js
function ImageExpander(oThumb, sImgSrc) { // store thumbnail image and overwrite its onclick handler. this.oThumb = oThumb; this.oThumb.expander = this; this.oThumb.onclick = function() { this.expander.expand(); } // record original size this.smallWidth = oThumb.offsetWidth; this.smallHeight = oThumb.offsetHeight; this.bExpand = true; this.bTicks = false; // self organized list if ( !window.aImageExpanders ) { window.aImageExpanders = new Array(); } window.aImageExpanders.push(this); // create the full sized image. this.oImg = new Image(); this.oImg.expander = this; this.oImg.onload = function(){this.expander.onload();} this.oImg.src = sImgSrc; } ImageExpander.prototype.onload = function() { this.oDiv = document.createElement("div"); document.body.appendChild(this.oDiv); this.oDiv.appendChild(this.oImg); this.oDiv.style.position = "absolute"; this.oDiv.expander = this; this.oDiv.onclick = function() {this.expander.toggle();}; this.oImg.title = "Click to reduce."; this.bigWidth = this.oImg.width; this.bigHeight = this.oImg.height; if ( this.bExpand ) { this.expand(); } else { this.oDiv.style.visibility = "hidden"; this.oImg.style.visibility = "hidden"; } } ImageExpander.prototype.toggle = function() { this.bExpand = !this.bExpand; if ( this.bExpand ) { for ( var i in window.aImageExpanders ) if ( window.aImageExpanders !== this ) window.aImageExpanders.reduce(); } } ImageExpander.prototype.expand = function() { // set direction of expansion. this.bExpand = true; // set all other images to reduce for ( var i in window.aImageExpanders ) if ( window.aImageExpanders !== this ) window.aImageExpanders.reduce(); // if not loaded, don't continue just yet if ( !this.oDiv ) return; // hide the thumbnail this.oThumb.style.visibility = "hidden"; // calculate initial dimensions this.x = this.oThumb.offsetLeft; this.y = this.oThumb.offsetTop; this.w = this.oThumb.clientWidth; this.h = this.oThumb.clientHeight; this.oDiv.style.left = this.x + "px"; this.oDiv.style.top = this.y + "px"; this.oImg.style.width = this.w + "px"; this.oImg.style.height = this.h + "px"; this.oDiv.style.visibility = "visible"; this.oImg.style.visibility = "visible"; // start the animation engine. if ( !this.bTicks ) { this.bTicks = true; var pThis = this; window.setTimeout(function(){pThis.tick();},25); } } ImageExpander.prototype.reduce = function() { // set direction of expansion. this.bExpand = false; } ImageExpander.prototype.tick = function() { // calculate screen dimensions var cw = document.body.clientWidth; var ch = document.body.clientHeight; var cx = document.body.scrollLeft + cw / 2; var cy = document.body.scrollTop + ch / 2; // calculate target var tw,th,tx,ty; if ( this.bExpand ) { tw = this.bigWidth; th = this.bigHeight; if ( tw > cw ) { th *= cw / tw; tw = cw; } if ( th > ch ) { tw *= ch / th; th = ch; } tx = cx - tw / 2; ty = cy - th / 2; } else { tw = this.smallWidth; th = this.smallHeight; tx = this.oThumb.offsetLeft; ty = this.oThumb.offsetTop; } // move 5% closer to target var nHit = 0; var fMove = function(n,tn) { var dn = tn - n; if ( Math.abs(dn) < 3 ) { nHit++; return tn; } else { return n + dn / 10; } } this.x = fMove(this.x, tx); this.y = fMove(this.y, ty); this.w = fMove(this.w, tw); this.h = fMove(this.h, th); this.oDiv.style.left = this.x + "px"; this.oDiv.style.top = this.y + "px"; this.oImg.style.width = this.w + "px"; this.oImg.style.height = this.h + "px"; // if reducing and size/position is a match, stop the tick if ( !this.bExpand && (nHit == 4) ) { this.oImg.style.visibility = "hidden"; this.oDiv.style.visibility = "hidden"; this.oThumb.style.visibility = "visible"; this.bTicks = false; } if ( this.bTicks ) { var pThis = this; window.setTimeout(function(){pThis.tick();},25); } }