JQuery
JQuery Slideshow
The following JQuery Slideshow uses code from http://jonraasch.com/blog/a-simple-jquery-slideshow and an html code/block/iframe combination.
This page has the jquery-1.2.6.min.js file uploaded to it which is required to get jquery to work.
codeblock
<html> <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/> <title>Simple jQuery Slideshow from JonRaasch.com</title> <script type="text/javascript" src="http://www.fossoway.org/local--files/jquery/jquery-1.2.6.min.js"></script> <script type="text/javascript"> 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'); $active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); } $(function() { var $images =[ "<img src='http://www.fossoway.org/local--files/gallery:zoom/heron_rc.jpg' alt='Heron' class='active' />", "<img src='http://www.fossoway.org/local--files/gallery:zoom/butterfly_rc.jpg' alt='Butterfly' />", "<img src='http://www.fossoway.org/local--files/gallery:zoom/crowfoot_rc.jpg' alt='Crowfoot' />", "<img src='http://www.fossoway.org/local--files/gallery:zoom/dragonfly_rc.jpg' alt='Dragonfly' />", "<img src='http://www.fossoway.org/local--files/gallery:zoom/grasshopper_rc.jpg' alt='Grasshopper' />", "<img src='http://www.fossoway.org/local--files/gallery:zoom/bluebells_rc.jpg' alt='Bluebells' />"]; $div = $("<div />"); $div.attr("id","slideshow"); var $str = "" $.each($images,function(){ $str = $str + this; }); $div.append($str); $(".my_slide").append($div); setInterval( "slideSwitch()", 5000 ); }); </script> <style type="text/css"> /*** set the width and height to match your images **/ <!--[if IE]> #slideshow { left: -10px; position:relative; } <![endif]--> #slideshow { left: -8px; position:relative; top: -8px; } #slideshow IMG { left:0; opacity:0.0; position:absolute; top:0; z-index:8; } #slideshow IMG.active { opacity:1.0; z-index:10; } #slideshow IMG.last-active { z-index:9;n } </style> </head> <body> <div class="my_slide"> </div> </body> </html>
iframe
then the iframe referencing the codeblock above:
[[iframe http://www.fossoway.org/jquery/code/1 width="250px" height="240px" scrolling="no" frameborder="0"]]
