Если это ваш первый визит, рекомендуем почитать справку по форуму. Для размещения своих сообщений необходимо зарегистрироваться. Для просмотра сообщений выберите раздел. |
![]() |
||
![]() |
![]() |
|
Опции темы
![]() |
![]() |
#1 |
Форумец
Сообщений: 71
Регистрация: 13.01.2010
![]() |
Скрипт увеличения катинки.
Нужна помощь по скрипту, я в них не силен. Это скрипт увеличения картинки по клику. Собираюсь его использовать с HTML документом (1251). Прересмотрел много разных скриптов, но все они большие, навороченные, с кучей настроек. Этот единственный простой, маленький, прост в использовании. Он старенький и возможно поэтому есть небольшая проблема.
Проблема вот в чем: В Опере 9 работает отлично, картинка выезжает по горизонтали и вертикали на центр экрана и увеличивается равномерно во все стороны, а вот в ИЕ8 и Лисе 3 работает не правильно. Картинка выезжает на ценр экрана только по горизонтали и начинает увеличиваться вверх. Проблема в том, что если маленькая картинка стоИт в верху страницы, то она выезжает на средину и не увеличивается, т.к. вверх ей увеличиваться некуда. Помогите подправить код, чтобы она выезжала на средину экрана в ИЕ и Лисе. Код:
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 = "Нажмите для уменьшения"; 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[i] !== this ) window.aImageExpanders[i].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[i] !== this ) window.aImageExpanders[i].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 / 3; } } 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();},1); } } |
![]() |
![]() |
![]() |
#2 |
blocked
|
|
![]() |
![]() |
![]() |
#3 |
Форумец
Сообщений: 71
Регистрация: 13.01.2010
![]() |
Ответ по поводу highslide.com
Меня интересует только этот. Последний раз редактировалось rotuf; 23.04.2012 в 23:48. |
![]() |
![]() |
![]() |
#6 |
Форумец
Сообщений: 71
Регистрация: 13.01.2010
![]() |
silly, Ну ты правильно подписался "очень средний", это видимо про интелект... В школе умничать будешь.., там пацаны оценят.
Последний раз редактировалось rotuf; 23.04.2012 в 23:45. |
![]() |
![]() |
![]() |
#8 |
Эльфосамец
Сообщений: 8,828
Регистрация: 18.08.2002
![]() |
rotuf, давай я тебе поясню - ты выложил кусок какого-то кода, и предложил людям в нем разобраться где работает неправильно, почитав листинг довольно приличного количества строк. Для таких заданий есть "Битва экстрасенсов" на ТНТ.
А вот выложил бы на хостинг html-лку с работающим примером, эти люди вместо зубоскальства залезли бы и поковыряли, мож бы чем помогли, не пришлось бы портить себе карму, незаслуженно обзывая собеседников нехорошими словами. |
![]() |
![]() |
![]() |
#10 |
noindex
Сообщений: 1,218
Регистрация: 20.12.2009
Возраст: 40
![]() |
А что такое катинка ?
|
![]() |
![]() |