Как сделать лайтбокс ?: концепция - PullRequest
Новая
       22

Как сделать лайтбокс ?: концепция

1 голос
/ 19 декабря 2009

Представьте себе лайтбокс с красивой картинкой внутри и кнопкой где-то рядом, чтобы перейти к следующей картинке ...

Когда пользователь нажимает следующую кнопку, JS делает так: 

var Image = new Image();
Image.onload = getWidth;
Image.onerror = getFailure; 
Image.src = "http://somewebsite.mr/pics/4.png";

Затем, когда изображение загружено, JS переходит в функцию getWidth, чтобы узнать ширину изображения: 

w = this.width;  //height is not needed as CSS will adjust it correctly

После этого JS изменяет ширину лайтбокса в соответствии сширина картинки (с небольшим добавлением отступов для создания границы).И затем JS изменяет атрибут src изображения, который в данный момент отображается в лайтбоксе, на http://somewebsite.mr/pics/4.png. Это меняет изображение в лайтбоксе ...

Это способ построения лайтбоксов?Это работает, но мне нужно убедиться, что это кросс-браузер и работает нормально, несмотря ни на что.Не могли бы вы рассказать мне, что вы знаете о разработке лайтбоксов?Есть ли другой способ сделать работу?Может быть, вы знаете некоторые проблемы, которые могут навредить этой программе?

РЕДАКТИРОВАТЬ: Меня беспокоит, что-то не так с предварительной загрузкой изображения в случае лайтбоксов или нет.Будет ли это кросс-браузер?Я знаю об остальной части работы.Мне просто нужно знать, как менять картинки в лайтбоксе.Я просто новичок в предварительной загрузке изображений.Это основная техника?

1 Ответ

2 голосов
/ 19 декабря 2009

Ваша концепция звучит о праве. Тем не менее, при создании лайтбокса необходимо учитывать множество кросс-браузерных проблем. Я не знаю ни руководства, ни статьи, в которой перечислены все из них, но, возможно, вы найдете вдохновение, изучая исходный код других лайтбоксов. Лично я нашел многогранный лайтбокс Грега Нойштеттера очень простым для понимания и настройки.

...