Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

fade images in and out w/ javascript


  • Please log in to reply
6 replies to this topic

#1 gorydragon

gorydragon

  • Members
  • 55 posts
  • OFFLINE
  •  
  • Local time:09:46 PM

Posted 21 March 2010 - 05:07 PM

hey take a look at this website www.jefgc.com

they used flash to make the pictures come in and out like that, how would i go about doing it with javascript?
im pretty sure its an easy thing to do, but im trying to learn js on my own, so i havent been able to figure it out..

all help is very appreciated :thumbsup:

BC AdBot (Login to Remove)

 


#2 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:08:46 PM

Posted 21 March 2010 - 06:16 PM

http://clagnut.com/sandbox/imagefades/

#3 gorydragon

gorydragon
  • Topic Starter

  • Members
  • 55 posts
  • OFFLINE
  •  
  • Local time:09:46 PM

Posted 21 March 2010 - 09:00 PM

thanks, how can i stagger them a bit? so 1 loads, 2 loads, 3 loads.

#4 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:08:46 PM

Posted 22 March 2010 - 07:03 AM

Do you mean side-by-side, so there are (for instance) 3 sets of images that are displayed?

#5 gorydragon

gorydragon
  • Topic Starter

  • Members
  • 55 posts
  • OFFLINE
  •  
  • Local time:09:46 PM

Posted 22 March 2010 - 02:19 PM

yeah, i want the same effect as on the jefgc.com site, except using javascript rather than Flash.

#6 groovicus

groovicus

  • Security Colleague
  • 9,963 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Centerville, SD
  • Local time:08:46 PM

Posted 22 March 2010 - 02:54 PM

When the page loads, use an onload function to fade in the images, taking the id of the div as a parameter. So something like this:
function initImage(elementId) {
  image = document.getElementById(elementId);
  setOpacity(image, 0);
  image.style.visibility = 'visible';
  fadeIn(imageId,0);
}

Then you would create a new function something like the following:
function fadeImage(){
  initImage(element1);
  initImage(element2);
  initImage(element3);
}

Then your onload function call becomes this:
window.onload = function() {fadeImage()}


#7 Wolfy87

Wolfy87

  • Members
  • 414 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:England
  • Local time:02:46 AM

Posted 30 March 2010 - 10:46 AM

Ive just done some fading for a contact form, take a look into jQuery, for example...

$(document).ready(function() {

// As the document becomes "ready", hide the image.
$("#myImage").hide();

// Now you want it to fade in from hidden.
$("#myImage").fadeIn("slow");

});

If that doesn't help here is a page on it.

Hope this helps, Wolfy87.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users