Как сделать увеличение изображения по клику тильда

Обновлено: 07.07.2024

В Tilda есть стандартная кнопка для показа и скрытия блоков, но работает она скучно. Ни какой анимации и плавности, просто дергает экран. Мой пример работает при клике на любой объект. В качестве триггеров я использую кнопки в Zero block, немного украсив их анимацией.

UPD
Написал пару статей по данной теме, доступны по ссылкам:
Часть 1: Показываем блок меню по клику в Tilda Part 1
Часть 2: Показываем блок меню по клику в Tilda Part 2

. UPD 2.
Я не против записать видео на данную статью, но мне не очень понятно, что конкретно вас интересует, что именно не получается. Скрипт достаточно простой. Прежде чем кликнуть, напишите в комментарии или в группу в VK, какая проблема у вас возникает при работе с данным примером, отталкиваясь от этого я подготовлю материал и заодно помогу вам.

Переходим в Настройки нашего блока и рассмотрим их подробнее.

В общих Настройках для блока GL27 мы можем изменять:

Верхний внутренний отступ блока
Нижний внутренний отступ блока
Цвет фона для всего блока
Включать и выключать эффект появления при скролле
Настраивать видимость блока на экранах различных устройств.

Здесь нам доступны настройки для элементов управления галереей - полосы прокрутки и кнопки PLAY/STOP:

ее цвет,
толщину полосы в пикселях,
величину отступа полосы прокрутки от изображений в пикселях;

цвет,
уровень непрозрачности,
уровень непрозрачности при наведении курсора мыши на кнопку
также можем совсем скрыть с экрана эту кнопку, поставив галочку в соответствующем чекбоксе.

Здесь нам доступны следующие настройки:

выравнивание - честно говоря, поиграв с этой настройкой, я не вижу никаких изменений в карточках - то ли баг Тильды, то ли я эту настройку не понимаю;
высота - регулирует высоту активной карточки в пикселях;
цвет фона карточки - если изображение карточки будет занимать не все ее пространство, а лишь какую-то часть, то свободное от изображения пространство будет указанного цвета;
цвет фона текста - можно текст выделить каким-либо фоном;
цвет фильтра в начале и цвет фильтра в конце - благодаря такой настройке, можно наложить на карточку градиент: или затемнить ее, или высветлить, или затонировать.
размер неактивной карточки в процентах - настройка позволяет визуально выделить активную и неактивные карточки путем регулирования размера неактивной карточки относительно активной в процентах;
непрозрачность неактивной карточки - так же, как и предыдущая, данная настройка визуально выделяет активную карточку на фоне неактивных, только теперь с помощью регулирования непрозрачности неактивных карточек.

Нашему вниманию представлены настройки:

полноэкранная версия - очередное что-то непонятное, у меня не сработало, ничего не поменялось на экране;
автоматическая смена слайдов (в миллисекундах, 1 сек = 1000 млсек) - дает возможность указать скорость смены карточек;
размер стрелки - позволяет указать размеры стрелок галереи - маленький, средний, большой и самый большой;
толщина стрелки - можем сделать стрелки галереи тоньше или толще, в пикселях;
стрелка цвет - цвет самой стрелки;
цвет при наведении - цвет стрелки при наведении на нее курсора мыши;
стрелка: цвет фона - цвет фонового кружка под стрелкой;
цвет фона при наведении - цвет фонового кружка под стрелкой в момент наведения на него курсора мыши;
стрелка: непрозрачность фона - можем регулировать яркость фонового кружка под стрелкой;
непрозрачность при наведении - позволяет добавлять hover-эффект фону кружка со стрелкой при наведении;
показывать обводку - по моим ожиданиям, это предполагалась именно обводка кружка под стрелкой. Однако, при экспериментировании с данной настройкой оказалось, что она включает фон этого кружка (если, например, в настройках самого фона цвет не выбран), но не обводку. Взрыв мозга. Похоже на баг в библиотеках Тильды. Или я чего-то опять не понимаю.

Сразу нам доступны настройки:

размер кнопки - можно указать уменьшенный или стандартный размер кнопки в карточке галереи;
цвета текста, фона и обводки кнопки;
толщина обводки кнопки;
радиус скругления бордюра - то есть это скругление углов кнопки.

Здесь мы можем изменять параметры:

задать размер тени для кнопки в пикселях;
указать уровень непрозрачности тени в процентах;
задать шрифт для кнопки;
изменить насыщенность текста кнопки;
отметить чекбокс, чтобы текст на кнопке отображался заглавными буквами;
указать цвет фона кнопки при наведении на нее курсора мыши;
указать цвет текста кнопки при наведении;
также можем менять цвет обводки при наведении, создавая интересные анимационные эффекты;
изменять размер тени кнопки при наведении;
также воздействовать на непрозрачность тени кнопки при наведении;
можем регулировать скорость анимации настроенных эффектов при наведении, придавая им резкости или плавности.

Здесь нам доступны настройки:

цвет заголовка карточки;
размер шрифта заголовка карточки;
шрифт для заголовка карточки;
межстрочное расстояние для заголовка;
можно отметить чекбокс для отображения заголовка карточки заглавными буквами;
отступ сверху для заголовка в пикселях;
отступ снизу для заголовка в пикселях;
цвет описания карточки;
размер шрифта описания;
шрифт для описания карточки;
межстрочное расстояние для описания;
насыщенность шрифта описания карточки;
также доступен чекбокс для отображения описания заглавными буквами;
отступы сверху и снизу для описания карточки в пикселях.

Давайте теперь перейдем к Контенту блока и посмотрим, что нам доступно.

Итак, видим, что здесь мы можем управлять контентом с помощью карточек. Их можно добавлять, дублировать, выключать, удалять, перемещать вверх или вниз.

В карточках нам доступны следующие элементы:

изображение - можно добавить свое изображение с компьютера или изображение из имеющихся библиотек в Тильде;
можем редактировать изображение простеньким редактором изображений Тильды, если нажмем на иконку карандаша напротив изображения. Можем также удалить изображение, нажав на иконку корзины;
доступен для редактирования заголовок карточки;
также здесь мы добавляем описание карточки;
возможно добавить кнопку в карточку - текст для кнопки и необходимую ссылку;
можем регулировать расположение текстовых элементов карточки по вертикали;
также можем указать, каким образом вставить изображение в карточку - как фоновое, заполнив им всю карточку, или в оригинальном размере, заполнив изображением лишь часть карточки.

Неоднократно встречался вопрос о том, как изменить левый отступ в блоке GL27 Тильды.

Не совсем понятно, о чем именно идет речь. Но полагаю, что не всем нравится первоначальное положение активной карточки блока, находящейся в центре, в тот же момент слева в блоке царит пустота, справа расположены неактивные карточки:

С помощью добавления пользовательского кода можно изменить этот отступ и расположить карточки на всю ширину блока.

Для этого нужно добавить на страницу блок T123 HTML-код и написать в нем:

Получим в результате отсутствие такого большого отступа слева в блоке GL27.

Но в данном случае считаю, что все карточки должны быть одинаковыми по размеру и степени прозрачности между собой, чтобы не было выделения активной и неактивных карточек.
Ведь согласитесь, красиво было, если активная карточка расположена по центру, выделялась на фоне неактивных и акцентировала внимание лишь на себя, не рассеивая внимание пользователя. А в нашем случае активная карточка сдвигается влево.
В плане юзабилити это неудобно для пользователя.
Но решать в конечном итоге Вам, как это должно выглядеть. Можете использовать описанный способ для уменьшения отступа слева в рассматриваемом блоке.

На этом я заканчиваю данный пост. Получился он очень длинный.

Надеюсь, статья была полезна и Вы нашли решение для своих задач.
Желаю Вам творческих успехов!

Сравнение веса изображений за счёт их оптимизации на примере шаблона. Вес изображений сайта без адаптивной загрузки — 8,9 Mb. Вес изображений с адаптивной загрузкой — 2,8 Mb

После оптимизации общий вес изображений на сайте в 3 раза меньше

Большинство современных браузеров, например, Chrome, Opera, Firefox и другие поддерживают WebP. Когда пользователь заходит на сайт, скрипт проверит браузер на поддержку формата и, если он поддерживается, запросит с сервера WebP-изображения. Если не поддерживается — отдаст оригинальное изображение в формате, который был загружен — JPEG или PNG. Со временем мы добавим конвертацию изображений в AVIF-формат, который позволит сделать вес изображений ещё легче.

Чтобы не искать плагины по отдельности, предлагаю скачать их одним архивом, хотя лучше поискать свежие версии — они бесплатны. Архив содержит:

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

Изображения на странице должны содержать такую разметку:

Что делать если не заработало:

Проверьте правильность путей к плагинам.
Убедитесь что jquery библиотека подключена один раз.
Попробуйте поискать свежие версии плагинов и jquery библиотеки.
Плагин может не работать в CMS Joomla, так как jquery часто конфликтует с фреймворком Mootools.

Автоматическое всплытие

Одним из вариантов использования CSS-сетки является отображение галереи изображений, но галерея сама по себе не так уж и впечатляет. Но мы могли бы, например, добавить эффект, когда при нажатии мышкой на изображение галереи, оно будет увеличиваться, не влияя на всю сетку. Это уже будет интереснее. И, конечно, чтобы все могли пользоваться этой функцией, мы должны сделать так, чтобы галерея соответствовала принципам доступности.

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

Сначала зададим структуру HTML. Конечно, подобная структура может быть абсолютно любой, но мы будем использовать список изображений, завернутых в кнопки.

Теперь, чтобы сделать галерею доступной, нам нужно внести некоторые коррективы:

Добавьте описательный атрибут alt к каждому изображению, чтобы помочь людям с нарушениями зрения понять, что изображено на картинке;
Используйте атрибут aria-expanded , который информирует ассистивные системы о том, расширяется ли изображение или нет;
Добавьте role="list" , чтобы убедиться, что ассистивные технологии объявляют список, потому что некоторые программы чтения с экрана могут удалять объявление списка.

Наконец, добавим абзац с полезным текстом о том, как использовать галерею, и обернем весь код в контейнер (в данном случае это элемент main ).

Для простоты демонстрации мы решили использовать изображения, обернутые элементом кнопки с атрибутом aria-expanded . Лучшим решением здесь может быть использование только тегов изображений, а затем при помощи JavaScript оборачивать их элементом с атрибутом aria-expanded . Такой подход более прогрессивен, так как эффект увеличения все равно не будет работать без JavaScript.

Чтобы определить макет сетки, мы будем использовать модуль CSS Grid. При этом мы будем использовать auto-fit , чтобы изображения могли поместиться в доступном пространстве, но не уменьшаться до определенной ширины. Это означает, что у нас будет разное количество элементов на разных экранах вывода без необходимости писать слишком много кода в медиа-запросах.

Чтобы сохранить правильное соотношение сторон изображения, будем использовать свойство aspect-ratio . Чтобы сбросить стиль кнопки, добавим декларацию all: initial . Также нужно скрыть переполнение кнопки.

Чтобы изображение поместилось прямо в кнопку, будем использовать свойство object-fit: cover и установим ширину и высоту ( width и height ) в 100%:

Эффект увеличения достигается при помощи масштабируемой трансформации. Трансформация по умолчанию включена, но если пользователь не хочет видеть анимацию, то можно использовать медиа-запрос со значением prefers-reduced-motion и установить для свойства transition-duration значение 0s .

JavaScript

Подготовка

Прежде чем мы сделаем элемент увеличивающимся, нам нужно подготовить и рассчитать несколько вещей.

Во-первых, нам нужно будет знать длительность трансформации. Для этого нужно прочитать пользовательское свойство CSS --duration-on .

Затем установим атрибуты data- для дальнейших вычислений:

отступ между элементами в сетке;
ширину отдельного элемента;
количество элементов в ряду.

Первые два довольно просты. Мы можем получить эти значения из вычисленных стилей CSS.

Чтобы найти количество столбцов, мы должны перебрать каждый элемент и сравнить его верхнюю позицию с верхней позицией следующего элемента. Изменение этого значения означает, что элемент находится в следующем ряду, что и даст нам количество элементов в строке.

Направление увеличения

Прежде чем получить эффект увеличения изображения, нам нужно провести некоторые проверки и расчеты. Во-первых, мы должны проверить, находится ли элемент в последней строке и в конце строки. Если элемент находится в последней строке, он должен увеличиваться вверх. Это означает, что свойству transform-origin следует присвоить значение bottom .

Важно! Если элемент должен увеличиваться в какую-то сторону, его свойству transform-origin следует присваивать "противоположное" значение. Обратите внимание, что вертикальные и горизонтальные значения должны быть объединены.

Эффект увеличения

Чтобы увеличить изображение, не затрагивая сетку, будем использовать CSS-трансформацию. В частности, трансформацию масштаба. Здесь мы решили сделать изображение двойным по размеру, т.е. отношение двойной ширины элемента плюс отступ между элементами в сетке и будет коэффициентом масштабирования.

Поддержка клавиатуры

Пользователи, которые для навигации по сайтам используют клавиатуру, также должны иметь возможность пользоваться галереей. В нашей галерее перемещение по списку изображений будет осуществляться при помощи клавиши Tab . Нажатие на изображение кнопкой мыши будет эмулироваться при нажатии на клавишу Enter во время фокусировки элемента. Также, чтобы улучшить поведение по умолчанию, мы должны добавить поддержку клавиши Esc и клавиш со стрелками.

Как только изображение будет увеличено, нажатие на клавишу Esc должно вернуть его к стандартному размеру. Это можно сделать, проверив код нажатой клавиши. То же самое касается и клавиш со стрелками, но реакция галереи будет другой. При нажатии на клавиши со стрелками должен осуществляться переход на предыдущее или следующее соседнее изображение, а затем эмулироваться нажатие на этот элемент.

Переключение

Чтобы элемент галереи был увеличен, сначала нужно деактивировать все остальные элементы. Затем, если мы нажмем на увеличенный элемент, он должен вернуться к стандартному размеру.

Проблемы z-index

Чтобы предотвратить проблемы с z-index и контекстом наложения, мы будем использовать тайм-аут для задержки трансформации изображения. Это тот же самый тайм-аут, который мы рассчитали на этапе подготовки.

Изменение размера окна просмотра

Если окно просмотра изменяет размер, нам нужно пересчитать значения по умолчанию, потому что мы определили подвижную сетку, которая позволяет элементам заполнять доступное пространство и перемещаться из строки в строку.

Читайте также: