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"]]

result

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License