Grow your CSS skills. Land your dream job.

[Solved] Easyslider.js, WordPress, custom templates issue

  • cjk
    # April 9, 2009 at 2:21 pm

    This one has me stumped because I had it working like a charm on my local server under mamp!

    I have one page in wordpress that I would like easyslider.js to be on, along with a custom sidebar. So, my thinking is that I need a custom template for the page, using the ‘include’ wordpress function for a custom header, and then a custom sidebar.

    Everything worked well on my live site. The custom page template pops up, the custom header displays and the custom sidebar displays. The javascript though doesn’t. The slides just display (all of them) bulleted which leads me to believe that the scripts are not being loaded.

    I am using a modified kubrick theme, basically re-styled.

    I placed this into my custom header php file in the normal location , just above </head>

    Code:


    and placed the actual scripts into my theme folder.

    the css is fine, I use the slider on my static (non-wordpress) home page at http://www.krowchukdressage.com and that works just fine.

    Am I missing the obvious here?

    Cheers!
    Chris

    edited!!

    Nevermind! Solved, duh! Path… /

    Code:

    # July 27, 2009 at 2:23 am

    i have a problem with integration of jslider with my wordpress… i’m trying to insert the script to my wordpress header but it’s not working, the images are not showing up, but the alt message is (CSS Template Preview) and it is listed, meaning all of the given images alt message is being shown except the images. help… :|

    # July 27, 2009 at 3:59 am

    i’ve solved it already! hayys~ after all the hardshi*s hehe… i uploaded all the images and called it from the upload folder. it’s not working when i inserted all the scripts in the template that i’m using… it must be uploaded as of my case…

    # February 4, 2010 at 8:40 am

    Has anyone else encountered the problem of easySlider not working when you try include it in a WP theme that is calling a few more instances of jQuery?

    :|

    # February 4, 2010 at 12:00 pm
    "James R" wrote:
    Has anyone else encountered the problem of easySlider not working when you try include it in a WP theme that is calling a few more instances of jQuery?

    :|

    http://digwp.com/2009/06/including-jque … right-way/

    # February 5, 2010 at 5:32 am

    Thanks for the reply Doc, I thought I had included everything correctly but I’m not so sure.

    Here’s what’s going on:

    header.php

    Code:
    < ?php wp_head(); ?>


    theme-js.php

    Code:
    < ?php
    wp_enqueue_script('jquery');

    wp_enqueue_script( 'easySlider', get_bloginfo('template_directory').'/includes/js/easySlider1.7.js', array( 'jquery' ) );

    wp_enqueue_script( 'superfish', get_bloginfo('template_directory').'/includes/js/superfish.js', array( 'jquery' ) );
    wp_enqueue_script( 'general', get_bloginfo('template_directory').'/includes/js/scripts.js', array( 'jquery' ) );
    wp_enqueue_script( 'innerfade', get_bloginfo('template_directory').'/includes/js/innerfade.js', array( 'jquery' ) );
    wp_enqueue_script( 'prettyPhoto', get_bloginfo('template_directory').'/includes/js/prettyPhoto.js', array( 'jquery' ) );

    wp_enqueue_script( 'scrollTo', get_bloginfo('template_directory').'/includes/js/scrollTo-1.4.2-min.js', array( 'jquery' ) );
    wp_enqueue_script( 'localscroll', get_bloginfo('template_directory').'/includes/js/localscroll-min.js', array( 'jquery' ) );
    wp_enqueue_script( 'serialScroll', get_bloginfo('template_directory').'/includes/js/serialScroll-1.2.2-min.js', array( 'jquery' ) );
    ?>

    scripts.js

    Code:
    //lots of other scripts and finally

    //easySlider
    jQuery(document).ready(function($){

    $(“#box-slider1″).easySlider({
    nextId: “slider1next”,
    prevId: “slider1prev”
    });
    $(“#box-slider2″).easySlider({
    nextId: “slider2next”,
    prevId: “slider2prev”
    });
    $(“#box-slider3″).easySlider({
    nextId: “slider3next”,
    prevId: “slider3prev”
    });
    });

    I’ve tried moving the script in to the header and calling the js file from there but that doesn’t seem to work.

    Any help would be great!

    # February 6, 2010 at 8:47 am

    Fixed it!

    I placed the following script down the bottom of the easslider1.7.js file:

    Code:
    //more code above this..

    if(options.numeric) setCurrent(0);

    if(!options.continuous && options.controlsFade){
    $(“a”,”#”+options.prevId).hide();
    $(“a”,”#”+options.firstId).hide();
    };

    });

    };

    })(jQuery);

    jQuery(document).ready( function(){

    jQuery(“#box-slider1″).easySlider({
    nextId: “slider1next”,
    prevId: “slider1prev”
    });
    jQuery(“#box-slider2″).easySlider({
    nextId: “slider2next”,
    prevId: “slider2prev”
    });
    jQuery(“#box-slider3″).easySlider({
    nextId: “slider3next”,
    prevId: “slider3prev”
    });
    });

    8-)

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

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