Skip to content

Instantly share code, notes, and snippets.

@telecarver
Created May 8, 2013 19:10
Show Gist options
  • Save telecarver/817ad512b60e1b0d84ed to your computer and use it in GitHub Desktop.
Save telecarver/817ad512b60e1b0d84ed to your computer and use it in GitHub Desktop.
MooTools 1.2 test that doesn't work
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<meta name="author" content="Flux User" >
<meta name="description" content="My Website" >
<meta name="keywords" content="Flux, Mac" >
<link href="main.css" rel="stylesheet" media="screen" type="text/css" >
<title>My Webpage</title>
</head>
<body style="background-image:inherit; background-color:#000000; width:auto; left:auto; top:auto; position:relative; float:none; margin-left:auto; margin-right:auto; display:block; color:#F3A424; " >
<div style="width:1040px;min-height:inherit;height:2000px;position:relative;margin-left:auto;margin-right:auto;display:block;left:0;float:inherit;font-family:inherit;font:inherit;right:-3px;top:-3px;border-left:1px solid #F3A424;border-right:1px solid #F3A424;border-top:1px solid #F3A424;border-bottom:1px solid #000000" ><div style="background-image:url('file:///aMyDoc/Ramsey\'sWebpage/Modified%20GoLive/Flux%20Test/flux-test/images/CarvedLogo_.jpg'); height:121px; width:184px; position:relative; float:none; margin-left:auto; margin-right:auto; display:block; left:-10px; top:9px; " ></div><div style="position:relative; font:inherit; letter-spacing:2px; color:#F3A424; font-size:40pt; width:241px; left:125px; top:-109px; height:71px; " ><i>Fine Art</i><i></i></div><div style="position:relative; width:382px; font:inherit; font-size:40pt; height:79px; left:647px; top:-180px; " ><i>Woodcarving</i></div>
<div id="slideshow-container" style="top:-120px;left:510px">
<img src="images/Slideshow/CarvedDoor01.jpg" alt="" />
<img src="images/Slideshow/CarvedDoor02.jpg" alt="" />
<img src="images/Slideshow/CarvedDoor03.jpg" alt="" />
<img src=="images/Slideshow/CarvedDoor04.jpg" alt="" />
<img src=="images/Slideshow/CarvedDoor05.jpg" alt="" />
</div>
<script class="css">
#slideshow-container { width:373px; height:412px; position:relative; }
#slideshow-container img { display:block; position:absolute; top:0; left:0; z-index:1; }
</script>
<script class="js">
window.addEvent('domready',function() {
/* settings */
var showDuration = 3000;
var container = $('slideshow-container');
var images = container.getElements('img');
var currentIndex = 0;
var interval;
/* opacity and fade */
images.each(function(img,i){
if(i &gt; 0) {
img.set('opacity',0);
}
});
/* worker */
var show = function() {
images[currentIndex].fade('out');
images[currentIndex = currentIndex &lt; images.length - 1 ? currentIndex+1 : 0].fade('in');
};
/* start once the page is finished loading */
window.addEvent('load',function(){
interval = show.periodical(showDuration);
});
});
</script>
</div></div></div></div></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment