Галерея фото с увеличением при нажатии, лайтбоксы 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

  • @gromova_seo
    @gromova_seo2 жыл бұрын

    Ваши уроки - это то, что я искала. Очень грамотно объясняете. Думала, что grid - это темный лес. Сейчас в восторге. Сложные вещи кажутся гораздо проще. Спасибо.

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Пожалуйста, рад стараться))

  • @jevgenisuija
    @jevgenisuija7 ай бұрын

    Спасибо, полезно!

  • @freelance-pro

    @freelance-pro

    7 ай бұрын

    Пожалуйста ☺️ рад слышать

  • @AndreiKozlov-ph8wo
    @AndreiKozlov-ph8wo3 ай бұрын

    Элемент с лупой при ховере прикольный. Но как на адаптивах показать юзеру, что на картинку можно кликнуть и раскрыть ее? Там ведь ховера нет.

  • @freelance-pro

    @freelance-pro

    3 ай бұрын

    На мобильной версии лупу должно быть сразу видно

  • @2turistaural
    @2turistaural2 жыл бұрын

    Дмитрий, большое спасибо за ваши видео. Может у вас есть уроки как сделать оригинальный блок с видео (хоть с загруженными, хоть с ютуб канала). Это может быть например вертикальный слайдер с маленькими окнами, и одним сбоку, который можно запустить для просмотра. Не могу найти ничего подходящего на просторах интернета.

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Пожалуйста, видео такого нет но сделать это просто. Все как вы пишите просто делайте в вебфлоу, добавьте на страницу слайдер в него, ограничьте ему ширину (что бы сделать его вертикальным) и добавьте туда видео, или же грид, а потом в него видео если нужна нестандартная (не в столбик) структура, а сбоку от слайдера еще одно видео и будет все как вы описали! Просто материализуйте свои мысли)) Если вам сложно такое реализовать, то приходите ко мне на индивидуальное обучение artstranger.ru/study/ и будем прокачивать ваши навыки))

  • @AlisaBida
    @AlisaBida11 ай бұрын

    Здраствуйте! А возможон сделать так??: при наведении фотка становиться цветной и черно-белой и при этом при включении листается этой фотки можно их листать, но с другой коллекиции. (например: у меня порфтолио, нужно листать проект , они все разные, а первая фотка только заглавная, но привключении одной фотки можно пролистать весь проект?

  • @freelance-pro

    @freelance-pro

    11 ай бұрын

    Здравствуйте, да так сделать возможно.

  • @Oleksandr_Chumachenko
    @Oleksandr_Chumachenko Жыл бұрын

    Добрый день, спасибо Вам! Подскажите пожалуйста, если нужно что бы в лайтбокс были скругленные углы, какие нужны настройки? (у меня при увеличении изображение становится квадратным, хотя и картинке и и лайтбокс задаю скругленные углы). Заранее спасибо!

  • @freelance-pro

    @freelance-pro

    11 ай бұрын

    Задать высоту 100 процентов и оверфлов хидден

  • @user-po2zq8dm3m
    @user-po2zq8dm3m2 жыл бұрын

    И вот еще по мимо того что я у вас спрашивал еще кое что не получается хотел вставить картинку лупа при наведении ставлю ее в абсолют, а она становится просто с боку по отношению к главной картинке, а у вас она должна встать прям по середине ?

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Див блок в который вставляете лупу задайте флекс и центрипуйте им все что находится внутри

  • @user-po2zq8dm3m

    @user-po2zq8dm3m

    2 жыл бұрын

    @@freelance-pro Класс все встало куда нужно, а почему не получается изменить ширину первой картинки при чем высота меняется, а ширина почему то нет.

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Задавайте параметр ширины в поле width если не поможет то для картини задайте позиционирование absolute а для блока в котором она relative

  • @valerytkachou8810
    @valerytkachou88102 жыл бұрын

    Здравствуйте! А если мне нужно, что бы в каждом лайтбоксе было несколько картинок. Нажимаешь например на квартиру, а там все ее фотки.

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    В настройках справа можно добавить неограниченное количество изображений (если не разберётесь напишите я скину скриншот)

  • @UhaMap
    @UhaMap8 ай бұрын

    Подскажите пожалуйста почему может смещаться картинка в окне просмотра лайтбокса?

  • @freelance-pro

    @freelance-pro

    8 ай бұрын

    Для нее задано смещение в стилях или другая причина не глядя на ваш проект невозможно ее найти, приходите на обучение и со всем разберемся 😉

  • @virtuozfilm793
    @virtuozfilm7939 ай бұрын

    Спасибо, Дмитрий. Возможно на сайте сделать защиту от копировании фотографий, когда нажимаешь на правую кнопку мышки. Какие виды защиты есть. Спрашивают клиенты как можно защитить контент от копирования, помима воденых знаков?

  • @freelance-pro

    @freelance-pro

    9 ай бұрын

    Никак не защитить но вот правую кнопку мышки можно отключить есть специальный скрипт (в Гугле найдете) его надо дожить в хед каждой страницы

  • @virtuozfilm793

    @virtuozfilm793

    9 ай бұрын

    Спасибо

  • @freelance-pro

    @freelance-pro

    9 ай бұрын

    Пожалуйста 🤗

  • @user-po2zq8dm3m
    @user-po2zq8dm3m2 жыл бұрын

    Вот пытаюсь воспроизвести ваше видео про установку Lightbox вроде все понятно вот только не могу понять почему не получается у начального фото которое маленькое поменять размер вернее длинна меняется, а ширина нет, а мне нужно картинку немного увеличить?

  • @user-po2zq8dm3m

    @user-po2zq8dm3m

    2 жыл бұрын

    Пробовал изменить ширину как и на фото так и в самом Lightbox ничего не получается

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Что бы ширина поменялась задайте в поле width значение в пикселях, например 300px и картинка сменит свой размер) это сделайте для картинки. Если повторять все как на видео то получится как на видео, возможно вы где-то что-то случайно упустили, тут надо смотреть на ваш макет и записывать видео как исправить, такая функция есть у меня на индивидуальном обучении)) а так по словам сложно понять что не так вы сделали, к сожалению.

  • @user-po2zq8dm3m

    @user-po2zq8dm3m

    2 жыл бұрын

    @@freelance-pro С шириной разобрался просто на просто автоматически у Lightbox были заданы огромные внутренние отступы соответственно из за этого и не мог увеличить размер картинки

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Да, есть такой косяк там

  • @user-po2zq8dm3m

    @user-po2zq8dm3m

    2 жыл бұрын

    @@freelance-pro А по поводу отзывов помните я вам писал еще не замарачивались?

  • @freelance-pro
    @freelance-pro2 жыл бұрын

    А вы часто делаете галереи на сайтах заказчиков?

  • @alexandrlabazov8210

    @alexandrlabazov8210

    2 жыл бұрын

    Нет. Не делал никому

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Ну ниче, все ещё впереди!

  • @user-tx3xd9dv1d

    @user-tx3xd9dv1d

    2 жыл бұрын

    Недавно сделал заказчику. Слайдер из карточек товара, а при нажатии на фото открывался вот такая галерея. Прикольно вышло 😃

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Да это классное решение))

  • @gromova_seo

    @gromova_seo

    2 жыл бұрын

    Делалаю, обычно приходиться работать с готовыми сайтами, а верстать в webflow - очень люблю.

  • @user-po2zq8dm3m
    @user-po2zq8dm3m2 жыл бұрын

    Тут у меня прикол не могу понять почему у меня какие я либо картинки не загружал на сайт улетают в F Absolute не могу найти причину проверил все что можно в плоть до Section все находится в Static, ладно я постоянно переставляю картинки в static где это возможно, но когда я ставлю картинку в Lightbox то само собой там ни как не изменишь у картинки Position и соответственно картинка стоит как попало потому что находится в Absolute, я уже грешным делом подумал что что то действует с соседней секции если это возможно если нет тогда что?

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Вы скорее всего случайно задали абсолют для дочернего класса картинок и все они теперь в абсолюте, что бы проверить так ли это создайте новый сайт и попробуйте там картинки по добавлять

  • @user-po2zq8dm3m

    @user-po2zq8dm3m

    2 жыл бұрын

    На другом шаблоне я пробовал все нормально ничего в Absolut не улетает, а как убрать то что я наделал ?

  • @freelance-pro

    @freelance-pro

    2 жыл бұрын

    Добавьте картинку кликните по ней далее по полю где вводится стиль и по фиолетового классу image или как там оно написано и после в позиционирование убрать абсолют

  • @user-po2zq8dm3m

    @user-po2zq8dm3m

    2 жыл бұрын

    Сделал как вы сказали и все получилось!

  • @freelance-pro

    @freelance-pro

    8 ай бұрын

    Это отлично 👻

  • @UhaMap
    @UhaMap8 ай бұрын

    А где линейку взять?

  • @freelance-pro

    @freelance-pro

    8 ай бұрын

    На мак команд шифт 4 если Виндоус то любая скриншотилка подойдёт

  • @UhaMap

    @UhaMap

    8 ай бұрын

    Спасибо!@@freelance-pro

  • @freelance-pro

    @freelance-pro

    8 ай бұрын

    Пожалуйста

  • @nikitabcc
    @nikitabcc Жыл бұрын

    Чуть не утонул, столько воды

  • @freelance-pro

    @freelance-pro

    Жыл бұрын

    Учитесь плавать 🏊‍♀️

Келесі