My script successfully adds the image src to the overlay's image, but I encounter a problem when creating the variable imgH for the margin-top value. It calculates the image's height and divides it in half.
The issue arises when the calculated height ends with .5, so I incorporated safeInt = Math.floor(iH) to eliminate any decimal from the value.
In my portfolio, the image centering appears erratic or sets the overlay margin to 0. I am unable to pinpoint what is preventing the variable from correctly aligning the image.
I have some experience with jQuery, so I apologize if this mistake seems basic.
Below is the jQuery code:
function imgOverlay() {
$('.codeCont img').on('click', function() {
var imgData = $(this).attr('data');
$('.overlay').fadeIn().find('img').attr('src', imgData);
if ($('.overlay img').attr('src') === 'images/vec-3.jpg') {
$('.overlay').addClass('imgLong');
}
else {
$('.overlay').removeClass('imgLong');
}
$('.close').on('click', function() {
$('.overlay').fadeOut();
});
var iH = $('.overlay img').height()/2,
safeInt = Math.floor(iH),
imgH = "-" + safeInt + 'px';
$('.overlay').css({
'margin-top' : imgH
});
});
}
imgOverlay();
Here is the fiddle showcasing the issue: Demo - When cycling through the images from left to right, you will observe inconsistent behaviors with the margin-top.
For a clearer view of the problem, visit the site directly: Direct Link to Site