Link to home
Start Free TrialLog in
Avatar of PhatFrogDev
PhatFrogDev

asked on

Crossfade from one iframe src to another automatically

I have a display that runs ads on it. I want to have the ads crossfade to the next ad smoothly. Preferably without showing the background before the next source page loads. These ads are static images, static HTML, videos, animated HTML 5, or a combination thereof. All of the content lives on the local computer, so everything loads fast. That said, the solution I've put together isn't quite complete. The static pages load fast enough to prevent the background from showing briefly, but any page that has animation or video, seems to load a bit slower, so the background becomes visible for a split second, before the page loads.

I need the crossfade for a smoother transition, without the flash of background, and I need to be able to use variable runtimes for each ad, as not all ads are the same length.

Here's what I have at the moment:

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Ad Test 02</title>

<style type="text/css">
html {
	margin: 0px;
	background: #000000; /* black minimizes the "shock" of the background flash */
}
body {
	margin: 0px;
	overflow: hidden;
}
</style>

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

<script type="text/javascript">

      $(window).load(function(){
        var ads = ["assets/ads/testad01/default.htm", 
        		   "assets/ads/testad02/default.htm", 
        		   "assets/ads/testad03/default.htm"];
        			  
        var len = ads.length;
        
        var iframe = $('#adframe');
        var i = 0;
        setInterval(function () {
            $(iframe).attr('src', ads[++i % len]);
        }, 16000);
      });
</script>

</head>
<body>

<iframe src="" id="adframe" style="width: 1360px; height: 768px; border: 0px;"></iframe>

</body>
</html>

Open in new window

Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

If all you need jQuery for is loading the ads, I suggest you try this:

http://stackoverflow.com/questions/867272/can-we-do-fade-in-and-fade-out-in-iframes
Avatar of PhatFrogDev
PhatFrogDev

ASKER

Yes. I saw that in my exhaustive search for an answer before I posted here.

Let me better explain my problem. These ads are sometimes animated HTML 5 files or videos. That said, if I just have a long list of separate iframes hidden in the page, and fade from one to another, the animations or videos run once, then stop. So, when that iframe comes around again, the video or animation does not start, but sits at it's completed state. Even worse, doing it that way, sometimes there's no trigger to make the video or animation start to begin with.

However, using my example above forces the animation or video to start at the beginning every time.

My issue here is not rotating iframe source. I have done that. My issue is to set a variable run time or delay for each of the ads, have a nice crossfade transition between ads, and to eliminate the brief flash of background before each video or animation.

Perhaps I'm misunderstanding your answer...
No, that was what I meant.

And if you do

setInterval(function () {
  if (i>0) $(iframe).fadeOut();
  $(iframe).attr('src', ads[++i % len]).fadeIn();
}, 16000);
Ah, now I see. I tried your code, and it does the fade, but flashes on the next slide real quick, then seems to reload and do the fade. Any idea why this is happening?
No.  Do you have an example?
Sure. The first cycle, there's no fading at all. I guess that's because it's loading the animation and images into cache. I'm OK with that, because I would be testing this many times before it actually made it to production, so everything would be preloaded at that point. Unless you have a more elegant solution for that. After the first run, you'll see the behavior I referred to.

http://www.phatfrog.com/adtest/

I'm running this in IE 9, and cannot use a different browser.

Thanks for your help...
Failed to loade resource

http://www.phatfrog.com/adtest/ads/adtest01/default.htm

I get
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
	<title>Untitled</title>
<!--Adobe Edge Runtime-->
    <script type="text/javascript" charset="utf-8" src="default.htm_edgePreload.js"></script>
    <style>
        .edgeLoad-EDGE-14905053 { visibility:hidden; }
    </style>
<!--Adobe Edge Runtime End-->

</head>
<body style="margin:0;padding:0;">
	<div id="Stage" class="EDGE-14905053">
	</div>
</body>
</html>

Open in new window


as iframe contents
That page is an HTML 5 animation. If your browser doesn't support it, that might be the problem. It loads for me perfectly in IE 9.

That said, if it would be better for you, I can replace it with a video.
My server did go down for a short period this afternoon. Maybe that was the problem...
Ok, I'll look in ie9 later. I am iOS and OSX at home exclusively
I just tested it in Safari, and it does run. The animation is a little slow, but it runs.
Ah, I see it in IE9

try

setInterval(function () {
  if (i>0) $(iframe).fadeOut(function() {
    $(iframe).attr('src', ads[++i % len]).fadeIn();
  });
}, 16000);

then try


setInterval(function () {
  if (i>0) $(iframe).fadeOut();
  $(iframe).attr('src', ads[++i % len]).load(function() {
    $(iframe).fadeIn();
  })
}, 16000);
The first example doesn't work at all. The second example produces the same result as the original code.
ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial