Hello I need to a effect "FADE" in this code , But I can not Do you help me? <?php ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <?php cryout_meta_hook(); ?> <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" /> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php cryout_header_hook(); wp_head(); ?> </head> <body <?php body_class(); ?>> <?php cryout_body_hook(); ?> <div id="wrapper" class="hfeed"> <div id="topbar" ><div id="topbar-inner"> <?php cryout_topbar_hook(); ?> </div></div> <?php cryout_wrapper_hook(); ?> <div id="header-full"> <header id="header"> <?php cryout_masthead_hook(); ?> <div id="masthead"> <script language="JavaScript"> var i = 0; var path = new Array(); // LIST OF IMAGES path[0] = "fq1.jpg"; path[1] = "fq2.jpg"; path[2] = "fq3.jpg"; function swapImage() { document.slide.src = path; if(i < path.length - 1) i++; else i = 0; setTimeout("swapImage()",8000); } window.onload=swapImage; </script> <img height="180" name="slide" src="image_1.gif" width="1240" /> <div style="clear:both;"></div> </div><!-- #branding --> <nav id="access" role="navigation"> <?php cryout_access_hook();?> </nav><!-- #access --> </div><!-- #masthead --> </div><!-- #header-full --> <div style="clear:both;height:0;"> </div> <div id="main"> <?php cryout_main_hook(); ?> <div id="forbottom" > <?php cryout_forbottom_hook(); ?> <div style="clear:both;"> </div> <?php cryout_breadcrumbs_hook();?> Thank You
In order to have a fade that works, generally you have to have the images loaded FIRST -- all you're doing in this code is swapping the image directly, so there's no chance to trip scripttardery to do it, or to have CSS handle that. Of course the method you have there is also sleazing scripttardery into the markup when the script should be hooking the markup. (a subtle but important distinction)... but it's turdpress so you've got all sorts of broken outdated asshattery in there pissing on the markup from oribt. (not a fan) I'd gut the markup down to something like this: <div class="slideShow"> <img src="image_1.gif" alt="first Slide"> <img src="fq1.jpg" alt="second slide"> <img src="fq2.jpg" alt="third slide"> <img src="fq3.jpg" alt="fourth slide"> <!-- .slideShow --></div> Code (markup): I'd then be loading this script from an external file right before </body> (function(d){ // first a little helper function function eventAdd(e, event, handler) { if (e.addEventListener) e.addEventListener(event, handler, false); else this.attachEvent('on' + event, handler); } // then our functionality var slideShow = d.getElementById('slideShow'), images = slideShow.getElementsByTagName('img'), current = 0; function nextImage() { images[current].className = ''; current++; if (current >= images.length) current = 0; images[current].className = 'show'; } images[current].className = 'show'; eventAdd(window, 'load', function() { setInterval(nextImage, 8000); }); })(document); Code (markup): ... then have CSS provide the animation instead of scripting. #slideShow, #slideShow img { width:1240px; height:180px; } #slideShow { position:relative; } #slideShow img { position:absolute; top:0; left:0; z-index:1; opacity:0; filter:alpha(opacity=0); -webkit-transition:opacity 1s; transition:opacity 1s; } #slideShow img.show { z-index:256; opacity:1; filter:alpha(opacity=100); }]/code] Which of course you could then mix in all sorts of extra effects from the CSS. Notice I attach the event from the scripting instead of window.onload since **** knows what idiotic bekaptah asshattery turdpress might also be trying to load, which is why I wrapped the code in a self starting function so as to isolate its scope. Since it's basing off the markup you can add/remove img tags to the slideshow until blue in the face - WITHOUT having to change the scripting. Scripting off, currently only the first image would show if scripting is disabled but CSS is on. In a deployment environment I'd probably add a class to the outer wrapper to use as the hook for hide/show in the CSS instead of #slideShow. You can't do what you want by just swapping one tag's SRC attribute. Code (markup):
I mean that. Please fill you my code. Please send me the complete code. Please correct my code. <?php ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <?php cryout_meta_hook(); ?> <meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo( 'charset' ); ?>" /> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <?php cryout_header_hook(); wp_head(); ?> </head> <body <?php body_class(); ?>> <?php cryout_body_hook(); ?> <div id="wrapper" class="hfeed"> <div id="topbar" ><div id="topbar-inner"> <?php cryout_topbar_hook(); ?> </div></div> <?php cryout_wrapper_hook(); ?> <div id="header-full"> <header id="header"> <?php cryout_masthead_hook(); ?> <div id="masthead"> <script language="JavaScript"> var i = 0; var path = new Array(); // LIST OF IMAGES path[0] = "fq1.jpg"; path[1] = "fq2.jpg"; path[2] = "fq3.jpg"; function swapImage() { document.slide.src = path; if(i < path.length - 1) i++; else i = 0; setTimeout("swapImage()",8000); } window.onload=swapImage; </script> <img height="180" name="slide" src="image_1.gif" width="1240" /> <div style="clear:both;"></div> </div><!-- #branding --> <nav id="access" role="navigation"> <?php cryout_access_hook();?> </nav><!-- #access --> </div><!-- #masthead --> </div><!-- #header-full --> <div style="clear:both;height:0;"> </div> <div id="main"> <?php cryout_main_hook(); ?> <div id="forbottom" > <?php cryout_forbottom_hook(); ?> <div style="clear:both;"> </div> <?php cryout_breadcrumbs_hook();?>