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

  • RazziaDK

    (@razziadk)


    12 years 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

Viewing 7 replies - 1 through 7 (of 7 total)
  • WPyogi

    (@wpyogi)

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

    https://codex.www.ads-software.com/Using_Javascript

    Thread Starter RazziaDK

    (@razziadk)

    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', 'https://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?

    I think that the issue that you have has to do with the code here –
    https://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: https://codex.www.ads-software.com/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

    Thread Starter RazziaDK

    (@razziadk)

    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>

    Thread Starter RazziaDK

    (@razziadk)

    Anyone? ??

    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. (:

    suifengtec

    (@suifengtec)

    nice js!

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘How to use CarouFredSel (jQuery slider/carousel) with WP?’ is closed to new replies.