condoravenue Posted September 10, 2011 Share Posted September 10, 2011 I have one slideshow that goes through images only: <!doctype HTML> <html> <head> <style> .fadein { position:relative; height:332px; width:500px; top: 140px; margin: auto;} .fadein img { position:absolute; left:0; top:0; height:332px; width:500px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> delay = 1500; $(function(){$('.fadein img').hide(); $('.fadein :first-child').fadeIn(function(){slide_show();});}); function slide_show(){ $('.fadein :first-child').delay(delay).fadeOut().appendTo('.fadein'); $('.fadein :nth-child(1)').delay(delay).fadeIn(function () {slide_show();}); } </script> </head> <body> <div class="fadein"> <img src="http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg"> <img src="http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg"> <img src="http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg"> </div> </body> </html> But I tried to make it work with div's instead of images: <!doctype HTML> <html> <head> <style> .fadein { position:relative; height:332px; width:800px; top: 140px; margin: auto;} .fadein div { position:absolute; left:0; top:0; height:332px; width:800px; text-align: right; background-repeat: no-repeat;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> delay = 2500; $(function(){$('.fadein div').hide(); $('.fadein :first-child').fadeIn(function(){slide_show();});}); function slide_show(){ $('.fadein :first-child').delay(delay).fadeOut().appendTo('.fadein'); $('.fadein :nth-child(1)').delay(delay).fadeIn(function () {slide_show();}); } </script> </head> <body> <div class="fadein"> <div class = "slide" style = "background-image: url('http://farm3.static.flickr.com/2610/4148988872_990b6da667.jpg');"><h1>One Heading</h1><p>some extra text.</p></div> <div class = "slide" style = "background-image: url('http://farm3.static.flickr.com/2597/4121218611_040cd7b3f2.jpg');"><h1>Two Heading</h1></div> <div class = "slide" style = "background-image: url('http://farm3.static.flickr.com/2531/4121218751_ac8bf49d5d.jpg');"><h1>Three Heading</h1></div> </div> </body> </html> This second code doesn't work. It works without the <h1> tags in each div. How can I make this work? Thanks Link to comment https://forums.phpfreaks.com/topic/246841-jquery-slidshow-help/ Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.