In my photo gallery, I can’t open the images with Ligthbox separately, how do I?

Question

I’m creating a photo gallery to insert my work in my portfolio. I was able to create the lightbox effect with jquery, however I would like you to open each image separately when clicking and not all together as is happening. Follows code:

<script type="text/javascript">

$(document).ready(function (){
$('.lightbox').click(function () {
    $('.background, .box').animate({'opacity':'.60'}, 200, 'linear');
    $('.box').animate({'opacity':'1.00'}, 200, 'linear');
    $('.background, .box').css('display', 'block');
});

$('.close').click(function(){
    $('.background, .box').animate({'opacity':'0'}, 200, 'linear', function(){
        $('.background, .box').css('display', 'none');
    });
});

$('.background').click(function(){
    $('.background, .box').animate({'opacity':'0'}, 200, 'linear', function(){
        $('.background, .box').css('display', 'none');
    });
});

});

</script>

and HTML:

<div class="centralizar-box">


    <div class="grid">
        <a href="#" class="lightbox" data-target="1" ><img src="file:///P:/Trabalhos/VouLevar/Banners/facebook/2017/05-maio/23/facebook.png" alt="img15"/></a>
        <div class="background"></div>      
        <div class="box"><div class="close">X</div><img src="file:///P:/Trabalhos/VouLevar/Banners/facebook/2017/05-maio/23/facebook.png" alt="img15"/></div>
    </div>

    <div class="grid">
        <a href="#" class="lightbox" data-target="2" ><img src="file:///P:/Trabalhos/VouLevar/Banners/facebook/2017/05-maio/17/facebook.png" alt="img15"/></a>
        <div class="background"></div>      
        <div class="box"><div class="close">X</div><img src="file:///P:/Trabalhos/VouLevar/Banners/facebook/2017/05-maio/17/facebook.png" alt="img15"/></div>
    </div>

    <div class="grid">
        <a href="#" class="lightbox" data-target="3" ><img src="file:///P:/Trabalhos/VouLevar/Banners/facebook/2017/05-maio/09/facebook.png" alt="img15"/></a>
        <div class="background"></div>      
        <div class="box"><div class="close">X</div><img src="file:///P:/Trabalhos/VouLevar/Banners/facebook/2017/05-maio/09/facebook.png" alt="img15"/></div>
    </div>

    <div class="grid">

        <a href="#" class="lightbox" data-target="4"><img src="file:///P:/Trabalhos/VouLevar/Banners/facebook/2017/05-maio/11/facebook.png" alt="img15"/></a>
        <div class="background"></div>      
        <div class="box"><div class="close">X</div><img src="file:///P:/Trabalhos/VouLevar/Banners/facebook/2017/05-maio/11/facebook.png" alt="img15"/></div>
</div>

How do I open each image separately, with lightbox?

Answer 1

I made this example of how to do what you want, it’s also in my github

$(function(){
    var modal = '<div class="shadow">'+
        '<a href="#" class="close-box">X</a>'+
        '<div class="imagem"></div>'+
        '</div>';
    $('body').append(modal);


    function openModal(imagem, title, effect){

        $('.shadow .imagem').html('<img src="'+imagem+'" /><div class="title">'+title+'</div>');

        if(effect == 'show'){
            $('.shadow').show();
        }else if(effect == 'fadeIn'){
            $('.shadow').fadeIn();
        }
    }


    $('.shadowBox').on('click', function(e){
        e.preventDefault();
        var imagem = $(this).attr('href');
        var title  = $(this).attr('title');
        var effect = $(this).attr('data-effect');
        openModal(imagem, title, effect);
        return false;
    });

    $('.close-box').on('click', function(e){
        e.preventDefault();

        $('.shadow').fadeOut();
        return false;
    });

    $('body').on('click', '.shadow', function(){
        e.preventDefault();

        $('.shadow').fadeOut();
        return false;
    });
});

*{
    margin:0;
    padding:0;
    border:0;
    box-sizing:border-box;
    list-style-type:none;
    font-family: 'Roboto', sans-serif;
}

h1{
    text-align: center;
}

p{
    width: 100%;
    text-align: center;
    float: left;
    margin-top: 30px;
}

.shadow{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:9999;
    background:rgba(0,0,0,0.7);
    padding:50px;
    display:none;
}

.shadowBox{
    width: 150px !important;
    height: 100px;
    float: left;
    overflow: hidden;
    margin-right: 20px;
}

.shadowBox img{
    width: 100%;
}

.shadow .close-box{
    position:absolute;
    top:0;
    right:0;
    padding:30px;
    font-size:16px;
    color:white;
    text-decoration:none;
}
.shadow .imagem{
    float:left;
    width:100%;
    background:#fff;
    position:relative;
}

.shadow .imagem .title{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    padding:5px;
    background:rgba(0,0,0,0.7);
    color:white;
    font-weight:bold;
}

.shadow .imagem img{
    float:left;
    width:100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Efeitos</h1>

	<p>SHOW</p>
    <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Steve_Jobs_Headshot_2010-CROP.jpg/1200px-Steve_Jobs_Headshot_2010-CROP.jpg" title="Minha imagem 1" data-effect="show" class="shadowBox">
    	<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Steve_Jobs_Headshot_2010-CROP.jpg/1200px-Steve_Jobs_Headshot_2010-CROP.jpg">
    </a>
    

    <p>FadeIn</p>

    <a href="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Steve_Jobs_Headshot_2010-CROP.jpg/1200px-Steve_Jobs_Headshot_2010-CROP.jpg" title="Minha imagem dois" data-effect="fadeIn" class="shadowBox">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b9/Steve_Jobs_Headshot_2010-CROP.jpg/1200px-Steve_Jobs_Headshot_2010-CROP.jpg">
    </a>