New To Mac-Forums?

Welcome to our community! Join the discussion today by registering your FREE account. If you have any problems with the registration process, please contact us!

Get your questions answered by community gurus Advice and insight from world-class Apple enthusiasts Exclusive access to members-only contests, giveaways and deals

Join today!

 
Start a Discussion
 

Mac-Forums Brief

Subscribe to Mac-Forums Brief to receive special offers from Mac-Forums partners and sponsors

Join the conversation RSS
Web Design and Hosting Creating sites, scripting, and hosting discussions.

Fading Slideshow MooTools


Post Reply New Thread Subscribe

 
Thread Tools
telecarver1

 
Member Since: May 21, 2009
Posts: 17
telecarver1 is on a distinguished road

telecarver1 is offline
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: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>
QUOTE Thanks
vansmith

 
vansmith's Avatar
 
Member Since: Oct 19, 2008
Location: Toronto
Posts: 18,352
vansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond repute
Mac Specs: 2012 13" MBP (2.5 i5, 8GB)

vansmith is offline
You don't include MooTools anywhere.

Important Links: Community Guidelines : Use the reputation system if you've been helped.
M-F Blog :: Write for the blog
Writing a Quality Post
QUOTE Thanks
telecarver1

 
Member Since: May 21, 2009
Posts: 17
telecarver1 is on a distinguished road

telecarver1 is offline
Quote:
Originally Posted by vansmith View Post
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!
QUOTE Thanks
vansmith

 
vansmith's Avatar
 
Member Since: Oct 19, 2008
Location: Toronto
Posts: 18,352
vansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond repute
Mac Specs: 2012 13" MBP (2.5 i5, 8GB)

vansmith is offline
No, I was saying that MooTools isn't included anywhere in your code. At no point do you reference the MooTools library.

Important Links: Community Guidelines : Use the reputation system if you've been helped.
M-F Blog :: Write for the blog
Writing a Quality Post
QUOTE Thanks
telecarver1

 
Member Since: May 21, 2009
Posts: 17
telecarver1 is on a distinguished road

telecarver1 is offline
I'm sorry. I'm not very good at coding but the instructions on this page, Create a Simple Slideshow Using MooTools 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.
QUOTE Thanks
vansmith

 
vansmith's Avatar
 
Member Since: Oct 19, 2008
Location: Toronto
Posts: 18,352
vansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond reputevansmith has a reputation beyond repute
Mac Specs: 2012 13" MBP (2.5 i5, 8GB)

vansmith is offline
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:
Code:
<script src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>

Important Links: Community Guidelines : Use the reputation system if you've been helped.
M-F Blog :: Write for the blog
Writing a Quality Post
QUOTE Thanks

Post Reply New Thread Subscribe


« Attempting to set up Filezilla | Adding music to web page? »
Thread Tools

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off
Forum Jump

Similar Threads
Thread
Thread Starter
Forum
Replies
Last Post
Keynote Slideshow Preview Problem schwine1 OS X - Apps and Games 0 06-10-2010 05:06 PM
making A DVd Auto-Start in iDVD/ iMovie RPM Movies and Video 7 10-19-2008 12:49 PM
Question about uploading a slideshow to the web photo_guy74 OS X - Apps and Games 0 09-03-2008 08:57 AM
iPhoto slideshow Dixon Deeper OS X - Apps and Games 4 03-13-2007 02:59 PM
Slideshow w/ iLife'05 rufmanj Movies and Video 0 02-23-2006 04:22 PM

All times are GMT -4. The time now is 04:24 PM.

Powered by vBulletin
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
X

Welcome to Mac-Forums.com

Create your username to jump into the discussion!

New members like you have made this community the ultimate source for your Mac since 2003!


(4 digit year)

Already a member?