Fade an Image Using JavaScript (NOT JQuery!)

Question

Hey everyone I have a homework question,

I need to fade in and out an image "gallery-style" using JavaScript. Note: NOT JQuery. I cannot use JQuery, per the assignment outline.

So there's a grid of images (32 of em if you care) they're all 100x100px thumbnails. Each one is in its own div, and the whole thing is nested inside another div, like so:

gallery.html

<div id="imageContent">

<div id="img" class="imageWhite" 
     onclick="fade(1984)"
     onmouseover="highlightWhiteFunction(this)" 
     onmouseout="unHighlightFunction(this)"> 
     <img src="../Media/Thumbs/1984.jpg"/> 
</div>

...31 others just like that

</div> //End of the whole container

So when you click on one of these images, it should fade that image in over the top of everything else. The width of this picture should be 500px, but the height can vary so distortion doesn't occur. Again, I CANNOT use JQuery for this...and yes, I know that'd make life a lot easier.

So far I only have a debug thing to detect that I can at least find which one is clicked on:

gallery.js

function fade(name) {
    var theName = name;
    console.debug("Clicked " + theName);
}

If the user clicks anywhere on this image, it needs to fade out. If the user clicks another thumbnail, it doesn't need to fade out, it can just disappear, but the other one needs to start fading in.

My thoughts: Obviously I need a hidden div with width 500, and when these actions occur, I hide/unhide the div as necessary. The gist I've gotten from the professor is that to use JavaScript, you change the opacity in relation to a passage of time that you get from the system.

What I'm looking for in an answer here is maybe some clearer (more detailed) hints on how to go about this. I know how it needs to look, and I'm pretty sure I know the high-level of how to do it, I just don't know how to start doing it with code.

Any help would be appreciated, and I'll be around to answer any follow-up questions.

Again: NO JQuery! :)

Answer 1

Something like this should work

 function fadeIn(el, time) {
     el.style.opacity = 0;
     el.style.display = "block";

     var last = +new Date();
     var tick = function() {
          el.style.opacity = +el.style.opacity + (new Date() - last) / time;
          last = +new Date();

          if (+el.style.opacity < 1) {
               (window.requestAnimationFrame && requestAnimationFrame(tick)) ||      setTimeout(tick, 16)
          }
     };

     tick();
}

Here is an example: http://jsfiddle.net/cEDbs/

Just bind the image onclick to call that method with the element.

Answer 2

Here is a CSS based solution. The fade may not be exactly like you want, but can easily be adjusted. Try out the JSFiddle and click an image to see a css transition-- clicking an image fades it larger. Click again fades it back.

http://jsfiddle.net/Rh976/

<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img1"/>
<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img2"/>
<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img3"/>
<img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" class="img img4"/>

JS

var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; i++){
    var img = imgs[i];
    img.addEventListener('click',function(e){  
        if(!this.className.match(/big/)){          
            this.className += ' big'; 
        } else {
             this.className = this.className.replace(/big/,'');
        }
    });        
}

CSS

.img {
    -webkit-transition: all 1.0s ease-out;
    -moz-transition: all 1.0s ease-out;
    -o-transition: all 1.0s ease-out;

    position:absolute;   
    width:150px;
    height:100px;
    z-index:1;
}

.img.img1 { top: 10px;  left: 10px; }
.img.img2 { top: 10px;  left:170px; } 
.img.img3 { top:120px;  left: 10px; }
.img.img4 { top:120px;  left:170px; } 

.img.big {
    position:absolute;
    width:450px;  
    height:300px;
    top:10px;
    left:10px;
    z-index:20;
}