I'm enlarging images on click and moving them so they don't go off the page. I have a parent div behind each that is black pic so that when I hover, I can change the opacity of the pic to make it look like it's darkening. All of this works fine, however, when I enlarge and move the photo there is a black box left behind. I need that to disappear but when I try it makes the child pic disappear too.
here's the code, jsfiddle posted beneath
HTML
<div id="Gpic1">
<img class='galleryPics' id='pic1' src='http://i.imgur.com/urxD24P.jpg?1'>
</div>
CSS
#Gpic1 {
float: left;
width: 187px;
height: 280px;
margin-left: 5%;
display: inline-block;
background: black;
padding: 0;
}
#pic1{
width: 187px;
height: 280px;
}
.enlarged {
border: 10px solid #e5dbcc;
position: absolute;
-webkit-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);
box-shadow: 7px 7px 5px rgba(50, 50, 50, 0.75);`
}
JQUERY
$('#Gpic1').hover(function () {
if (!$(this).find('img').hasClass('enlarged')) {
$(this).find('img').fadeTo(500, 0.5);
}
}, function () {
$(this).find('img').fadeTo(500, 1);
});
$('#pic1').click(function () {
$(this).fadeTo(0, 1);
if ($(this).hasClass('enlarged')) {
$(this).removeClass('enlarged');
$(this).stop().animate({
width: 187,
height: 280
}, 0,
function () {
$(this).parent().removeClass('ontop');
});
} else {
$(this).addClass('enlarged')
$(this).parent().addClass('ontop');
$(this).stop().animate({
width: 533,
height: 800,
left: +590,
bottom: +50
}, 200);
}
});
When you try to remove #Gpic1
, all children are removed even if they are absolutely positioned.
If you just want the black background to go away, you can remove the black background from the containing div.
$("#Gpic1").css("background-color", "transparent");
Or, if you really want to remove the containing div, then you will need to make the image a child of some other object on the page. If you're using absolute positioning, then you could just make the image a child of the body object instead of #Gpic1 so then you can remove #Gpic1 and the image won't disappear.
// move pic1 to be a child of the body so we can remove Gpic1
$("#pic1").appendTo(document.body);
$("#Gpic1").remove();
Add this at the end of the animate for the pic onClick Event
$('#Gpic1').css('background','none');
Here is a fiddle.
$('#Gpic1').css('background','none');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.