Hi group, I am new to jQuery. I see a lot of examples out there that show you how to make a banner slide show. They work great, but how do I read images from a specific folder?
The way I have my images structured for the banner is by season. So, I have a group of photos in a folder labeled Winter and one for Spring...etc. So, how do I get the current season (using jQuery) and all images in a given folder (using jQuery). This would replace the HTML div tag section below. Here is an example script for just the slide show: http://jonraasch.com/blog/a-simple-jquery-slideshow HTML: <div id="slideshow"> <img src="img/img1.jpg" alt="" class="active" /> <img src="img/img2.jpg" alt="" /> <img src="img/img3.jpg" alt="" /> </div> STYLE: #slideshow { position:relative; height:350px; } #slideshow IMG { position:absolute; top:0; left:0; z-index:8; } #slideshow IMG.active { z-index:10; } #slideshow IMG.last-active { z-index:9; } jQuery: function slideSwitch() { var $active = $('#slideshow IMG.active'); if ( $active.length == 0 ) $active = $('#slideshow IMG:last'); // use this to pull the images in the order they appear in the markup var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first'); // uncomment the 3 lines below to pull the images in random order // var $sibs = $active.siblings(); // var rndNum = Math.floor(Math.random() * $sibs.length ); // var $next = $( $sibs[ rndNum ] ); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { setInterval( "slideSwitch()", 5000 ); });