Is it possible to get the "Product Gallery" configuration?

Created on 17 January 2024, 10 months ago
Updated 23 January 2024, 10 months ago

Problem/Motivation

Hi,

I'm looking (for a long time) for exactly the kind of gallery that is listed on https://swiffyslider.com/examples/, as "Product Gallery".
I've installed this module and I tried to setup the configuration at https://swiffyslider.com/configuration/ but I can't get remotely close to what's listed in the examples. There is no setting that allows me to have a main image with thumbnail navigation below it.

Am I missing something or are the examples listed perhaps not all possible to re-create with the configurator?

Thanks for any pointers!

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

💬 Support request
Status

Closed: works as designed

Version

1.3

Component

Documentation

Created by

🇹🇭Thailand AlfTheCat

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @AlfTheCat
  • 🇮🇳India mahtab_alam

    composer require dynamicweb/swiffy-slider

  • 🇹🇭Thailand AlfTheCat

    Hi mahtab_alam, yes I installed the module but when using the configurator at https://swiffyslider.com/configuration/ there is no way I can create the "Product Gallery" from the example page at https://swiffyslider.com/examples/. It's exactly the gallery I need but can't create using a number of modules. Thanks.

  • 🇫🇷France abdei Paris, Ile de France

    Hello @AlfTheCat,

    Hope this configuration helps.

    Regards,
    Abdel

  • 🇹🇭Thailand AlfTheCat

    Hi @AbdeI, thanks very much. However, this configuration renders the thumbnails, no main image.

    What I'm looking for is exactly like this:

  • 🇫🇷France abdei Paris, Ile de France

    if you need the code src for that particular example, you can check the "Show code" at the bottom of the example :

    <div class="col-12 col-lg-6" id="productGallery">
        <script>
            function imageClick(imageNumber) {
                setTimeout(() => {
                    //Find the slider element
                    const sliderElement = document.getElementById('pgalleryModal');
                    //Slide to he right image
                    swiffyslider.slideTo(sliderElement, imageNumber);
                    //Listen to slide end and set focus to the container to enable keyboard navigation
                    swiffyslider.onSlideEnd(sliderElement, () => sliderElement.querySelector(".slider-container").focus());
                }, 300)
            }
    
            function thumbHover(imageNumber) {
                //Find the slider element
                const sliderElement = document.getElementById('pgallery');
                //Slide to he right image
                swiffyslider.slideTo(sliderElement, imageNumber)
            }
        </script>
        <div class="swiffy-slider slider-item-ratio slider-item-ratio-1x1 slider-nav-round slider-nav-nodelay" id="pgallery">
            <ul class="slider-container">
                <li><img src="../assets/img/shoes/shoe1.webp" loading="lazy" alt="..." data-bs-toggle="modal" data-bs-target="#productGalleryModal" onclick="imageClick(0)"></li>
                <li><img src="../assets/img/shoes/shoe2.webp" loading="lazy" alt="..." data-bs-toggle="modal" data-bs-target="#productGalleryModal" onclick="imageClick(1)"></li>
                <li><img src="../assets/img/shoes/shoe3.webp" loading="lazy" alt="..." data-bs-toggle="modal" data-bs-target="#productGalleryModal" onclick="imageClick(2)"></li>
                <li><img src="../assets/img/shoes/shoe4.webp" loading="lazy" alt="..." data-bs-toggle="modal" data-bs-target="#productGalleryModal" onclick="imageClick(3)"></li>
                <li><img src="../assets/img/shoes/shoe5.webp" loading="lazy" alt="..." data-bs-toggle="modal" data-bs-target="#productGalleryModal" onclick="imageClick(4)"></li>
                <li><img src="../assets/img/shoes/shoe6.webp" loading="lazy" alt="..." data-bs-toggle="modal" data-bs-target="#productGalleryModal" onclick="imageClick(5)"></li>
            </ul>
    
            <button type="button" class="slider-nav" aria-label="Go previous"></button>
            <button type="button" class="slider-nav slider-nav-next" aria-label="Go next"></button>
        </div>
    
        <div class="swiffy-slider slider-nav-dark slider-nav-sm slider-nav-chevron slider-item-show4 slider-item-snapstart slider-item-ratio slider-item-ratio-1x1 slider-nav-visible slider-nav-page slider-nav-outside-expand pt-3 d-none d-lg-block">
            <ul class="slider-container" id="pgallerythumbs" style="cursor:pointer">
                <li><img src="../assets/img/shoes/shoe1.webp" loading="lazy" alt="..." onmouseover="thumbHover(0)"></li>
                <li><img src="../assets/img/shoes/shoe2.webp" loading="lazy" alt="..." onmouseover="thumbHover(1)"></li>
                <li><img src="../assets/img/shoes/shoe3.webp" loading="lazy" alt="..." onmouseover="thumbHover(2)"></li>
                <li><img src="../assets/img/shoes/shoe4.webp" loading="lazy" alt="..." onmouseover="thumbHover(3)"></li>
                <li><img src="../assets/img/shoes/shoe5.webp" loading="lazy" alt="..." onmouseover="thumbHover(4)"></li>
                <li><img src="../assets/img/shoes/shoe6.webp" loading="lazy" alt="..." onmouseover="thumbHover(5)"></li>
            </ul>
    
            <button type="button" class="slider-nav" aria-label="Go previous"></button>
            <button type="button" class="slider-nav slider-nav-next" aria-label="Go next"></button>
        </div>
    
        <div class="modal  fade" id="productGalleryModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-fullscreen">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="swiffy-slider h-100 slider-nav-dark" id="pgalleryModal">
                            <ul class="slider-container" tabindex="-1">
                                <li class="d-flex align-items-center justify-content-center"><img src="../assets/img/shoes/shoe1.webp" loading="lazy" class="mw-100 mh-100" alt="..." data-bs-dismiss="modal"></li>
                                <li class="d-flex align-items-center justify-content-center"><img src="../assets/img/shoes/shoe2.webp" loading="lazy" class="mw-100 mh-100" alt="..." data-bs-dismiss="modal"></li>
                                <li class="d-flex align-items-center justify-content-center"><img src="../assets/img/shoes/shoe3.webp" loading="lazy" class="mw-100 mh-100" alt="..." data-bs-dismiss="modal"></li>
                                <li class="d-flex align-items-center justify-content-center"><img src="../assets/img/shoes/shoe4.webp" loading="lazy" class="mw-100 mh-100" alt="..." data-bs-dismiss="modal"></li>
                                <li class="d-flex align-items-center justify-content-center"><img src="../assets/img/shoes/shoe5.webp" loading="lazy" class="mw-100 mh-100" alt="..." data-bs-dismiss="modal"></li>
                                <li class="d-flex align-items-center justify-content-center"><img src="../assets/img/shoes/shoe6.webp" loading="lazy" class="mw-100 mh-100" alt="..." data-bs-dismiss="modal"></li>
                            </ul>
    
                            <button type="button" class="slider-nav" aria-label="Go previous"></button>
                            <button type="button" class="slider-nav slider-nav-next" aria-label="Go next"></button>
                            <ul class="slider-indicators slider-indicators-dark slider-indicators-highlight slider-indicators-round">
                                <li class="active"></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  • 🇹🇭Thailand AlfTheCat

    Yeah I found that option, but no way to import that code into the configurator or anything like that. Anyway, thanks for your attention to the issue. I'll definitely use this module for other sliders, was just hoping I could easily create that beautiful product gallery :). I've tried 5 different modules by now, none of them seem to be able to do the job.

  • 🇩🇪Germany hexabinaer Berlin, Germany

    The "configurator" is actually just handling the functionality and is not designed to produce or affect code at all.

    No need to get anywhere close to the suggested markup. We are using the swiffy views formatter for file and node bundles in different configurations.

    In your case I'd start here:

    • Create a view
    • Use a suitable "rendered entity" display of your product - or build the required markup with fields
    • Theme your views rows like desired (e. g. with CSS)
    • Format the view with swiffy slider an use the above suggested 3-slide configuration
    • You might want to hide the dash indicators via CSS
  • Status changed to Closed: works as designed 10 months ago
  • 🇩🇪Germany hexabinaer Berlin, Germany

    Setting this issue to "works as designed". Please don't feel backed down by this, it's just because this module was not designed to provide more than what you can configure over on the project page and apply that behavior to Drupal entities.

    Feel free to get back here in case you need more hints.

  • 🇹🇭Thailand AlfTheCat

    Thanks @hexabinaer for the detailed replies. It's clear now.

Production build 0.71.5 2024