Grow your CSS skills. Land your dream job.

YUI Library 3.0.0 – wordpress integration – HOW?

  • # March 18, 2010 at 2:34 pm

    I am using the script below for 3 pictures and 3 dots to cycle through an animation – the pictures fade in and fade out.

    My problem is that the script works when I am using html.css/javascript(via YUI Library), but when I convert my site into a wordpress site the script does not work. I do not have anything in my functions.php file; possibly something here?

    Do you know how this works? PLEASE HELP

    Script is as follows:

    <script type="text/javascript" src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script&gt;

    <script>
    YUI({combine: true, timeout: 10000}).use("anim", function(Y) {

    var feature = 0;
    var cycle = setInterval(function() { nextFeature() }, 6000);
    var tauto = 6000;
    var tclick = 12000;

    function fadeFeature(feature, opacity) {

    if (Y.UA.ie) {

    if (opacity==1) {
    Y.get(feature).setStyle(‘display’, ‘block’);
    } else if(opacity==0) {
    Y.get(feature).setStyle(‘display’, ‘none’);
    }

    } else {

    if (opacity==1) {
    Y.get(feature).setStyle(‘opacity’, 0);
    Y.get(feature).setStyle(‘display’, ‘block’);
    }

    var anim = new Y.Anim({
    node: feature,
    to: { opacity: opacity },
    duration:0.5
    });

    anim.on("end", function(e) {
    if(opacity==0 && anim.running==false)
    Y.get(feature).setStyle(‘display’, ‘none’);
    });

    anim.run();
    }
    }

    function showFeature(n, t) {
    clearInterval(cycle);
    cycle = setInterval(function() { nextFeature() }, t);
    switch (n) {
    case 0:
    Y.get(‘#dot1′).addClass(‘selected’);
    Y.get(‘#dot2′).removeClass(‘selected’);
    Y.get(‘#dot3′).removeClass(‘selected’);
    fadeFeature(‘#feature1′,1);
    fadeFeature(‘#feat1img’,1);
    fadeFeature(‘#feat1button’,1);
    fadeFeature(‘#feature2′,0);
    fadeFeature(‘#feat2img’,0);
    fadeFeature(‘#feat2button’,0);
    fadeFeature(‘#feature3′,0);
    fadeFeature(‘#feat3img’,0);
    fadeFeature(‘#feat3button’,0);
    break;
    case 1:
    Y.get(‘#dot1′).removeClass(‘selected’);
    Y.get(‘#dot2′).addClass(‘selected’);
    Y.get(‘#dot3′).removeClass(‘selected’);
    fadeFeature(‘#feature1′,0);
    fadeFeature(‘#feat1img’,0);
    fadeFeature(‘#feat1button’,0);
    fadeFeature(‘#feature2′,1);
    fadeFeature(‘#feat2img’,1);
    fadeFeature(‘#feat2button’,1);
    fadeFeature(‘#feature3′,0);
    fadeFeature(‘#feat3img’,0);
    fadeFeature(‘#feat3button’,0);
    break;
    case 2:
    Y.get(‘#dot1′).removeClass(‘selected’);
    Y.get(‘#dot2′).removeClass(‘selected’);
    Y.get(‘#dot3′).addClass(‘selected’);
    fadeFeature(‘#feature1′,0);
    fadeFeature(‘#feat1img’,0);
    fadeFeature(‘#feat1button’,0);
    fadeFeature(‘#feature2′,0);
    fadeFeature(‘#feat2img’,0);
    fadeFeature(‘#feat2button’,0);
    fadeFeature(‘#feature3′,1);
    fadeFeature(‘#feat3img’,1);
    fadeFeature(‘#feat3button’,1);
    break;
    }
    }

    Y.get(‘#dot1′).on(‘click’, function(e) {
    e.preventDefault();
    feature = 0;
    showFeature(0,tclick);
    });

    Y.get(‘#dot2′).on(‘click’, function(e) {
    e.preventDefault();
    feature = 1;
    showFeature(1,tclick);
    });

    Y.get(‘#dot3′).on(‘click’, function(e) {
    e.preventDefault();
    feature = 2;
    showFeature(2,tclick);
    });

    function nextFeature() {
    feature++;
    if (feature>2) feature = 0;
    showFeature(feature,tauto);
    }

    function prevFeature() {
    feature–;
    if (feature<0) feature = 2;
    showFeature(feature,tauto);
    }

    });
    </script>

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".