javascript - jQuery Image Crossfade not working -
hello wrong our jquery image crossfade set-up!? http://tips.techmatemn.com/
html
<div class="hero-cycler"> <img class="active" alt="tips qualified client 1" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/hero-bk-1.jpg"> <img alt="tips qualified client 2" src="<?php bloginfo('stylesheet_directory'); ?>/assets/img/hero-bk-2.jpg"> </div> css
.hero-cycler{position:relative;} .hero-cycler img{position:absolute;z-index:1} .hero-cycler img.active{z-index:3} script
<script> // homepage client images function cycleimages(){ var $active = $('.hero-cycler .active'); var $next = ($active.next().length > 0) ? $active.next() : $('.hero-cycler img:first'); $next.css('z-index',2);//move next image pile $active.fadeout(1500,function(){//fade out top image $active.css('z-index',1).show().removeclass('active');//reset z-index , unhide image $next.css('z-index',3).addclass('active');//make next image top 1 }); } $(document).ready(function(){ // run every 7s setinterval('cycleimages()', 7000); }) </script> thanks!
change way call function. setinterval uses string parameter depreciated , not recommended. use standard method shown below correctly run function.
change setinterval('cycleimages()', 7000); setinterval(cycleimages, 7000);
full working copy generic filler images:
function cycleimages() { var $active = $('.hero-cycler .active'); var $next = ($active.next().length > 0) ? $active.next() : $('.hero-cycler img:first'); $next.css('z-index', 2); //move next image pile $active.fadeout(1500, function() { //fade out top image $active.css('z-index', 1).show().removeclass('active'); //reset z-index , unhide image $next.css('z-index', 3).addclass('active'); //make next image top 1 }); } $(document).ready(function() { // run every 7s setinterval(cycleimages, 7000); }).hero-cycler { position: relative; } .hero-cycler img { position: absolute; z-index: 1 } .hero-cycler img.active { z-index: 3 }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hero-cycler"> <img class="active" alt="tips qualified client 1" src="https://unsplash.it/300/200/?image=0"> <img alt="tips qualified client 2" src="https://unsplash.it/300/200/?image=1"> </div>(a quick check of browser console have shown error: uncaught referenceerror: cycleimages not defined have been helpful include in question)
Comments
Post a Comment