Response title
This is preview!
Random image fade in on load
in Using jQuery
•
12 years ago
Hi. Could anyone help me?
I currently have a script that randomly displays DIV content on my website. I need to find a way to make an image inside the DIV fade in once fully loaded. would be good to have a loading gif displayed also while the image is loading. The script i currently have is below. Thanks for your help!
I found this script that dose the load and fade in part perfectly so would be good to incorporate it into the random script i have already some how:
$(document).ready(function(){
$("#fadein1").bind("load", function () { $(this).fadeIn(600); });
});
What i have already:
<script type="text/javascript">
$(document).ready(function() {
$(".randomdiv").hide();
var elements = $(".randomdiv");
var elementCount = elements.size();
var elementsToShow = 1;
var alreadyChoosen = ",";
var i = 0;
while (i < elementsToShow) {
var rand = Math.floor(Math.random() * elementCount);
if (alreadyChoosen.indexOf("," + rand + ",") < 0) {
alreadyChoosen += rand + ",";
elements.eq(rand).show()
++i;
}
}
});
</script>
HTML
<div class="randomdiv">
<img class="img" src="felled_trees/felled_trees_01.jpg" alt="Felled Trees" />
<ul class="img-caption">
<li>Felled Trees 01</li>
<li><span class="sub-text">C-type print</span></li>
</ul>
</div>
<div class="randomdiv">
<img class="img" src="felled_trees/felled_trees_02.jpg" alt="Felled Trees" />
<ul class="img-caption">
<li>Felled Trees 02</li>
<li><span class="sub-text">C-type print</span></li>
</ul>
</div>
<div class="randomdiv">
<img class="img" src="felled_trees/felled_trees_05.jpg" alt="Felled Trees" />
<ul class="img-caption">
<li>Felled Trees 05</li>
<li><span class="sub-text">C-type print</span></li>
</ul>
</div>
<div class="randomdiv">
<img class="img" src="felled_trees/felled_trees_06.jpg" alt="Felled Trees" />
<ul class="img-caption">
<li>Felled Trees 06</li>
<li><span class="sub-text">C-type print</span></li>
</ul>
</div>
1