jag har en hemsida, ex https://mcparken.se/product/36400 och på bred skärm visar jag upp 5 bilder, när skärmen blir mindre så övergår sidan och istället visar owl-carousel objekt. På den breda sidan > 1024x och bilderna så vill jag kunna öppna lightbox javascript-library för att visa den man klickar på.

Det jag löste detta på var att bilderna fick två egenskaper, css klassen "img-clicker" samt ett img-id med den siffra som motsvarar bilden i lightbox. Med hjälp av denna kod kunde jag då visa upp rätt bild baserat på vilken jag klickade på. Det som återstår att lösa är att få filmen att spela om den första bilden "hero-bilden" är en video.

Hoppas detta hjälper er att lösa ert problem om det dyker upp i framtiden
Hälsningar
Pelle

// hantera klick för att visa lightbox-bilderna som visas upp
        // ===============================

        $('.show-all-images').click(function () {
            $(".thumb-info-action-icon").trigger('click');
            /* $("#lightgallery a:first-child > img").trigger("click");*/
        });

        $('.nyvideo').click(function () {

            $(".thumb-info-action-icon").trigger('click');
            window.location.replace("#lg=1&slide=0");

            // kan vi spela videon? tydligen inte
            //$(".lg-video-play").click();

        });

        // varje klickabar bild har ett id på sig, använd det och justera url för att visa rätt bild.
        // #lg=1&slide=0
        $(".img-clicker").click(function (e) {

            e.preventDefault();
            var imgid = parseInt( $(this).attr("img-id") ) -1;

            // img-id ... om != """
            // hämta nummer 0-4 på bild vi skall visa

            // console.log("imgid:" + imgid);
            
            if (imgid > -1) {
                console.log('visar bild:' + imgid);
                $(".thumb-info-action-icon").trigger('click');
                window.location.replace("#lg=1&slide=" + imgid);
            } else {
               console.log('visar ej' + imgid)
            }

            return true;
        });