0 votes

Gallery in jQuery, problem when opening and closing "Modal".

I am trying to create a gallery, in which clicking on the main image opens a window modal in which the modal is the div simply, by jquery, I change the classes and it obtains the appearance of modal.

The function I am trying to achieve is as follows:

When the gallery is closed, I click on the main image, and the gallery opens, if I click again on the main image, the gallery closes, and so on and so forth.

The gallery opens, then closes, but does not reopen.

This is my code:

$('.galeria').click(function() {
    if (screen.width > 481) {
         //$('body').addClass('bloqueado');
         $('.msgGaleriaDesk').hide();
         $('#galPpal').removeClass('col-2');
         $('#galPpal').addClass('modal');
         $('#iGrande').addClass('open');
         $('#iGrande').removeClass('galeria');
         //$("div.imgThumbs").scrollLeft(300);

        $('.open').click(function() {
            console.log(screen);
             //$('body').addClass('bloqueado');
             $('#galPpal').removeClass('modal');
             $('#galPpal').addClass('col-2');
             $('#iGrande').addClass('galeria');              
        });
    }
});

This is the HTML:

<div id="imgGrande" class="DivImgGrande">
    <span id="cerrarModal" class="cerrar">&times;</span>
     <?php
     echo '<img id="iGrande" class="imgGrande galeria" src="'.$arr_img_prin['big'].'" alt="'.$arr_img_prin['alt'].' width="100%">';
     ?>
</div>

According to jQuery, when opened, it adds to the img the class open and closing it is supposed to remove it (it works correctly) the problem is that it does not reopen the gallery after closing it.

2voto

akko Points 1477

You can try the toggleClass .

2voto

JessHilario Points 737

You have two problems, the first one is that you are using a single ID for all your images, something that can generate problems, and the second one is that you are not removing the class .open of the image once you click on the image again to close it.

I leave you the corrected JS code:

$('body').on('click', '.galeria', function() {
    if (screen.width > 481) {
         //$('body').addClass('bloqueado');
         $('.msgGaleriaDesk').hide();
         $('#galPpal').removeClass('col-2');
         $('#galPpal').addClass('modal');
         $('#iGrande').addClass('open');
         $('#iGrande').removeClass('galeria');
         //$("div.imgThumbs").scrollLeft(300);

        $('body').on('click', '.open', function() {
            console.log(screen);
             //$('body').addClass('bloqueado');
             $('#galPpal').removeClass('modal');
             $('#iGrande').removeClass('open'); // Quitamos la etiqueta open de la imagen
             $('#galPpal').addClass('col-2');
             $('#iGrande').addClass('galeria');              
        });
    }
});

I also recommend that you use $('body').on('click', '.open', function() {}); instead of $('.open').click(function(){}); because the latter does not work correctly when you modify classes or generate new elements in doom. I leave you here a link where this is better explained.

Greetings!

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X