(old) Image Rotator

Version 4

    A long while ago I had found this starter idea for an image rotator that is "self contained" and can be put straight into an HTML widget. After we found a starting idea, we modified it a bit just to simplify. We've built some really neat galleries from this starter code that are designed really nice.

     

    <html><head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <title></title>
    
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.js"></script>
      <style type="text/css">
      body {margin:0px;padding:0px; }
      #rstart {position: relative;z-index: 0; }
      #rbuttons {margin:0 auto; z-index: 999;position: relative;text-align: center;padding-top: 290px;cursor: pointer;}
      </style>
    
    <script type="text/javascript">//<![CDATA[
    $(window).load(function(){$(function(){function e(){$("#rstart img").first().fadeOut().appendTo($("#rstart"));$("#rstart img").first().fadeIn()}function t(){$("#rstart img").first().fadeOut();$("#rstart img").last().prependTo($("#rstart")).fadeIn()}$("#rstart img:not(:first)").hide();$("#rstart img").css("position","absolute");$("#rstart img").css("top","0px");$("#rstart img").css("left","50%");$("#rstart img").each(function(){var e=$(this);$("<img>").attr("src",$(this).attr("src")).load(function(){e.css("margin-left",-this.width/2+"px")})});$("#rstart, #next").click(function(){e()});$("#prev").click(function(){t()})})})//]]>
    </script>
    
    
    </head>
    <body>
    <div id="rfull">
      <div id="rstart">
         <img src="01.jpg" style="display: inline; position: absolute; top: 0px; left: 50%; margin-left: -200px;">
         <img src="02.jpg" style="display: none; position: absolute; top: 0px; left: 50%; margin-left: -175px;">
      <img src="03.jpg" style="position: absolute; top: 0px; left: 50%; margin-left: -300px; display: none;">
      <img src="04.jpg" style="display: none; position: absolute; top: 0px; left: 50%; margin-left: -100px;">
      <img src="05.jpg" style="display: none; position: absolute; top: 0px; left: 50%; margin-left: -50px;">
      </div><!--closing #rfull -->
      <div id="rbuttons"><span id="prev">Prev</span> | <span id="next">Next<span></div>
    </div><!--closing #rfull -->
    </body></html>
    
    
    
    
    
    

     

    If I can find the original jquery I will do that for those who want to see the 'clean' version. You can also see a demo at: http://randomlyopen.com/demo/gallery.html