WordPress.org

Ready to get started?Download WordPress

Forums

How to use CarouFredSel (jQuery slider/carousel) with WP? (8 posts)

  1. RazziaDK
    Member
    Posted 1 year ago #

    I'm trying to integrate CarouFredSel into my WP, but I can't get it working - what am I'm doing wrong?

    Currently I'm trying to use the second example from this website using the installation guide.

    I'm adding the .js files in the top of my WP page instead of in the <head> tag in the header.php because I don't want to load the .js files on every page, but only on the page with the CarouFredSel.

    I've copied the HTML code from the example page to my WP page. I added the CSS to the bottom of style.css in my theme.

    Finally I added the javascript in a <script> tag in the bottom of the WP page.

    Now I expect the CarouFredSel to work, but clearly it doesn't. The page only shows one image at the time. The "prev", "next" and "123" buttons work, but the style isn't loaded or something.

    What am I doing wrong?

    Thanks in advance for your help!

    /RazziaDK

  2. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Have you read this? If not, it may offer some help:

    http://codex.wordpress.org/Using_Javascript

  3. RazziaDK
    Member
    Posted 1 year ago #

    No, but I have now.

    I expect that I might use jquery and caroufredsel on several pages and therefore I've tried adding them using wp enqueue script. I've added the following code in my functions.php in the current theme.

    function my_scripts_method() {
        wp_deregister_script( 'jquery' );
        wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
        wp_enqueue_script( 'jquery' );
    }    
    
    add_action('wp_enqueue_scripts', 'my_scripts_method');
    
    function carouFredSel-6.1.0() {
        wp_deregister_script( 'caroufredsel' );
        wp_register_script( 'caroufredsel', get_template_directory_uri() . '/caroufredsel/jquery.carouFredSel-6.1.0.js');
        wp_enqueue_script( 'caroufredsel' );
    }    
    
    add_action('wp_enqueue_scripts', 'carouFredSel-6.1.0');

    The javascript code for the specific page I added to a seperate .js file and try loading that from the page code like this:

    <script type="text/javascript" src="/wp-content/themes/twentyeleven/caroufredsel/caroufredsel.js"></script>
    <script type="text/javascript">
    <!--
    caroufredsel();
    //--></script>

    As you can see from this page it still doesn't work.

    Have I misunderstood the use of javascript in WordPress, or have I just implemented it the wrong way?

  4. I think that the issue that you have has to do with the code here -
    http://cbo.dk/wp-content/themes/twentyeleven/caroufredsel/caroufredsel.js

    When integrating jQuery in WordPress, you need to use :

    jQuery(document).ready(function($) {
        // $() will work as an alias for jQuery() inside of this function
    });

    here is more detailed info: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

  5. RazziaDK
    Member
    Posted 1 year ago #

    I'm sorry for yet another questtion, but I am not very familiar with javascript.. :)

    I've tried adding the wrapper in the .js file.

    Do I still "fire" the plugin with this command in the WP page? :

    <script type="text/javascript" src="/wp-content/themes/twentyeleven/caroufredsel/caroufredsel.js"></script>
    <script type="text/javascript">
    <!--
    carouFredSel();
    //--></script>
  6. RazziaDK
    Member
    Posted 1 year ago #

    Anyone? :)

  7. jx1
    Member
    Posted 1 year ago #

    I have it like this in wordpress and works (:

    <script type="text/javascript" src="js/jquery.carouFredSel.js"></script> <!-- Carrousel Javascript -->
    <script>
    jQuery(document).ready(function($) {
    $("#foo").carouFredSel({
    	width: 976,
    	height: 322,
            align: "left",
            scroll: {
                    items:1,
    	},
    	auto: false,
    	next: "a.next2",
    	prev: "a.prev2"
    });
    });
    </script>

    This is all within the text box, right at the top, Always try to edit in HTML mode when adding code. (:

  8. suifengtec
    Member
    Posted 7 months ago #

    nice js!

Topic Closed

This topic has been closed to new replies.

About this Topic