Галерея фото с увеличением при нажатии, лайтбоксы webflow
Сегодня мы сделаем очень популярный блок на сайтах, со списком фотографий который при клике будут открываться в большом размере. При это мы их между собой свяжем, добавим описание, которое будет выводится при открытии, заанимируем все это дело, а так же заадаптивим.
Ссылка на второе видео по галлереям с не стандартной сеткой и клёвой анимацией • Ассиметричная галлерея...
•••••••••••••••••••••••••••••••
- Полезные штуки для webflow freelance-blog.com/webflow/
- Индивидуальное обучение freelance-blog.com/study/
•••••••••••••••••••••••••••••••
БЕСПЛАТНЫЕ курсы по webflow:
👉 • Базовый (для новичка) • Трелло для фрилансера,...
👉 • Портфолио для фрилансера (уровень средний) • Курс по созданию портф...
👉 • Портфолио для студии (уровень сложный) • Бесплатный курс по раз...
👉 • Делаем сложный сайт (уровень профи) • Сайт фотографа, беспла...
•••••••••••••••••••••••••••••••
Если вы хотите, зарабатывать те деньги, которые ждут вас через 5 лет самостоятельного роста, буквально телепортироваться в будущее и начать делать профессиональные сайты уже сейчас - тогда я способен вам помочь! freelance-blog.com/study/
Нет никакого потока, групп, кураторов. Только вы и я. Прокачиваю именно вас.
•••••••••••••••••••••••••••••••
Моя почта - artstrangers@gmail.com
Телеграм @artstranger
•••••••••••••••••••••••••••••••
👉 • Портфолио - freelance-blog.com/
👉 • Инстаграм - / artstranger.ru
👉 • Бесплатные плюшки - freelance-blog.com/webflow/
👉 • Материалы для уроков - freelance-blog.webflow.io/
👉 • Индивидуальное обучение - freelance-blog.com/study/
•••••••••••••••••••••••••••••••
Пікірлер: 57
Ваши уроки - это то, что я искала. Очень грамотно объясняете. Думала, что grid - это темный лес. Сейчас в восторге. Сложные вещи кажутся гораздо проще. Спасибо.
@freelance-pro
2 жыл бұрын
Пожалуйста, рад стараться))
Спасибо, полезно!
@freelance-pro
7 ай бұрын
Пожалуйста ☺️ рад слышать
Элемент с лупой при ховере прикольный. Но как на адаптивах показать юзеру, что на картинку можно кликнуть и раскрыть ее? Там ведь ховера нет.
@freelance-pro
3 ай бұрын
На мобильной версии лупу должно быть сразу видно
Дмитрий, большое спасибо за ваши видео. Может у вас есть уроки как сделать оригинальный блок с видео (хоть с загруженными, хоть с ютуб канала). Это может быть например вертикальный слайдер с маленькими окнами, и одним сбоку, который можно запустить для просмотра. Не могу найти ничего подходящего на просторах интернета.
@freelance-pro
2 жыл бұрын
Пожалуйста, видео такого нет но сделать это просто. Все как вы пишите просто делайте в вебфлоу, добавьте на страницу слайдер в него, ограничьте ему ширину (что бы сделать его вертикальным) и добавьте туда видео, или же грид, а потом в него видео если нужна нестандартная (не в столбик) структура, а сбоку от слайдера еще одно видео и будет все как вы описали! Просто материализуйте свои мысли)) Если вам сложно такое реализовать, то приходите ко мне на индивидуальное обучение artstranger.ru/study/ и будем прокачивать ваши навыки))
Здраствуйте! А возможон сделать так??: при наведении фотка становиться цветной и черно-белой и при этом при включении листается этой фотки можно их листать, но с другой коллекиции. (например: у меня порфтолио, нужно листать проект , они все разные, а первая фотка только заглавная, но привключении одной фотки можно пролистать весь проект?
@freelance-pro
11 ай бұрын
Здравствуйте, да так сделать возможно.
Добрый день, спасибо Вам! Подскажите пожалуйста, если нужно что бы в лайтбокс были скругленные углы, какие нужны настройки? (у меня при увеличении изображение становится квадратным, хотя и картинке и и лайтбокс задаю скругленные углы). Заранее спасибо!
@freelance-pro
11 ай бұрын
Задать высоту 100 процентов и оверфлов хидден
И вот еще по мимо того что я у вас спрашивал еще кое что не получается хотел вставить картинку лупа при наведении ставлю ее в абсолют, а она становится просто с боку по отношению к главной картинке, а у вас она должна встать прям по середине ?
@freelance-pro
2 жыл бұрын
Див блок в который вставляете лупу задайте флекс и центрипуйте им все что находится внутри
@user-po2zq8dm3m
2 жыл бұрын
@@freelance-pro Класс все встало куда нужно, а почему не получается изменить ширину первой картинки при чем высота меняется, а ширина почему то нет.
@freelance-pro
2 жыл бұрын
Задавайте параметр ширины в поле width если не поможет то для картини задайте позиционирование absolute а для блока в котором она relative
Здравствуйте! А если мне нужно, что бы в каждом лайтбоксе было несколько картинок. Нажимаешь например на квартиру, а там все ее фотки.
@freelance-pro
2 жыл бұрын
В настройках справа можно добавить неограниченное количество изображений (если не разберётесь напишите я скину скриншот)
Подскажите пожалуйста почему может смещаться картинка в окне просмотра лайтбокса?
@freelance-pro
8 ай бұрын
Для нее задано смещение в стилях или другая причина не глядя на ваш проект невозможно ее найти, приходите на обучение и со всем разберемся 😉
Спасибо, Дмитрий. Возможно на сайте сделать защиту от копировании фотографий, когда нажимаешь на правую кнопку мышки. Какие виды защиты есть. Спрашивают клиенты как можно защитить контент от копирования, помима воденых знаков?
@freelance-pro
9 ай бұрын
Никак не защитить но вот правую кнопку мышки можно отключить есть специальный скрипт (в Гугле найдете) его надо дожить в хед каждой страницы
@virtuozfilm793
9 ай бұрын
Спасибо
@freelance-pro
9 ай бұрын
Пожалуйста 🤗
Вот пытаюсь воспроизвести ваше видео про установку Lightbox вроде все понятно вот только не могу понять почему не получается у начального фото которое маленькое поменять размер вернее длинна меняется, а ширина нет, а мне нужно картинку немного увеличить?
@user-po2zq8dm3m
2 жыл бұрын
Пробовал изменить ширину как и на фото так и в самом Lightbox ничего не получается
@freelance-pro
2 жыл бұрын
Что бы ширина поменялась задайте в поле width значение в пикселях, например 300px и картинка сменит свой размер) это сделайте для картинки. Если повторять все как на видео то получится как на видео, возможно вы где-то что-то случайно упустили, тут надо смотреть на ваш макет и записывать видео как исправить, такая функция есть у меня на индивидуальном обучении)) а так по словам сложно понять что не так вы сделали, к сожалению.
@user-po2zq8dm3m
2 жыл бұрын
@@freelance-pro С шириной разобрался просто на просто автоматически у Lightbox были заданы огромные внутренние отступы соответственно из за этого и не мог увеличить размер картинки
@freelance-pro
2 жыл бұрын
Да, есть такой косяк там
@user-po2zq8dm3m
2 жыл бұрын
@@freelance-pro А по поводу отзывов помните я вам писал еще не замарачивались?
А вы часто делаете галереи на сайтах заказчиков?
@alexandrlabazov8210
2 жыл бұрын
Нет. Не делал никому
@freelance-pro
2 жыл бұрын
Ну ниче, все ещё впереди!
@user-tx3xd9dv1d
2 жыл бұрын
Недавно сделал заказчику. Слайдер из карточек товара, а при нажатии на фото открывался вот такая галерея. Прикольно вышло 😃
@freelance-pro
2 жыл бұрын
Да это классное решение))
@gromova_seo
2 жыл бұрын
Делалаю, обычно приходиться работать с готовыми сайтами, а верстать в webflow - очень люблю.
Тут у меня прикол не могу понять почему у меня какие я либо картинки не загружал на сайт улетают в F Absolute не могу найти причину проверил все что можно в плоть до Section все находится в Static, ладно я постоянно переставляю картинки в static где это возможно, но когда я ставлю картинку в Lightbox то само собой там ни как не изменишь у картинки Position и соответственно картинка стоит как попало потому что находится в Absolute, я уже грешным делом подумал что что то действует с соседней секции если это возможно если нет тогда что?
@freelance-pro
2 жыл бұрын
Вы скорее всего случайно задали абсолют для дочернего класса картинок и все они теперь в абсолюте, что бы проверить так ли это создайте новый сайт и попробуйте там картинки по добавлять
@user-po2zq8dm3m
2 жыл бұрын
На другом шаблоне я пробовал все нормально ничего в Absolut не улетает, а как убрать то что я наделал ?
@freelance-pro
2 жыл бұрын
Добавьте картинку кликните по ней далее по полю где вводится стиль и по фиолетового классу image или как там оно написано и после в позиционирование убрать абсолют
@user-po2zq8dm3m
2 жыл бұрын
Сделал как вы сказали и все получилось!
@freelance-pro
8 ай бұрын
Это отлично 👻
А где линейку взять?
@freelance-pro
8 ай бұрын
На мак команд шифт 4 если Виндоус то любая скриншотилка подойдёт
@UhaMap
8 ай бұрын
Спасибо!@@freelance-pro
@freelance-pro
8 ай бұрын
Пожалуйста
Чуть не утонул, столько воды
@freelance-pro
Жыл бұрын
Учитесь плавать 🏊♀️