Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 21.01.2015, 17:01   #1
Parallelogram
Недотепа
Форумчанин
 
Регистрация: 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.
Parallelogram вне форума Ответить с цитированием
Старый 21.01.2015, 17:37   #2
Человек_Борща
Старожил
 
Аватар для Человек_Борща
 
Регистрация: 30.12.2009
Сообщений: 11,426
По умолчанию

сделать кнопку "Показать ещё N картинок.." навесить JS которая отправит на хост запрос картинок, сервер сгенерит HTML, а вы добавите его к блоку картинок.
Человек_Борща вне форума Ответить с цитированием
Старый 22.01.2015, 06:21   #3
Parallelogram
Недотепа
Форумчанин
 
Регистрация: 18.01.2011
Сообщений: 174
По умолчанию

В том и дело, что мне нужно, чтобы cube - маленькие картинки загрузились все полностью, а big - большие картинки только при просмотре.
Parallelogram вне форума Ответить с цитированием
Старый 22.01.2015, 08:07   #4
ADSoft
Старожил
 
Регистрация: 25.02.2007
Сообщений: 4,156
По умолчанию

написать код на JS который будет аяксово подгружать содержимое большого файла.
А лучше не изобретать велосипедов а использовать готовые... .например fancybox
ADSoft вне форума Ответить с цитированием
Старый 22.01.2015, 11:28   #5
Человек_Борща
Старожил
 
Аватар для Человек_Борща
 
Регистрация: 30.12.2009
Сообщений: 11,426
По умолчанию

Цитата:
В том и дело, что мне нужно, чтобы cube - маленькие картинки загрузились все полностью, а big - большие картинки только при просмотре.
что мешает сделать ссылку "показать полностью" а затем, через AJAX, подгрузить большую картинку?
Человек_Борща вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
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