dianikol85 0 Posted September 18, 2010 Report Share Posted September 18, 2010 (edited) Hi to all, I am trying to build from scratch an image cross fade slideshow but i stack ... here is my html code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="gallery.js"></script> <style type="text/css"> #wrapper { width: 800px; height: 600px; margin: 0 auto; position: relative; } #wrapper .images{ position: absolute } </style> </head> <body> <div id="wrapper"> <div class="images" style="width:600px; height:400px;"> <img src="image1.jpg" /> </div> <div class="images" style="width:600px; height:400px;"> <img src="image2.jpg" /> </div> <div class="images" style="width:600px; height:400px;"> <img src="image3.jpg" /> </div> </div> </body> </html> and here my jquery code gallery.js $(document).ready(function() { var counter = $("#wrapper div.images").length; $("#wrapper .images:first").addClass('first'); $("#wrapper .images:last").addClass('last'); $("#wrapper .images:not(:first)").hide(); cur = $("#wrapper .images:first"); setInterval('Forward()',3000); }); function Forward() { cur.fadeOut( 700 ); if ( cur.hasClass('class') == "last" ) cur = $("#wrapper .images:first"); else cur = cur.next(); cur.fadeIn( 700 ); } i add in the first div a class named "first" and in the last one a class named "last". So I check if the current div has a class "last" ake the cur variable point to the div with the class "first" in order to succed the slideshow effect. I will add buttos and stuff later... I use the .hasClass() jquery function ofcourse to check the current class but it seems something is wrong, Any advices?? Thanks nurds Edited September 18, 2010 by dianikol85 Quote Link to post Share on other sites
BeeDev 2 Posted September 20, 2010 Report Share Posted September 20, 2010 (edited) if ( cur.hasClass('last') ) cur = $("#wrapper .images:first"); else cur = cur.next(); cur.fadeIn( 700 ); or if ( cur.attr('class').indexOf("last") != -1 ) cur = $("#wrapper .images:first"); else cur = cur.next(); cur.fadeIn( 700 ); .hasClass('className') function returns true or false only. Edited September 20, 2010 by BeeDev Quote Link to post Share on other sites
dianikol85 0 Posted September 22, 2010 Author Report Share Posted September 22, 2010 I just finish it. So take a look and tell me your opinion if you like i didn't use the .hasClass(), Next time i guess Quote Link to post Share on other sites
dianikol85 0 Posted September 22, 2010 Author Report Share Posted September 22, 2010 That;s it fade_gallery.zip Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.