dianikol85 Posted September 18, 2010 Report 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
BeeDev Posted September 20, 2010 Report 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
dianikol85 Posted September 22, 2010 Author Report 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
dianikol85 Posted September 22, 2010 Author Report Posted September 22, 2010 That;s it fade_gallery.zip
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now