Looking for some help with my code that opens images in an overlay div. I am struggling to add a border to the image object, as it only displays the raw image without any border. How can I modify this code to include a border around the image and also add a close button at the top right corner?
$(document).ready(function(){
$('a.lightbox').click(function(e){
$('body').css('overflow-y',' hidden');
$('<div id="overlay"></div>')
.css('top', $(document).scrollTop())
.css('opacity', '0')
.animate({'opacity': '0.6'}, 'slow')
.appendTo('body');
$('<div id= "lightbox"></div>')
.hide()
.appendTo('body');
$('<img>', {
src: $(this).attr('href'),
load: function() {
positionLightboxImage();
},
click : function() {
removeLightbox();
}
}).appendTo('#lightbox');
return false;
});
});
function positionLightboxImage() {
var top = ($(window).height() - $('#lightbox').height()) / 2;
var left = ($(window).width() - $('#lightbox').width()) / 2;
$('#lightbox')
.css({
'top': top + $(document).scrollTop(),
'left': left
})
.fadeIn();
}
function removeLightbox() {
$('#overlay, #lightbox')
.fadeOut('slow', function() {
$(this).remove();
$('body').css('overflow-y', 'auto'); // show scrollbars!
});
}
<a class="lightbox" href="<?php echo $row_searchHH['imageURL']; ?>"><img src="<?php echo $row_searchHH['imageURL']; ?>" width="90" height="90" style="margin-left:10px" /></a>