Старый 23.04.2012, 21:23   #1   
Форумец
 
Сообщений: 71
Регистрация: 13.01.2010

rotuf вне форума Не в сети
Скрипт увеличения катинки.

Нужна помощь по скрипту, я в них не силен. Это скрипт увеличения картинки по клику. Собираюсь его использовать с 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);
    }
}
  Ответить с цитированием
Старый 23.04.2012, 22:24   #2   
blocked
 
Сообщений: 20,415
Регистрация: 21.03.2010
Записей в дневнике: 1

anadonam вне форума Не в сети
http://highslide.com/
  Ответить с цитированием
Старый 23.04.2012, 22:30   #3   
Форумец
 
Сообщений: 71
Регистрация: 13.01.2010

rotuf вне форума Не в сети
Ответ по поводу highslide.com
Цитата:
Сообщение от rotuf - уже писал Посмотреть сообщение
Прересмотрел много разных скриптов, но все они большие, навороченные, с кучей настроек. Этот единственный простой, маленький, прост в использовании.
Меня интересует только этот.

Последний раз редактировалось rotuf; 23.04.2012 в 23:48.
  Ответить с цитированием
Старый 23.04.2012, 22:33   #4   
blocked
 
Сообщений: 20,415
Регистрация: 21.03.2010
Записей в дневнике: 1

anadonam вне форума Не в сети
у всех навороченных есть настройки по умолчанию -подключил в хедере, прописал сласс к ссылке и всё работает (5 минут всей возни )...
ну маленький так маленький .. хозяин барин.
  Ответить с цитированием
Старый 23.04.2012, 22:54   #5   
highly mean
 
Сообщений: 1,128
Регистрация: 26.05.2011
Возраст: 35

silly вне форума Не в сети
Цитата:
Сообщение от rotuf Посмотреть сообщение
Меня интересует только этот.
Ну так сам и чини…
  Ответить с цитированием
Старый 23.04.2012, 23:07   #6   
Форумец
 
Сообщений: 71
Регистрация: 13.01.2010

rotuf вне форума Не в сети
Цитата:
Сообщение от silly Посмотреть сообщение
Ну так сам и чини…
silly, Ну ты правильно подписался "очень средний", это видимо про интелект... В школе умничать будешь.., там пацаны оценят.

Последний раз редактировалось rotuf; 23.04.2012 в 23:45.
  Ответить с цитированием
Старый 23.04.2012, 23:35   #7   
highly mean
 
Сообщений: 1,128
Регистрация: 26.05.2011
Возраст: 35

silly вне форума Не в сети
Что ни раздел, так везде оценивают степень моего интеллекта o_O Вы серьезно считаете, что я думаю перед тем как писать?
  Ответить с цитированием
Старый 24.04.2012, 07:42   #8   
Эльфосамец
 
Аватар для VaUlt
 
Сообщений: 8,829
Регистрация: 18.08.2002

VaUlt вне форума Не в сети
rotuf, давай я тебе поясню - ты выложил кусок какого-то кода, и предложил людям в нем разобраться где работает неправильно, почитав листинг довольно приличного количества строк. Для таких заданий есть "Битва экстрасенсов" на ТНТ.

А вот выложил бы на хостинг html-лку с работающим примером, эти люди вместо зубоскальства залезли бы и поковыряли, мож бы чем помогли, не пришлось бы портить себе карму, незаслуженно обзывая собеседников нехорошими словами.
  Ответить с цитированием
Старый 24.04.2012, 09:23   #9   
Форумец
 
Сообщений: 3,705
Регистрация: 02.08.2006

svga вне форума Не в сети
фигня какая-то. допиливать данный вариант придецца до разрастания его в "они большие, навороченные, с кучей настроек".

У современных браузеров - хрен проскочишь.
  Ответить с цитированием
Старый 26.04.2012, 12:32   #10   
noindex
 
Аватар для noggano77777
 
Сообщений: 1,218
Регистрация: 20.12.2009
Возраст: 39

noggano77777 вне форума Не в сети
А что такое катинка ?
  Ответить с цитированием
Старый 02.07.2012, 22:38   #11   
blocked
 
Сообщений: 20,415
Регистрация: 21.03.2010
Записей в дневнике: 1

anadonam вне форума Не в сети
noggano77777, наверное пикча
  Ответить с цитированием
Поиск в теме: 



Быстрый переход:

  Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения
BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. Перевод: zCarot
Support by DrIQ & Netwind