Afbeelding gallerij met 'vorige' en 'volgende' knoppen

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Senior DevOps-ontwikkelaar eIDAS

Functie­omschrijving Burgers en bedrijven veilig en betrouwbaar digitaal toegang geven tot diensten en producten van het ministerie van Economische Zaken en Klimaat. Als senior DevOps-ontwikkelaar bouw je daar letterlijk aan mee. En dat doe je bij DICTU: een van de grootste en meest vooruitstrevende ICT-dienstverleners van de Rijksoverheid. Jij werkt mee aan de doorontwikkeling van eIDAS, dat staat voor Electronic IDentification Authentication and trust Services. Deze koppeling maakt de grensoverschrijdende authenticatie op overheidswebsites binnen de Europese Unie mogelijk. Het ministerie van Economische Zaken en Klimaat heeft één moderne toegangspoort voor zijn diensten en inspecties. Enkele daarvan zijn dankzij eIDAS inmiddels

Bekijk vacature »

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

06/07/2020 10:52:54
 
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.