/    Sign up×
Community /Pin to ProfileBookmark

Image Transition

Copy linkTweet thisAlerts:
Jun 22.2006

Hi everyone,

I have been asked to add a image fader to a website so that the previous visited page placement image is loaded on the new page and fades into the new image.

eg –

Visitor is on the “About Us” page, they then click on the “Contact Us” page. The placement image on the “About Us” page is called about.jpg so the about.jpg image loads and then after 10 seconds it fades to the contact.jpg image.

I am using PHP Session Variables to know which page the visitor has come from and determine which to show first.

Does anyone know how to do this. I am not much of a JavaScript programmer, know the basics but that is about it.

Thanks,
Simon.

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@simontuxauthorJun 22.2006 — Just a bit more information that might help.

I am not after a Slide Show effect. I want it to display the first image normally and then after 10 seconds or so fade the new image over the first image and stop.

Also need it to be a cross browser supported script.

I thought I found one awhile ago, but just can't seem to find it anywhere.
Copy linkTweet thisAlerts:
@simontuxauthorJun 23.2006 — If anyone is attempting to do this here is the solution. Managed to work it out after a lot of trial and error to find that it was this simple.

<i>
</i>&lt;style type="text/css"&gt;

#photoholder {
width:178px;
height:453px;
background:#fff url('images/gallery/&lt;? echo $firstpic ?&gt;') 50% 50% no-repeat;
}
#thephoto {
width:178px;
height:453px;
}
&lt;/style&gt;

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

function initImage() {
imageId = 'thephoto';
image = document.getElementById(imageId);
setOpacity(image, 0);
image.style.visibility = "visible";
fadeIn(imageId,0);
}
function fadeIn(objId,opacity) {
if (document.getElementById) {
obj = document.getElementById(objId);
if (opacity &lt;= 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&lt;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()}


And the following is what you put on the page where you want to display the image.

<i>
</i>&lt;div id='photoholder'&gt;&lt;img src="images/gallery/clients.jpg" width="178" height="453" alt="" border="0" alt='Photo' id='thephoto' /&gt;&lt;/div&gt;
×

Success!

Help @simontux spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...