Fetstil Fetstil Kursiv Understrykning linje färgläggning tabellverk Punktlista Nummerlista Vänster Centrerat högerställt Utfyllt Länk Bild htmlmode
  • Forum & Blog
    • Forum - översikt
      • .Net
        • asp.net generellt
        • c#
        • vb.net
        • f#
        • silverlight
        • microsoft surface
        • visual studio .net
      • databaser
        • sql-server
        • databaser
        • access
        • mysql
      • mjukvara klient
        • datorer och komponenter
        • nätverk, lan/wan
        • operativsystem
        • programvaror
        • säkerhet, inställningar
        • windows server
        • allmänt
        • crystal reports
        • exchange/outlook
        • microsoft office
      • mjukvara server
        • active directory
        • biztalk
        • exchange
        • linux
        • sharepoint
        • webbservers
        • sql server
      • appar (win/mobil)
      • programspråk
        • c++
        • delphi
        • java
        • quick basic
        • visual basic
      • scripting
        • asp 3.0
        • flash actionscript
        • html css
        • javascript
        • php
        • regular expresssion
        • xml
      • spel och grafik
        • DirectX
        • Spel och grafik
      • ledning
        • Arkitektur
        • Systemutveckling
        • krav och test
        • projektledning
        • ledningsfrågor
      • vb-sektioner
        • activeX
        • windows api
        • elektronik
        • internet
        • komponenter
        • nätverk
        • operativsystem
      • övriga forum
        • arbete karriär
        • erbjuda uppdrag och tjänster
        • juridiska frågor
        • köp och sälj
        • matematik och fysik
        • intern information
        • skrivklåda
        • webb-operatörer
    • Posta inlägg i forumet
    • Chatta med andra
  • Konto
    • Medlemssida
    • Byta lösenord
    • Bli bonsumedlem
    • iMail
  • Material
    • Tips & tricks
    • Artiklar
    • Programarkiv
  • JOBB
  • Student
    • Studentlicenser
  • KONTAKT
    • Om pellesoft
    • Grundare
    • Kontakta oss
    • Annonsering
    • Partners
    • Felanmälan
  • Logga in

Hem / Forum översikt / inlägg

Posta nytt inlägg


Löst: Klicka på en bild eller ikon för att visa

Postades av 2022-10-31 21:19:47 - Pelle Johansson, i forum javascript/dhtml, Tråden har 0 Kommentarer och lästs av 765 personer

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;
        });


Svara

Nyligen

  • 13:58 Reactoonzslot
  • 12:26 Har du jobbet med CV-en din lenge?
  • 22:02 Trenger en kvalitetsbil for en for
  • 21:05 Jeg la merke til at det riktige sa
  • 02:54 Hvor lang tid tar det å skrive en
  • 01:08 Hvordan imponere en HR-sjef?
  • 12:11 Hjälp med color fill in shape
  • 01:04 Hvordan lage en CV som vil svare?

Sidor

  • Hem
  • Bli bonusmedlem
  • Läs artiklar
  • Chatta med andra
  • Sök och erbjud jobb
  • Kontakta oss
  • Studentlicenser
  • Skriv en artikel

Statistik

Antal besökare:
Antal medlemmar:
Antal inlägg:
Online:
På chatten:
4 536 710
27 862
260 112
465
0

Kontakta oss

Frågor runt konsultation, rådgivning, uppdrag, rekrytering, annonsering och övriga ärenden. Ring: 0730-88 22 24 | pelle@pellesoft.se

© 1986-2013 PelleSoft AB. Last Build 4.1.7169.18070 (2019-08-18 10:02:21) 4.0.30319.42000
  • Om
  • Kontakta
  • Regler
  • Cookies