Image Modal

Ready

HTML
View
Context
Info
Notes


        
        <div x-data="{swiper: null}" x-init="const swiper = new Swiper($refs.container, {
    slidesPerView: 1.2,
    spaceBetween: 40,
    direction: 'horizontal', 
    loop: false,
    effect: 'slide',
    scrollbar: {
        el: '.swiper-scrollbar-custom',
        dragClass: 'swiper-scrollbar-drag-custom',
        draggable: true,
    },
    breakpoints: {
        768: {
            spaceBetween: 40,
            slidesPerView: 2.2,
        },
        1024: {
            spaceBetween: 40,
            slidesPerView: 2.2,
        },
        1200: {
            spaceBetween: 40,
            slidesPerView: 2.2,
        },
        1440: {
            spaceBetween: 40,
            slidesPerView: 2.2,
        }
    }
        })">
    <div class="swiper" x-ref="container" x-init="$nextTick(() => {
                const lightbox = new PhotoSwipeLightbox({
                    gallery: '#' + $refs.gallery.id,
                    children: 'a',
                    pswpModule: PhotoSwipe
                });
                lightbox.init();
            });

            ">
        <div :id="$id('gallery')" class="swiper-wrapper flex items-center !ease-linear" x-ref="gallery">

            <div class="swiper-slide !h-auto overflow-hidden relative">
                <div class="swiper-slide !h-auto overflow-hidden relative aspect-[1.77] overflow-hidden">
                    <a href="https://images.unsplash.com/photo-1706213048664-505fd6a7a59b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8" data-pswp-width="500" data-pswp-height="750" data-cropped="true" target="_blank" class="w-full h-full" data-cropped="true">

                        <div class="relative h-full w-full ">
                            <img class="w-full h-full object-cover" src="https://images.unsplash.com/photo-1706213048664-505fd6a7a59b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8" alt="" />

                        </div>

                        <div class="absolute bottom-0 right-0 z-10">

                            <button class="btn cursor-pointer inline-flex items-center ml-auto bg-primary justify-between text-white py-5 px-5 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">

                                <span class="inline-flex items-center w-4 h-4     ">
                                    <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.73 22.73">
                                        <path id="b" d="m.75,11.36h21.23M11.36.75v21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                    </svg>
                                </span>

                            </button>
                        </div>
                    </a>
                </div>
            </div>

            <div class="swiper-slide !h-auto overflow-hidden relative">
                <div class="swiper-slide !h-auto overflow-hidden relative aspect-[1.77] overflow-hidden">
                    <a href="/image/placeholder.jpg" data-pswp-width="850" data-pswp-height="480" data-cropped="true" target="_blank" class="w-full h-full" data-cropped="true">

                        <div class="relative h-full w-full ">
                            <img class="w-full h-full object-cover" src="/image/placeholder.jpg" alt="" />

                        </div>

                        <div class="absolute bottom-0 right-0 z-10">

                            <button class="btn cursor-pointer inline-flex items-center ml-auto bg-primary justify-between text-white py-5 px-5 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">

                                <span class="inline-flex items-center w-4 h-4     ">
                                    <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.73 22.73">
                                        <path id="b" d="m.75,11.36h21.23M11.36.75v21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                    </svg>
                                </span>

                            </button>
                        </div>
                    </a>
                </div>
            </div>

            <div class="swiper-slide !h-auto overflow-hidden relative">
                <div class="swiper-slide !h-auto overflow-hidden relative aspect-[1.77] overflow-hidden">
                    <a href="/image/placeholder.jpg" data-pswp-width="850" data-pswp-height="480" data-cropped="true" target="_blank" class="w-full h-full" data-cropped="true">

                        <div class="relative h-full w-full ">
                            <img class="w-full h-full object-cover" src="/image/placeholder.jpg" alt="" />

                        </div>

                        <div class="absolute bottom-0 right-0 z-10">

                            <button class="btn cursor-pointer inline-flex items-center ml-auto bg-primary justify-between text-white py-5 px-5 rounded-none transition-all active:scale-95 hover:rounded-sm hover:brightness-95">

                                <span class="inline-flex items-center w-4 h-4     ">
                                    <?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.73 22.73">
                                        <path id="b" d="m.75,11.36h21.23M11.36.75v21.23" style="fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.5px;" />
                                    </svg>
                                </span>

                            </button>
                        </div>
                    </a>
                </div>
            </div>

        </div>

        <div class="pt-8 pb-5 lg:pt-10  ">
            <div class="swiper-scrollbar-custom w-full h-px bg-gray-300">
            </div>
        </div>

    </div>
</div>


        {% set cards = cards %}

{% set slidesPerViewSm = slidesPerViewSm|default('1.2') %}
{% set slidesPerViewMd = slidesPerViewMd|default('2.2') %}
{% set slidesPerViewLg = slidesPerViewLg|default('2.2') %}
{% set slidesPerViewXl = slidesPerViewXl|default('2.2') %}
{% set slidesPerViewXXl = slidesPerViewXXl|default('2.2') %}

{% set spaceBetweenSm = spaceBetweenSm|default('40') %}
{% set spaceBetweenMd = spaceBetweenMd|default('40') %}
{% set spaceBetweenLg = spaceBetweenLg|default('40') %}
{% set spaceBetweenXl = spaceBetweenXl|default('40') %}
{% set spaceBetweenXXl = spaceBetweenXXl|default('40') %}


{% if cards %}
    <div x-data="{swiper: null}" x-init="const swiper = new Swiper($refs.container, {
    slidesPerView: {{ slidesPerViewSm }},
    spaceBetween: {{ spaceBetweenSm }},
    direction: 'horizontal', 
    loop: false,
    effect: 'slide',
    scrollbar: {
        el: '.swiper-scrollbar-custom',
        dragClass: 'swiper-scrollbar-drag-custom',
        draggable: true,
    },
    breakpoints: {
        768: {
            spaceBetween: {{ spaceBetweenMd }},
            slidesPerView: {{ slidesPerViewMd }},
        },
        1024: {
            spaceBetween: {{ spaceBetweenLg }},
            slidesPerView: {{ slidesPerViewLg }},
        },
        1200: {
            spaceBetween: {{ spaceBetweenXl }},
            slidesPerView: {{ slidesPerViewXl }},
        },
        1440: {
            spaceBetween: {{ spaceBetweenXXl }},
            slidesPerView: {{ slidesPerViewXXl }},
        }
    }
        })">
        <div class="swiper" x-ref="container"
             x-init="$nextTick(() => {
                const lightbox = new PhotoSwipeLightbox({
                    gallery: '#' + $refs.gallery.id,
                    children: 'a',
                    pswpModule: PhotoSwipe
                });
                lightbox.init();
            });

            ">
            <div :id="$id('gallery')" class="swiper-wrapper flex items-center !ease-linear" x-ref="gallery">
                {% for item in cards %}
                    <div class="swiper-slide !h-auto overflow-hidden relative">
                        <div class="swiper-slide !h-auto overflow-hidden relative aspect-[1.77] overflow-hidden">
                            <a href="{{ item.src }}"
                               data-pswp-width="{{ item.width }}"
                               data-pswp-height="{{ item.height }}"
                               data-cropped="true"
                               target="_blank"
                               class="w-full h-full"
                               data-cropped="true">

                                {% include '@image' with {
                                    src: item.src,
                                    classes: "w-full h-full object-cover"
                                } %}

                                <div class="absolute bottom-0 right-0 z-10">
                                    {% include '@button' with {
                                        label: "",
                                        style: 'primary',
                                        classes: 'ml-auto',
                                        size: 'even',
                                        tag: 'button',
                                        icon: {
                                            name: 'plus'
                                        }
                                    } %}
                                </div>
                            </a>
                        </div>
                    </div>
                {% endfor %}
            </div>
            {% render '@swiper-scrollbar' with {
                bgColor: 'bg-gray-300'
            } %}

        </div>
    </div>
{% endif %}


        
            
            {
  "title": "Betriebliche Krankenversicherung",
  "style": "default",
  "cards": [
    {
      "src": "https://images.unsplash.com/photo-1706213048664-505fd6a7a59b?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHx8",
      "width": 500,
      "height": 750
    },
    {
      "src": "/image/placeholder.jpg",
      "width": 850,
      "height": 480
    },
    {
      "src": "/image/placeholder.jpg",
      "width": 850,
      "height": 480
    }
  ]
}

Handle: @image-modal
Preview:
- With layout
- Component only
Filesystem Path: src/components/molecules/image-modal/image-modal.twig
References (3): @image, @button, @swiper-scrollbar
Referenced by (1): @product-detail

No notes defined.