Afbeelding gallerij met 'vorige' en 'volgende' knoppen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Jorn Reed

Jorn Reed

18/12/2019 16:58:29
Quote Anchor link
Ik heb een tijdje geleden met jQuery een script geschreven, zodra je op een afbeelding klikt, word er een divje op display: block gezet en word daarin de afbeelding in uitvergrote versie getoond. Ik vroeg me af of het mogelijk was om hier een vorige, volgende optie bij te kunnen maken. In mijn project gebruik ik bootstrap dus zat ook te kijken of het te combineren was met dit: https://getbootstrap.com/docs/3.3/javascript/#carousel

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$( document ).ready(function() {
    $('.img-highlight').click(function () {
        const el = $(".photo-size");
        el.css("display", "block");
        var src = $(this).attr('src');
        const block = $(".image-viewer");
        $(this).clone().appendTo(block).attr('src', src).addClass('highlighted-img');
    });

    $('.close').click(function (ev) {
        ev.preventDefault();
        $('.image-viewer').empty()
        $(".photo-size").css("display", "none");
    });

});
 
PHP hulp

PHP hulp

29/03/2020 01:05:01
 
Frank Nietbelangrijk

Frank Nietbelangrijk

18/12/2019 22:05:14
Quote Anchor link
Waarom gebruik je niet gewoon Fancybox of Lightbox
 
Jorn Reed

Jorn Reed

19/12/2019 03:55:16
Quote Anchor link
Wist niet van het bestaan af. Is het heel lastig om zoiets zelf te programmeren? Zou graag mijn Javascript/jQuery skills nog omhoog willen halen.

Toevoeging op 19/12/2019 03:55:33:

Niet zo zeer om het wiel opnieuw uit te vinden haha
 
Frank Nietbelangrijk

Frank Nietbelangrijk

19/12/2019 17:41:13
Quote Anchor link
>> Is het heel lastig om zoiets zelf te programmeren? Zou graag mijn Javascript/jQuery skills nog omhoog willen halen.

Het is te doen als je wat kennis van HTML en CSS hebt. Het is uiteindelijk gewoon een action toevoegen aan een linkje en die action moet dan de foto in het groot gaan tonen. Hoe je dat dan wilt gaan doen daar kun je over nadenken. Je zou bijvoorbeeld een verborgen modalbox onder in je body kunnen toevoegen. Kijk eens hoe bijvoorbeeld Modals werken. In plaats van een Dialog laat je dan natuurlijk een div met een foto zien. Over de foto heen zul je wat knoppen willen toevoegen. Hiervoor zou je je eens kunnen verdiepen in twee div's die elkaar overlappen.
Gewijzigd op 19/12/2019 18:50:17 door Frank Nietbelangrijk
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.