Multiple Image fadeIn onLoad (at the same time)

Question

I want to fade in multiple images at the same time as the page loads. Just like this website does it: http://www.struckaxiom.com/work. I have the script to do it only on one image, but I want to have more images included. This is the single photo script. Please help.

document.write("<style type='text/css'>#thephoto {visibility:hidden;}</style>");


function initImage() {
    imageId = 'thephoto'
    image = document.getElementById(imageId);
    setOpacity(image, 0);
    image.style.visibility = "visible";
    fadeIn(imageId,ImageId2,0);
}
function fadeIn(objId, opacity) {
    if (document.getElementById) {
        obj = document.getElementById(objId);
        if (opacity <= 100) {
            setOpacity(obj, opacity);
            opacity += 10;
            window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
        }
    }
}
function setOpacity(obj, opacity) {
    opacity = (opacity == 100)?99.999:opacity;
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}
window.onload = function() {initImage()} 
// -->

</script>

Thanks!

score 1 · Answer 1 · answered Feb 25 '11 at 08:40

1

Simple array and loop are all you need.

First, add such array on top of the code:

var images = [ "thephoto1", "thephoto2", "thephoto3" ];

(With the ID of all desired images)

Next change the function name to initImages to reflect the fact it will initialize more than one image and finally add that loop:

function initImages() {
    for (var i = 0; i < images.length; i++) {
        imageId = images[i];
        image = document.getElementById(imageId);
        setOpacity(image, 0);
        image.style.visibility = "visible";
        fadeIn(imageId, 0);
    }
}

That's it, no need to touch the other functions.

Live test case with cute cats: http://jsfiddle.net/yahavbr/e863X/ :-)

answered Feb 25 '11 at 08:40

Shadow The GPT Wizard

66,030
26
140
208

AFAIC, this solves the problem, but it would look better if you didn't reveal the pictures until they were loaded. – Kranu Feb 25 '11 at 08:43
@Kranu cheers! Actually in the example we could use just `img {visibility:hidden;}` and in the "real case" it's best to add class to those images e.g. `` then have `.fader {visibility:hidden;}` – Shadow The GPT Wizard Feb 25 '11 at 08:59

score 0 · Answer 2 · answered Aug 30 '13 at 16:02

The way they are doing is using jQuery (an excellent implementation). All of the images are in the same container and are selected using the jQuery class selector. Then they fade in all elements that fit within the viewable area. Their js file is not minimized so you could reverse engineer most of that functionality. The important thing to note is not that it is showing each row at a time but every element that fits in the viewing area. Their key function looks like this:

var elTop = $(el).offset().top - $(window).scrollTop();
var elHeight = $(el).height();
// if between top of footer and top of window
if (elTop + elHeight > 40 && elTop < $(window).height()) {

  if ($.inArray($(el).attr("data-unique-id"), elementsInView) < 0) {
    addToView(el);
  }

} else {

  if ($.inArray($(el).attr("data-unique-id"), elementsInView) >= 0) {
    removeFromView(el);
  }

}

addToView and removeFromView add and remove the element from an array, then fade is executed on the array.

score 0 · Answer 3 · answered Feb 25 '11 at 09:02

You could just wrap all of your images in a single container like this:

<div id="imageContainer">
    <img src="img1.jpg">
    <img src="img2.jpg">
    <img src="img2.jpg">
</div>

Change your CSS to this:

<style type='text/css'>#imageContainer {visibility:hidden;}</style>

Change your first function to this:

function initImage() {
    containerId = 'imageContainer'
    container = document.getElementById(containerId);
    setOpacity(container, 0);
    container.style.visibility = "visible";
    fadeIn(containerId,0);
}

By running the fading effect on the container you can then add as much content to the container and it will all fade in together and you never have to update your code.

Multiple Image fadeIn onLoad (at the same time)

3 Answers3

Linked