3
I have this code that makes of a kind of fancybox, it works well but I wish that the click in the image did not make disappear the '#overlayFancy', it was good that only the click out of the image is to make with this disappear everything, although the image is inside the '#overlayFancy' which occupies 100%*100% of the window and the image is in the middle of the window, 500px*500px.
HTML:
<div class="wrapperExtraImg" style="background-image:url(<?php echo 'admin/' .$extraImg->extra_image_path; ?>)"></div>
<div id="overlayFancy"></div>
js: Zoom in
$(document).on('click', '.wrapperExtraImg' ,function(){
var image = $(this).attr('id');
$('#overlayFancy').stop().animate({
"opacity":"1"
}, 500);
$( "#overlayFancy" ).append( "<img src="+image+">" );
});
js: Disappear, return to default page
$(document).on('click', '#overlayFancy' ,function(){
$('#overlayFancy').stop().animate({
"opacity":"0",
}, 300);
$('#overlayFancy').children('img').remove();
});
Tried to put the image in a new Div inside the #overlayFancy. Type la in the append would be $( "#overlayFancy" ).append( "<div><img src="+image+"></div>" ); ?
– Franchesco
Does the same, remains #overlayFancy’s Child
– Miguel
Can you explain in other words? for me it is still unclear
– Sergio