Afbeelding gallerij met 'vorige' en 'volgende' knoppen
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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");
});
});
$('.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");
});
});
Toevoeging op 19/12/2019 03:55:33:
Niet zo zeer om het wiel opnieuw uit te vinden haha
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