Модальные окна (типа Lightbox) с быстрой загрузкой изображений

[oleinv]

Большинство модальных окон, которые я видел (всякие вариации Lightbox) показывают изображения только после их (изображений) загрузки. Т.е. всплывает такое модальное окно, мы смотрим пол часа на это окно, и только после полной загрузки изображения мы его увидим. Но на некоторых сайтах (например welovetypography.com и apple.com) изображения показываются по мере загрузки. Не важно на сколько большое изображение, мы сразу видим, как оно постепенно загружается и показывается.

Я не силён в JavaScript и хотелось бы узнать, как это сделать? Наверняка есть готовые решения или можно небольшими изменениями сделать из обычных и "долгих" модальных окон быстрые и удобные.

ДОБАВЛЕНО

Нашёл LightBox под названием ImageZoom. Он как раз умеет делать то, что нужно, единственное он требует MooTools.

Edited May 25, 2009 by oleinv

[Riim]

Наверняка есть готовые решения.

Вы же сами привели два. Что мешает взять любое из них? Совесть что ли? Так я думаю, авторы не против будут.

Edited May 25, 2009 by Riim

[Great Rash]

смотрим пол часа на это окно, и только после полной загрузки изображения мы его увидим

Это ж какое изображение должно быть? У меня картинки никогда не весили больше 100 килобайт.

Думаю, что тут все дело в аяксе. Если картинка показывается, только после того как readystate == 4, то естественно мы не увидим ее, пока она вся не загрузится. Может на тех сайтах вообще не аяксом сделано?

[oleinv]

Вы же сами привели два. Что мешает взять любое из них? Совесть что ли? Так я думаю, авторы не против будут.

Воровать чужой код? Я не хотел бы этого делать. Они нигде не писали про то, что можно пользоваться их наработками и вряд ли так напишут.

Это ж какое изображение должно быть? У меня картинки никогда не весили больше 100 килобайт.

Это условно что "пол часа". Главное смысл. Очень медленно. Особенно если скорость соединения маленькая и картинка хорошего качества.

Кстати, вот пример http://welovetypography.com/post/4067/ Картинка весит 200 КБ. Если бы приходилось ждать как везде, пока не загрузится вся картинка, просмотр этого ресурса превратился бы в настоящую пытку.

Думаю, что тут все дело в аяксе. Если картинка показывается, только после того как readystate == 4, то естественно мы не увидим ее, пока она вся не загрузится. Может на тех сайтах вообще не аяксом сделано?

Я написал, что "не силён в JavaScript". Можно подробнее?

[Veseloff]

Воровать чужой код? Я не хотел бы этого делать. Они нигде не писали про то, что можно пользоваться их наработками и вряд ли так напишут.

Никто не говорит о краже. Стоит просто посмотреть и сделать похожее.

Я написал, что "не силён в JavaScript". Можно подробнее?

Нельзя. Надо учить яваскрипт, а не говорить "я в нем не силён, сделайте за меня сами"

[oleinv]

Никто не говорит о краже. Стоит просто посмотреть и сделать похожее.

Нельзя. Надо учить яваскрипт, а не говорить "я в нем не силён, сделайте за меня сами"

Тогда зачем вообще нужен форум? Можно так на любые вопросы ответить. Тем более есть много готовых решений, свободно выложенных в интернете, может кто знает уже работающее?

[s0rr0w]

Тогда зачем вообще нужен форум? Можно так на любые вопросы ответить. Тем более есть много готовых решений, свободно выложенных в интернете, может кто знает уже работающее?

Да, можно так ответить на любые тупые вопросы.

За сегодня третий раз уже пишу. Форум нужен для всего, кроме как выдавать готовые решения лентяям по типу вас, сударь. Вам нужно готовое решение? Платите деньги!

Не хотите платить - учитесь самостоятельно.

Гугль знает много работающих решений...

Поиск информации - 100$ в час.

[oleinv]

s0rr0w, ты мне очень помог, спасибо тебе. Я знал, что Мир не без добрых людей.

Нашёл LightBox под названием ImageZoom. Он как раз умеет делать то, что нужно, единственное он требует MooTools. Если кто знает еще примеры, то пишите, буду благодарен. Кто хочет учить жизни, просьба не беспокоить.

[s0rr0w]

s0rr0w, ты мне очень помог, спасибо тебе. Я знал, что Мир не без добрых людей.

Будешь меня благодарить потом за то, что ты научишься наконец пользоваться поиском.

Кто хочет учить жизни, просьба не беспокоить.

Ты и без нас прекрасно справляешься.

[oleinv]

Нашёл TinyBox, который весит 3.5KB и не требует никаких дополнительных JavaScript библиотек. Позволяет выводить любой AJAX или HTML. Работает во всех браузерах от IE 6 до Google Chrome. Это то, что я искал. Может кому поможет в дальнейшем.

[keltanas]

Не вижу проблемы. Картинка либо показывается по событию onload - мы ждем, когда она загрузится и только тогда увидим.

А можно сразу показать, не ожидая загрузки. Тогда мы увидим, как она грузиться постепенно.

Чтобы написать просмотр, как на приведенном сайте, особо ваять-то ничего не надо. Там все слишком просто )))

html:

<img src="/images/big_image.jpg" width="640" height="480" alt="" id="big_image" style="display:none;" />

<a href="#" id="clickme">нажми</a>

script:

<script type="text/javascript">

document.getElementById('clickme').onclick = function() {

var img = document.getElementById('big_image');

img.style.display = 'block';

img.onclick = function() {

img.style.display = 'none';

}

return false;

}

</script>

как-то так. не обещаю, что это 100% рабочее, но стремиться нужно к этому ))

а вообще разбирайтесь в шкуре http://visualjquery.com