I need some help. I have a pictures gallery, made with jquery and wordpress (so I can't change the HTML structure).
So, I wanted my gallery to show 6 pictures when I'm on mobile device. That's working and this part is ok.
But ! (there is always but), I wanted that each time I click on the link "show more", only 8 (or 6, or 10, whatever, but not all pictures) are visible.
Actually, with my code, if I wanted 8 pictures more for example, only 2 pictures are load :
·/ Actually : click link = the 6 first + 2 load.
·/ That I want : click link = the 6 first + 8 load more (each time I click).
Can you help me ?
html structure :
<div class="et_pb_gallery_items">
<div class="et_pb_gallery_item et_pb_gallery_item_0_0"><div>
<div class="et_pb_gallery_item et_pb_gallery_item_0_1"><div>
<div class="et_pb_gallery_item et_pb_gallery_item_0_2"><div>
<& bis repetitae></bis repetitas>
</div>
JS code :
Part ok
var itemsGalerie = $('.pageInt-galerie').find('.galerie-mod').find(".et_pb_grid_item");
if ($("body").width() <= 413) {
$(itemsGalerie).addClass("hide");
var slide = $(itemsGalerie).slice(0, 6).addClass("show");
}
Part not OK / Cta gallery
$(".ctaGallery").on('click', function(e) {
e.preventDefault();
if ($("body").width() <= 413) {
$(itemsGalerie).slice(0, 8).slideDown("slow").addClass("show");
}
});
Thanks to you and have a nice day
Laura