- Joined
- May 21, 2009
- Messages
- 17
- Reaction score
- 0
- Points
- 1
I'm trying to put a fading slideshow on my website using MooTools 1.2
Create a Simple Slideshow Using MooTools
I can't get it to work. Can anyone tell me what I'm doing wrong? Thank you!
Here's the code:
<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
uto; leftuto; toputo; position:relative; float:none; margin-leftuto; margin-rightuto; display:block; color:#F3A424; " >
<div style="width:1040px;min-height:inherit;height:2000px;position:relative;margin-leftuto;margin-rightuto;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-leftuto; margin-rightuto; 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; positionbsolute; 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 > 0) {
img.set('opacity',0);
}
});
/* worker */
var show = function() {
images[currentIndex].fade('out');
images[currentIndex = currentIndex < 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>
Create a Simple Slideshow Using MooTools
I can't get it to work. Can anyone tell me what I'm doing wrong? Thank you!
Here's the code:
<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
uto; leftuto; toputo; position:relative; float:none; margin-leftuto; margin-rightuto; display:block; color:#F3A424; " ><div style="width:1040px;min-height:inherit;height:2000px;position:relative;margin-left
uto;margin-rightuto;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-leftuto; margin-rightuto; 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
bsolute; 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 > 0) {
img.set('opacity',0);
}
});
/* worker */
var show = function() {
images[currentIndex].fade('out');
images[currentIndex = currentIndex < 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>
