50 / 49 / 13
Регистрация: 23.11.2015
Сообщений: 401
|
|
Галерея картинок в Бутстрап25.09.2017, 07:36. Показов 5074. Ответов 6
Метки нет (Все метки)
 Подскажите, пожалуйста, как правильно сделать галерею картинок в Bootstrap? Есть одностраничник landing page, в котором хочу сделать галерею. Поделитесь опытом, как сделать галерею для больших изображений 1920x1080? 1. Нужно ли сжимать 1920x1080 до 340x240 допустим превьюшек (примерно написал) и прописывать две ссылки в <div> для каждой картинки - одну на превью, вторую на полный размер? 2. Как сделать что бы по нажатию на превью картинку - открывалась на полный размер (или максимально возможный) 1920x1080? Потому что сейчас при нажатии, она обрамляется рамкой и сжимается примерно до двух третьих от полного размера, из-за чего появляются искажения на изображении. PS. Так же есть немного другой вопрос, есть фоновое изображение в шапке страницы, справа третья часть размера шапки - фотка, все остальное пространство текстурка (для фона под меню), на компе выглядит отлично, на телефоне показывает середину, как то можно сделать что бы при адаптивке на телефоне показывало именно правую часть фоновой картинки? Заранее благодарю, за любые идеи и помощь в разрешении вопросов!  Добавлено через 7 минут Смысл вопроса в том, если использовать класс thumbnail, будет ли Bootrtap прогружать сразу все фото? Мне нужно, что бы прогружал только превью, а сами фотки грузил только по нажатию на нее. Спасибо
0
|
|
(| 25.09.2017, 07:36 | |
|
Ответы с готовыми решениями:
6
Галерея картинок на HTML/CSS Простая галерея: смена картинок по клику |
|
84 / 81 / 42
Регистрация: 20.01.2017
Сообщений: 219
|
|
| 25.09.2017, 19:58 | |
|
класс thumbnail задаёт только внешний вид блока.
то что вы хотите, делается с помощью различных js галерей, типа fancyBox.
1
|
|
|
50 / 49 / 13
Регистрация: 23.11.2015
Сообщений: 401
|
|
| 25.09.2017, 20:01 [ТС] | |
|
SergioSup, благодарю! А нет какого то примера кода у вас? Как это все связать.
0
|
|
|
84 / 81 / 42
Регистрация: 20.01.2017
Сообщений: 219
|
|
| 26.09.2017, 13:15 | |
 Сообщение было отмечено TurboDuck как решение
Решение
как подключить и примеры кода можно найти в документации к плагину.
Как вариант: http://fancyapps.com/fancybox/3/ https://blueimp.github.io/Gallery/ http://lokeshdhakar.com/projects/lightbox2/
1
|
|
|
50 / 49 / 13
Регистрация: 23.11.2015
Сообщений: 401
|
|
| 26.09.2017, 14:32 [ТС] | |
|
SergioSup, благодарю!
0
|
|
35 / 33 / 12
Регистрация: 11.11.2014
Сообщений: 303
|
|
| 26.09.2017, 17:15 | |
|
Я 600px в ширину выставляю картинки. А чтобы лишнее не грузить на маленьких мониторах, можно погуглить и найти соответствующий скрипт crop.
Вообще смотря какие ячейки на каком разрешении. Например col-md-6 - 600px col-xs-6 col-sm-6 col-md-4 - 300px достаточно
1
|
|
|
50 / 49 / 13
Регистрация: 23.11.2015
Сообщений: 401
|
|
| 26.09.2017, 18:02 [ТС] | |
|
Амурский, спасибо
0
|
|
| 26.09.2017, 18:02 | |
|
Помогаю со студенческими работами здесь
7
Простенькая галерея. Видно только первые 8м картинок галерея картинок галерея картинок Галерея картинок
Искать еще темы с ответами Или воспользуйтесь поиском по форуму: |
|
Новые блоги и статьи
|
|||
|
Символьное дифференцирование
igorrr37 13.02.2026
/ *
Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2).
Унарный минус обозначается как !
в-строка - входное арифметическое выражение в инфиксной(обычной). . .
|
Камера Toupcam IUA500KMA
Eddy_Em 12.02.2026
Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .
|
И ясному Солнцу
zbw 12.02.2026
И ясному Солнцу,
и светлой Луне.
В мире
покоя нет
и люди
не могут жить в тишине.
А жить им немного лет.
|
«Знание-Сила»
zbw 12.02.2026
«Знание-Сила»
«Время-Деньги»
«Деньги -Пуля»
|
|
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога
Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
|
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога
Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
|
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога
Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
|
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
|