Loading...
 
Skip to main content

Themes

Forum List Topic List

 
Thread actions
Print this page
  • Print all pages

    • Cant get JavaScript to show

    Posted by Ravi

    Hey Guys i cant get some java script code to work. I want to display it on my site but it doesn't work.















    .carousel-component {
    padding:8px 16px 4px 16px;
    margin:0px;
    background-color:#ffffff;
    }

    .carousel-component .carousel-list li {
    margin:4px;
    width:570px; /* img width is 75 px from flickr + a.border-left (1) + a.border-right(1) +
    img.border-left (1) + img.border-right (1)*/
    height:350px; /* image + row of text (87) + border-top (1) + border-bottom(1) + margin-bottom(4) */
    /* margin-left: auto;*/ /* for testing IE auto issue */
    }

    .carousel-component .carousel-list li a {
    display:block;
    border:1px solid #e2edfa;
    outline:none;
    }

    .carousel-component .carousel-list li a:hover {
    border: 1px solid #aaaaaa;
    }

    .carousel-component .carousel-list li img {
    border:1px solid #999;
    display:block;
    }

    .carousel-component .carousel-prev {
    position:absolute;
    top:600px;
    z-index:3;
    cursor:pointer;
    left:5px;
    }

    .carousel-component .carousel-next {
    position:absolute;
    top:600px;
    z-index:3;
    cursor:pointer;
    right:5px;
    }

    Image
    Copy to clipboard
    {JS(file=http://www.playboxed.org/ajax/carousel.js)}

var handlePrevButtonState = function(type, args) {

    var enabling = args[0];
    var leftImage = args[1];
    if(enabling) {
        leftImage.src = "images/left-enabled.gif";   
    } else {
        leftImage.src = "images/left-disabled.gif";   
    }

};

/**
 * Custom button state handler for enabling/disabling button state.
 * Called when the carousel has determined that the next button
 * state should be changed.
 * Specified to the carousel as the configuration
 * parameter: nextButtonStateHandler
 **/
var handleNextButtonState = function(type, args) {

    var enabling = args[0];
    var rightImage = args[1]; 
    if(enabling) {
        rightImage.src = "images/right-enabled.gif";
    } else {
        rightImage.src = "images/right-disabled.gif";
    }
   
};


/**
 * You must create the carousel after the page is loaded since it is
 * dependent on an HTML element (in this case 'mycarousel'.) See the
 * HTML code below.
 **/
var carousel; // for ease of debugging; globals generally not a good idea
var pageLoad = function()
{
    carousel = new YAHOO.extension.Carousel("slider",
        {
            numVisible:        1,
            animationSpeed:    1,
            scrollInc:         1,
        autoPlay:           4000,
            navMargin:         20,
            prevElement:     "prev-arrow",
            nextElement:     "next-arrow",
            size:              6,
            wrap:             true,
            prevButtonStateHandler:   handlePrevButtonState,
            nextButtonStateHandler:   handleNextButtonState
        }
    );

};

/**
 * Illustrates start autoplay
 */
var startAutoPlay = function(e) {
    YAHOO.util.Dom.get("status").innerHTML = "Auto Play Started!";
    carousel.startAutoPlay(2000);
};

YAHOO.util.Event.addListener(window, 'load', pageLoad);


startAutoPlay(interval)

{JS}










    
        
       
    
    
        
    
    
        
           
# One
# Two
# Three
# Four
# Five
# Six


    To see all the code and see the desired effect of the code please see here www.playboxed.org/ajax/carousel.htmlQuestion

    please help.

    Reads: 2366

    Posted by Gary Cunningham-Lee Japan

    I added icarousel to a Tiki site, but added the script to a template file (tiki-show_page.tpl IIRC) rather than trying to put it in a wiki page. Also don't forget there are links to the .js files that have to be added to the head section of header.tpl. I think a wikiplugin for icarousel would be cool and would save a lot of time and effort for users, and maybe that'll come eventually now that mootools is part of Tiki 1.10.

    -- Gary