Light-Box Gallery

Navigation
0

My question is this: I want to put some images designed in phothoshop as sample images on my page, they are cut in the shape of a diamond, but I want you to click on it to show me another image, which I have inside another folder of images ... I explain.

I have the X image that is in src="img/x.png"... but I want that when giving click to me it shows me the image And ... that this in another different folder ....

On how to do it with js, but I do not want to repeat the code, how do I do it efficiently? ... the code I'm using is this 

$('.img').click(function(e){
    var modal = '<div class="modal" id="modal"><img src="img/section2/mst/Asset8.jpg" class="modal-img"><div class="modal-btn" id="modal-btn">X</div></div>';
    $('body').append(modal);
    $('#modal-btn').click(function(){
        $('#modal').remove();
    });
});

But there are 12 images, I do not want to repeat this code 12 times for each image, How do I make a single code in jquery for the 12 images?

    
asked by Jajo Go 05.04.2017 в 05:56
source

1 answer

0

What I would do is that the two forms:

  • If you want to use two folders, you would have the two images (in both folders) be called the same. Then it's as simple as, when you click, replace one folder with another and that's it.
  • The same thing is easier for you to keep the images in a single folder and identify them by a suffix (for example, "_diamond" and "_square") and thus, as in the previous case, it is to change one suffix for another.

In my opinion I think the second method is easier because it is easier to manage if you have the images together and the replacement is also somewhat easier since all the images are in the same folder.

    
answered by 05.04.2017 в 08:51
Change name to XML tag Problem integrating Firebase with Nativescript