|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
Опции темы | Поиск в этой теме |
21.01.2015, 17:01 | #1 |
Недотепа
Форумчанин
Регистрация: 18.01.2011
Сообщений: 174
|
Подгрузка картинок ajax'ом
Здравствуйте. Сделал кое-какое подобие галереи. Пример моего сайта . Генерируется каскад превьюшек с id по порядку (showimage1, showimage2, showimage3, итд). По клику открывается картинка из класса 'popupbox'. Все бы ничего, но все картинки грузятся сразу, и при 50 картинках мой сайт начинает весить 8Мб.
Подскажите, как сделать, чтобы изображение подгружалось из папки только после того, как кликнешь на нужную превьюшку? Код HTML:
<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> Код HTML:
.popupbox { position: fixed; left:9999px; } .popupbox:target {left:0px;} Последний раз редактировалось Parallelogram; 21.01.2015 в 17:08. |
21.01.2015, 17:37 | #2 |
Старожил
Регистрация: 30.12.2009
Сообщений: 11,426
|
сделать кнопку "Показать ещё N картинок.." навесить JS которая отправит на хост запрос картинок, сервер сгенерит HTML, а вы добавите его к блоку картинок.
|
22.01.2015, 06:21 | #3 |
Недотепа
Форумчанин
Регистрация: 18.01.2011
Сообщений: 174
|
В том и дело, что мне нужно, чтобы cube - маленькие картинки загрузились все полностью, а big - большие картинки только при просмотре.
|
22.01.2015, 08:07 | #4 |
Старожил
Регистрация: 25.02.2007
Сообщений: 4,160
|
написать код на JS который будет аяксово подгружать содержимое большого файла.
А лучше не изобретать велосипедов а использовать готовые... .например fancybox |
22.01.2015, 11:28 | #5 | |
Старожил
Регистрация: 30.12.2009
Сообщений: 11,426
|
Цитата:
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Ajax подгрузка | Alchemist56 | JavaScript, Ajax | 5 | 05.12.2012 10:15 |
Парсер сайта и ajax подгрузка | CodeNOT | PHP | 6 | 12.10.2012 11:37 |
Веб-камера на сайт. Ajax подгрузка изображений | dem66 | JavaScript, Ajax | 2 | 24.07.2012 11:00 |
Ajax. Подгрузка контента | Избранный | JavaScript, Ajax | 0 | 04.01.2012 13:40 |
Передача картинок на сторону пхп (AJAX) | SkrudjMakdak | JavaScript, Ajax | 1 | 12.02.2011 17:47 |