I'm creating a photo gallery to insert my work into my portfolio. I was able to create lightbox effect with jquery, however I would like it to open each image separately when clicking and not all together as it is happening. Here is the 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?