Cross-browser BlendTrans Filter JavaScript

Des

March 17, 2004 @ 10:48 AM

I wanted to use an image transition for my photo gallery and while revealTrans and blendTrans filters were available for IE and no equivalent filter was available for
Mozilla/Netscape until I came across your site. And found your code which was an affective use of setting the opacity in CSS. I used the following code with your code to ensure only one pass of the transition occurred if the user repeatedly retriggered it.

var fade_started=0;
function fadeTransStart(id1, id2, t1)
{
if(fade_started==0)
{
fadeTrans(id1, id2, t1);
}
}
function fadeTrans(id1, id2, t1)
{
if(fade_started==0)
{
fade_started=1;
opacity(id1,100,0,t1);
setTimeout("fadeTrans('"+id1+"', '"+id2+"', "+t1+")",t1);
}
else
{
document.getElementById(id1).src = document.getElementById(id2).src;
opacity(id1, 0, 100, t1);
setTimeout("fadeTransComplete()",t1);
}
}
function fadeTransComplete()
{
fade_started=0;
}

if you use 2 image elements with id1 and id2 one shown and one hidden you can load the next image into the hidden image element while the user is viewing the shown image you solve the problem with preloading.

Have a look at http:/www.bluegroper.com/valiant.htm

Cheers
Des

kotb

July 4, 2004 @ 12:15 AM

Im french, hard to understand...But ! It seems you did a really good work like a professionnal. Thanks to help webmaster community !

I must say this is a very clean script, I've been writing PHP for years but I only recently started to delve into JavaScript. Anyways, I must say it's written very well, and because of the tidiness it's been very easy to explain to my friend who does the web designing portion of website creations. Keep up the good work!

It's a great script!.... but (there is always a but eh ) ......do you know of any way to make these effects work in Opera browser? If you do could you please give me a clue.... please? TIA

trimidium

September 7, 2004 @ 5:57 AM

How can you make your script fade in and out constantly? If you want an example of this visit thesmartass.info
in internet explorer

Is it possible to do the same effects with other object than images? I'd like to know how to make that effect with sub-menu of a dynamic menu for example. Somebody can help me?

Very nice! .. .. But is there a "cross platform" script (like this) that works with "Opera" also?

Thanks for the excellent tutorial... i used your code here in combination with some other code to generate an expandable cross platform slide show with cross fade... here's the code if you are interested...
Thanks for your good work!

function call:
<script language="JavaScript">RunSlideShow("divid","imageid","images/1.jpg;images/2.jpg;images/3.jpg;images/4.jpg;",3);</script>

functions:
//www.cryer.co.uk © 2004 and www.brainerror.net ver 1.3 © June 7,2004
//were reference for the following Javascript slide show code
function changeOpac(opacity, id)
{
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}

function blendimage(divid, imageid, imagefile, millisec)
{
var speed = Math.round(millisec / 10);
var timer = 0;

//set the current image as background
document.getElementById(divid).style.backgroundImage = "url(" + document.getElementById(imageid).src + ")";

//make image transparent
changeOpac(0, imageid);

//make new image
document.getElementById(imageid).src = imagefile;

//fade in image
for(i = 0; i <= 100; i++)
{
setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
timer++;
}
}

var slideCache = new Array();
function RunSlideShow(divid,imageid,imageFiles,displaySecs)
{
var imageSeparator = imageFiles.indexOf(";");
var nextImage = imageFiles.substring(0,imageSeparator);

changeOpac(0, imageid);
blendimage(divid,imageid,nextImage,100);

var futureImages= imageFiles.substring(imageSeparator+1,imageFiles.length)+ ';' + nextImage;
setTimeout("RunSlideShow('"+divid+"','"+imageid+"','"+futureImages+"',"+displaySecs+")",displaySecs*1000);

// Cache the next image to improve performance.
imageSeparator = futureImages.indexOf(";");
nextImage = futureImages.substring(0,imageSeparator);
if (slideCache[nextImage] == null)
{
slideCache[nextImage] = new Image;
slideCache[nextImage].src = nextImage;
}
}

Arlin

March 10, 2005 @ 2:34 PM

This is great stuff. But one always wants more! Is it possible to create a slide show where specific image file names are not specified, but rather every image in a specified directory is displayed, one at a time?

ponchy

March 30, 2005 @ 3:10 AM

thks man giving i ll use ur script right now... thx!!!

Very cool script. Clean and simple...

Jakob Stoeck

April 16, 2005 @ 7:58 PM

That's nice. Didn't know that something like this works across the major browser.

It works not just for images like someone mentioned here before. I use it to fade in <h1>'s. Unfortunately the browser first displays them fully, then nothing and then begins to fade them in, but you can avoid this if you set h1 to opacity:0 in your Stylesheet.

Here's the code I use:

--the main file--
<body onload="opacity('heading', 0, 100, 500)">
...
<h1 id="heading">...</h1>

--the stylesheet--
h1 { /* avoids flickering at the beginning */
filter: alpha(opacity=0);
-moz-opacity: 0;
opacity: 0;
}

One Downside is, if there's no JS-Support, you can't see the <h1>, well.. nobody's perfect.

P.S.: You don't need -khtml-opacity: 0.5; for Safari on OS X. It uses opacity: 0.5.

Jakob

April 16, 2005 @ 8:10 PM

Ha! Just solved the problem from above, where when there's no JS, there's no visible header:

Just enter
<noscript><style type="text/css">h1 {
filter: alpha(opacity=100);
-moz-opacity: 100;
opacity: 100;
}
</style></noscript>

in your file and everything is cool.
Of course there is a snag to it: It doesn't validate because <style> is a don't do in <noscript> tags.. well .. who cares?

Hi-- Thanks for all the work on this cool script. Very Cool!

Is it possible to combine the functions of this script with one that changes inline images?

to combine it with something like:
<script>
function changeImage(filename)
{
document.mainimage.src = filename;
}

</script>

<body>
<a href="java script:changeImage('myimage.jpg')">

<body>

What I am thinking is having a gallery where the user clicks thumbnails and the full size inline images fades in, is this possible?

thanks

Excellent script and works fine in this form when clicking a link to fade the image. I wonder if there is any way to make images fade-in when the body loads?

What if I want to get rid of the space, when the img is hidden? I tried to set the style to:

document.getElementById(id).style.display = "none";

However the image disappears and doesnt really show the effect then.

Can you suggest a solution?

Thanks

How would you get this script to work on a table background image? because the id relates the the entire table cell not just the background image and therefore everything gets hidden.

also how could it be set to work on a timer, not a button.

Thanks for your time.
Mark

hey!

just wanted to say thanks for the script, used it for the menu for my portfolio. i have an image in one frame and a menu in another. the idea is that another image fades in when one onmouseovers a menu item and fades back to the previous one on onmouseout. works like a charm.

only thing, found that in mozilla the previous image likes to give off a short flash just before the fading is complete. don't know if firefox is slower in changing between the bgimage and the front image, but thought you might wanna know.

thanks again for a great script!

To make this a fully accessible/standards compliant script one needs to set up a function that hides all elements of a certain name...that way if the user has no java script, the items arent hidden from view and the content is accessible.

I suck at java script so i have no idea how to do this...but this would make it a "safe" crossbrowser, accessible script.

Good News!

I Added a fuynction that works to set initial elements to a certain opacity, so that if someone has java script disabled...they can still access the site without fades etc.

It is set up so that whatever tag you assign a class of hide i.e.

<div class="hide"></div>

It will set the opacity variables to a given number, in this case xero.

Now it is truly accessible!

onload = function hide() {
var e, i = 0;
while (e = document.getElementsByTagName ('*')[i++]) {

if (/bhideb/.test (e.className)) {
e.style.opacity = 0;
e.style.MozOpacity = 0;
e.style.KhtmlOpacity = 0;
e.style.filter = "alpha(0)";
}
}
}

Well... I found your script through a link provided on a forum; I can't say anything else other than "Great Job!"

The best fade script I've "ever" seen--honestly, putting java script.internet.com and others to shame (sorry dynamicdrive.com and dhtml.com, etc)

...

Hey dude, i noticed in Firefox that your fades flicker (when fading in) at the end. You can fix this by doing the following (saw this on a blog):

div.style.opacity = opacity/101;

Don't use opacity/100! For some reason if you go from 99 to 100 in firefox you flicker. You want it to get to .999999 but not 1.0.

And BTW dude... awesome site!

SU

November 21, 2005 @ 6:56 AM

Great script. And while I agree that most of Scriptaculous is overkill, the event queue is extremely valuable. <a href="http://couloir.org/js_slideshow/">Here's a slideshow</a> I put together using Prototype and Scriptaculous. It may be a bit buggy on IE/Windows -- haven't had a chance to test it there this weekend.

Awesome script. Thanks for making it public!

This script works great!

Still I found an error in IE6. After crossfading images there seems to be some number of pixels which still are transparent. (The pixels are pixels from the first image before crossfading)

The problem is solved when clicking the same link to crossfade again. Is there a solution?
FireFox and K-Meleon are working correctly.

I understand it is not easy to recreate the problem. Is it possible to releod the image after crossfading? Or maybe to reset the Alpha?

Thanks!

The problem could be reproduced when the next color is used: #02050A

For example: Just take an image and draw (using PhotoShop) lines using the color #02050A. Run the script using the new drawn image.

You'll see the problem.

Thanks for the excellent script!
I grabbed Shom's code and tried to make a slideshow but the transitions look really, really bad where the images have different sizes.

So, I tried to make some adjustments so that divid *and* imageid alpha are changed at the same time. Here's the code I've changed:

function changeOpac(opacity, id, id2)
{
var object = document.getElementById(id).style;
object.opacity = (opacity / 101);
object.MozOpacity = (opacity / 101);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";

if (id2) {
opacity2=opacity

object = document.getElementById(id2).style;
object.opacity = (opacity2 / 101);
object.MozOpacity = (opacity2 / 101);
object.KhtmlOpacity = (opacity2 / 100);
object.filter = "alpha(opacity=" + opacity2 + ")";
}
}

in blendimage:
//fade in image
for(i = 0; i <= 100; i++)
{
setTimeout("changeOpac(" + i + ",'" + imageid + "','" + divid + "')",(timer * speed));
timer++;
}
}

Unfortunately, this doesn't work... maybe a <img> src doesn't support alpha? Anyone?

Ops... in the last comment
opacity2=opacity
should be:
opacity2=100-opacity
Still doesn't work, though :-|

Love this script, Just trying to use it to fade in a div(not just an image),So it's like show/hide of layers but with this cool fade effect.
Is this possible? Anyone doing it?