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! :)

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! :)

• javascript
• html
• image

• 1 You may acplish this using CSS3 Animations.. The JS will only toggle the css effect class. – enapupe Commented Feb 10, 2014 at 0:06
• JSYK, that's not how you do ments in HTML – markasoftware Commented Feb 10, 2014 at 0:08
• and also, how you do those event handlers is old and obstrusive. Use JS to loop through and apply handlers – markasoftware Commented Feb 10, 2014 at 0:08
• 1 You will have to use some kind of CSS, at least the opacity. The setTimeout JS function will allow you to execute a function on a delay, like 50 milliseconds or something. Then, from within the function, call the setTimeout again on the same function until you reach some end condition where you don't re-call the function, and the animation is over. – jwatts1980 Commented Feb 10, 2014 at 0:11
• 1 If you go with a JS Loop, check "request animation frame" (rAF). – enapupe Commented Feb 10, 2014 at 0:13

2 Answers 2

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/cEDbs/

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

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/Rh976/

<img src="http://tippvet./wp-content/uploads/2013/05/cat-vet.jpg" class="img img1"/>
<img src="http://tippvet./wp-content/uploads/2013/05/cat-vet.jpg" class="img img2"/>
<img src="http://tippvet./wp-content/uploads/2013/05/cat-vet.jpg" class="img img3"/>
<img src="http://tippvet./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;
}