Как сделать увеличение картинки при нажатии, и при повторном уменьшение [РЕШЕНО]

[Larik]

Друзья, помогайте. Делаю свой сайт с адаптивной вёрсткой, на мобилке изображения могут быть очень маленькими и очень хочется сделать увеличение изображения при нажитии (тапе на мобилке), а при повторном нажатии или тапе возвращение в исходный размер по типу FancyBox и подобное. Пробовал делать через фото сетку на ПК всё ништяк, но на мобилке изображение не центрируется и уезжает (адаптивности нет короче). Буду рад ваши советом, уже какой день тыкаюсь в переходах и нейронках с "самописными кодами"
Сам я лютый самоучка, занимаюсь всем этим примерно пол месяца +-

[serega]

покажи либо проект, либо залей на БП хостинг.
Используй Flex Grid , она ставит области, с ними уже можно работать.
Недавно ввели новое "pointerenter" вместо "mouseenter" и "touchenter", обещают поддержку мобильных .
И как всегда, я это знаю, а Pablo нет )))


Мы тут один тап не можем поймать на мобильнике, а событие имеет

Код: Выделить всё

pointerType: чем именно коснулись (mouse, touch, pen).
pressure: сила нажатия (для стилусов).
tiltX / tiltY: угол наклона пера.

[Larik]

Прискорбно, буду пытаться значит через нейроно-писанный код работать, либо урежу как-нибудь( Вот сам сайт https://realtatoo.ru/
Изначально так и использовал гибкую, но на мобилке это очень прискорбно выглядит, изображений не много, но и не мало, и расположены они хаотично, плюс если если редактировать сайт через точки остановки(или якоря, я хз как это называется) получается тоже шляпа, ведь хаотичность должна оставаться. Если адаптировать под мобилки (например изображения перетаскивать), то они перетаскиваются и изначальном разрешении ("объяснять я умею ")
Приложенный сайт как раз на адаптивной вёрстке
P.S: Понятия не имею как проект показать, не шарю, максимом сверху ссылку кинул

[serega]

1. картинок не нашел , никогда у себя brackpoint не ставил. Даже на знаю, как они работают . Я с трудом представляю, как я буду таскать границы и ВКЛ/ВЫКЛ видимость элементов. Это жесть.
Подозреваю, что там все через @media {}/ Там это можно и ручками прописать. Не сложно.
2. Исправь <title> </title>
3. Череп ездит красиво.

У тебя переключается класс 'active' .

Код: Выделить всё

    document.addEventListener("DOMContentLoaded", function() {
        const skullWrapper = document.getElementById('RollOverLayer1');

        skullWrapper.addEventListener('click', function(e) {
            // Проверяем, поддерживает ли устройство настоящий ховер (мышь)
            const hasHover = window.matchMedia('(hover: hover)').matches;

            // Если это ПК (есть ховер), игнорируем клик
            if (hasHover) return;

            // Если это телефон (нет ховера), переключаем класс active
            this.classList.toggle('active');
        });

        // Дополнительный обработчик: закрывать меню при клике "мимо" черепа (для телефонов)
        document.addEventListener('click', function(e) {
            const isClickInside = skullWrapper.contains(e.target);
            // Если клик не по черепу и меню открыто, убираем класс active
            if (!isClickInside) {
                skullWrapper.classList.remove('active');
            }
        });
    });

Легкий короткий код.
А вот как в Alpine JS ^

Код: Выделить всё

<div  id="RollOverLayer1"
    x-data="{ active: false, isMobile: !window.matchMedia('(hover: hover)').matches }"
    @click="if (isMobile) active = !active"
    @click.outside="active = false"
    :class="{ 'active': active }"   
>  <!-- или :class="active && 'active'" -->
    </div>

никаких const skullWrapper = document.getElementById('RollOverLayer1'); указывать не надо
никаких const isClickInside = skullWrapper.contains(e.target); левых событий отслеживать.

Один модификатор .outside и готово.

Отправлено спустя 16 минут 9 секунд:
понимаю ,что тебе это не надо. делай все без hover , сейчас все mobile-first .
hover на мобильниках -- старая проблема.

Отправлено спустя 4 минуты 31 секунду:
хотя на WB фильтры с hover , быстрее и удобнее ставить фильтры "по возрастанию цены" по 100 раз в день )))

Отправлено спустя 58 минут 46 секунд:
картинки вижу ))) , а я сразу в код полез.
если ты будешь все картинки лепить на экран сразу, то это дизайн из 1990-х. И какая это галерея так жестоко обрезает до tumbs ?

Отправлено спустя 1 минуту 5 секунд:
вот череп достойный. И какой соц. модуль это делает ?

[serega]

если тебе пофиг, забрал череп себе

[serega]

:class="{ active }"

[Alex15963]

Поставь все картинки через галерею