VPF::Подгрузка картинок через ajax - Форум программистов

Parallelogram

Дата 21.1.2015, 17:18 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 14
Регистрация: 22.1.2013

Репутация: нет
Всего: нет

Здравствуйте. Сделал кое-какое подобие галереи. Пример моего сайта. Генерируется каскад превьюшек с id по порядку (showimage1, showimage2, showimage3, итд). По клику открывается картинка из класса 'popupbox'. Все бы ничего, но все картинки грузятся сразу, и при 50 картинках мой сайт начинает весить 8Мб.
Подскажите, как сделать, чтобы изображение подгружалось из папки только после того, как кликнешь на нужную превьюшку?

Код


<div class='gal_img'>
  <div class='pica' style='background:url(site.ru/tb_sdfs.jpg); width:200px; height:200px;'>
    <a height=200 width=200 href='#showimage1' class='popupbox_preview'></a>
  </div>
  <div class='popupbox' id='showimage1'>
    <div class='popupbox_image'>
      <img src='site.ru/sdfs.jpg' height='500'/>
    </div>
  </div>
</div>
<div class='gal_img'>
  <div class='pica' style='background:url(site.ru/tb_23421.jpg); width:200px; height:200px;'>
    <a height=200 width=200 href='#showimage2' class='popupbox_preview'></a>
  </div>
  <div class='popupbox' id='showimage2'>
    <div class='popupbox_image'>
      <img src='site.ru/23421.jpg' height='500'/>
    </div>
  </div>
</div>
<div class='gal_img'>
  <div class='pica' style='background:url(site.ru/tb_ZxzxZX.jpg); width:200px; height:200px;'>
    <a height=200 width=200 href='#showimage3' class='popupbox_preview'></a>
  </div>
  <div class='popupbox' id='showimage3'>
    <div class='popupbox_image'>
      <img src='site.ru/ZxzxZX.jpg' height='500'/>
    </div>
  </div>
</div>

Код


.popupbox {
position: fixed;
left:9999px;
}
.popupbox:target {left:0px;}

sQu1rr

Дата 21.1.2015, 19:59 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 597
Регистрация: 11.11.2008
Где: london

Репутация: 2
Всего: 13

перемещаете src в аттрибут дива - наверх

Код


<div class='popupbox_image' data-src="...">

По нажатию на превью жабаскриптом добавть в нужный <div> - <img> а src взять у этого дива. Вот и усе.
Подсказал

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »