Show Loading gif on hover
I want to show the Loading.gif in the image I hover over, I am already trying in css like this:
img {background:url(../images/loading.gif) no-repeat center center; }
it looks good for all images, but doesn't work on the image I find on.
try adding a div
<div class="load"></div>
.load {background:url(../images/loading.gif) no-repeat center center; }
<div class="detailimage">
<img class="mainimage" src="<?php echo $base; ?>/img.php?w=600&h=600&img=images/<?php echo $datadetailproduct['images']; ?>" />
<ul>
<?php
while ($datadetailthumb = mysqli_fetch_assoc($detailthumb)) {
?>
<li>
<img src="<?php echo $base; ?>/img.php?w=75&h=75&img=images/<?php echo $datadetailthumb['thumb']; ?>" />
</li>
<?php } ?>
</ul>
</div>
this is my jquery
$(".detailimage li img").hover(function(){
$(".mainimage").attr("src",$(this).attr("src").replace("img.php?w=75&h=75&img=images/", "img.php?w=600&h=600&img=images/"));
});
when i click on thumb image i want to show load.gif in .detailimage img (" main image ")
how do I add this jquery to my recent jquery? .show ("load") ?
+3
source to share
2 answers
Maybe this can help you (pure css solution):
http://codepen.io/davidlampon/pen/KpoaNa
I simplified the html and removed all php:
<div class="detailimage">
<ul>
<li>
<img class="load"></div>
</li>
</ul>
</div>
CSS (only here you have to specify the image dimensions):
ul {
list-style-type: none;
}
.load {
width: 316px;
height: 316px;
background:url(http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png) no-repeat center center;
}
.load:hover{
background:url(http://www.cuisson.co.uk/templates/cuisson/supersize/slideshow/img/progress.BAK-FOURTH.gif) no-repeat center center;
}
+3
source to share
If you need jQuery solution you can see this jsfiddle
https://jsfiddle.net/codotronix/3n6a3ug7/
Html
<li>
<img src="http://mlb-s2-p.mlstatic.com/adesivo-parede-infantil-mickey-donald-pateta-disney-baby-16663-MLB20124000600_072014-F.jpg"/>
</li>
<li class="hoverDiv">
<img src="http://mlb-s2-p.mlstatic.com/adesivo-parede-infantil-mickey-donald-pateta-disney-baby-16663-MLB20124000600_072014-F.jpg"/>
</li>
CSS
li {
position: relative;
list-style:none;
display:inline-block;
margin: 10px;
}
li img {
height:100px;
width:100px;
}
div.loading {
position: absolute;
top:0;
left:0;
background: url('http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif') no-repeat center center;
height:100px;
width:100px;
}
and jQuery
$('li').on('mouseenter', function(){
$(this).append('<div class="loading"></div>');
});
$('li').on('mouseleave', function(){
$(this).find('div.loading').remove();
});
The trick here is to add a loading div on the mouseenter and remove it on the mouse background.
0
source to share