1

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

0

Browse other questions tagged or ask your own question.