PDA

View Full Version : Fading Slideshow MooTools



telecarver1
05-08-2013, 04:37 PM
I'm trying to put a fading slideshow on my website using MooTools 1.2
Create a Simple Slideshow Using MooTools (http://davidwalsh.name/mootools-slideshow)

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: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;mar gin-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>

vansmith
05-08-2013, 05:00 PM
You don't include MooTools anywhere. ;)

telecarver1
05-08-2013, 08:04 PM
You don't include MooTools anywhere. ;)

Are you saying that MooTools is not worth using? If so, how do I put a fading slideshow in my index page?

Thanks!

vansmith
05-08-2013, 09:03 PM
No, I was saying that MooTools isn't included anywhere in your code. At no point do you reference the MooTools library.

telecarver1
05-08-2013, 09:39 PM
I'm sorry. I'm not very good at coding but the instructions on this page, Create a Simple Slideshow Using MooTools (http://davidwalsh.name/mootools-slideshow) didn't say anything about linking to a library.
I thought that the javascript and the CSS that are in the code I posted above were all that is needed.

vansmith
05-08-2013, 10:11 PM
That tutorial makes the assumption that you've linked to MooTools which is a terrible assumption to make.

Add the following to the head section of your page:
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>