Results 1 to 6 of 6
  1. #1


    Member Since
    May 21, 2009
    Posts
    17
    Fading Slideshow MooTools
    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>

  2. #2

    vansmith's Avatar
    Member Since
    Oct 19, 2008
    Location
    Toronto
    Posts
    19,782
    Specs:
    2012 13" MBP (2.5 i5, 8GB)
    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

  3. #3


    Member Since
    May 21, 2009
    Posts
    17
    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!

  4. #4

    vansmith's Avatar
    Member Since
    Oct 19, 2008
    Location
    Toronto
    Posts
    19,782
    Specs:
    2012 13" MBP (2.5 i5, 8GB)
    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

  5. #5


    Member Since
    May 21, 2009
    Posts
    17
    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.

  6. #6

    vansmith's Avatar
    Member Since
    Oct 19, 2008
    Location
    Toronto
    Posts
    19,782
    Specs:
    2012 13" MBP (2.5 i5, 8GB)
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. How to convert iPhoto slideshow to a flash slideshow? HELP!!
    By eagg1269 in forum Images, Graphic Design, and Digital Photography
    Replies: 2
    Last Post: 10-21-2009, 09:13 PM
  2. Mouse Fading
    By elilyon in forum OS X - Operating System
    Replies: 1
    Last Post: 02-07-2009, 05:53 PM
  3. Monitor Fading
    By brownlj in forum Apple Desktops
    Replies: 1
    Last Post: 10-13-2008, 02:07 PM
  4. fading songs into each other
    By claire123 in forum iPod Hardware and Accessories
    Replies: 2
    Last Post: 05-22-2008, 07:56 PM
  5. Cropping/Fading
    By cornelius in forum Images, Graphic Design, and Digital Photography
    Replies: 1
    Last Post: 11-30-2005, 04:39 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •