Search code examples
jquerywordpresssliderjcarousellite

Multiple jQuery scripts on one page?

I'm using a WordPress template that has a jQuery carousel on the homepage and some other jQuery goodies (toggles and sliders) on category pages, and they all work by themselves separately. I wanted to duplicate the slider on all category pages but when I add it, it breaks the jQuery on BOTH. Can someone give me a suggestion on how to get them to play nice with each other? Here's the 2 code snippets:

<script type="text/javascript">
// <![CDATA[
   /* featured listings slider */
   jQuery(document).ready(function($) {
      $('.slider').jCarouselLite({
         btnNext: '.next',
         btnPrev: '.prev',
         visible: 5,
         hoverPause: true,
         auto: 2800,
         speed: 1100,
         easing: 'easeOutQuint' // for different types of easing, see easing.js
      });
   });
// ]]>
</script>

and

<script type="text/javascript">
// <![CDATA[
// toggles the refine search field values
jQuery(document).ready(function($) {
    $('div.handle').click(function() {
        $(this).next('div.element').animate({
            height: ['toggle', 'swing'],
            opacity: 'toggle' }, 200
        );

        $(this).toggleClass('close', 'open');
        return false;
    });
    <?php foreach ( $_POST as $field => $val ) : ?>
    $('.<?php echo $field; ?> div.handle').toggleClass('close', 'open');
    $('.<?php echo $field; ?> div.element').show();
    <?php endforeach; ?>

});
// ]]>
</script>

...and

<script type="text/javascript">
// <![CDATA[
    jQuery(document).ready(function($) {
        $('#dist-slider').slider( {
            range: 'min',
            min: 0,
            max: 3000,
            value: <?php echo esc_js( isset( $_POST['distance'] ) ? intval( $_POST['distance'] ) : '50' ); ?>,
            step: 5,
            slide: function(event, ui) {
                $('#distance').val(ui.value + ' <?php echo $distance_unit; ?>');
            }
        });
        $('#distance').val($('#dist-slider').slider('value') + ' <?php echo $distance_unit; ?>');
    });
// ]]>
</script>

...and the last one

<script type="text/javascript">
// <![CDATA[
    jQuery(document).ready(function($) {
        $('#slider-range').slider( {
          range: true,
          min: <?php echo esc_js( intval( $cp_min_price ) ); ?>,
          max: <?php echo esc_js( intval( $cp_max_price ) ); ?>,
          step: 1,
          values: [ <?php echo esc_js( "{$amount[0]}, {$amount[1]}" ); ?> ],
          slide: function(event, ui) {
            <?php switch ( $cp_curr_symbol_pos ) {
                case 'left' :
                    ?>$('#amount').val('<?php echo $curr_symbol; ?>' + ui.values[0] + ' - <?php echo $curr_symbol; ?>' + ui.values[1]);<?php        
                    break;
                case 'left_space' : 
                ?>$('#amount').val('<?php echo $curr_symbol; ?> ' + ui.values[0] + ' - <?php echo $curr_symbol; ?> ' + ui.values[1]);<?php
                    break;
                case 'right' :
                ?>$('#amount').val(ui.values[0] + '<?php echo $curr_symbol; ?> - ' + ui.values[1] + '<?php echo $curr_symbol; ?>' );<?php
                    break;
                case 'right_space' : 
                ?>$('#amount').val(ui.values[0] + ' <?php echo $curr_symbol; ?> - ' + ui.values[1] + ' <?php echo $curr_symbol; ?>' );<?php
                    break;
            } ?>
          }
        });
        <?php switch ( $cp_curr_symbol_pos ) {
            case 'left' :
                ?>$('#amount').val('<?php echo $curr_symbol; ?>' + $('#slider-range').slider('values', 0) + ' - <?php echo $curr_symbol; ?>' + $('#slider-range').slider('values', 1));<?php    
                break;
            case 'left_space' : 
            ?>$('#amount').val('<?php echo $curr_symbol; ?> ' + $('#slider-range').slider('values', 0) + ' - <?php echo $curr_symbol; ?> ' + $('#slider-range').slider('values', 1));<?php
                break;
            case 'right' :
            ?>$('#amount').val($('#slider-range').slider('values', 0) + '<?php echo $curr_symbol; ?> - ' + $('#slider-range').slider('values', 1) + '<?php echo $curr_symbol; ?>');<?php
                break;
            case 'right_space' : 
            ?>$('#amount').val($('#slider-range').slider('values', 0) + ' <?php echo $curr_symbol; ?> - ' + $('#slider-range').slider('values', 1) + ' <?php echo $curr_symbol; ?>');<?php
                break;
            } ?>

    });
// ]]>
</script>

The LAST THREE all work fine together but when I add the first one on the same page, they all break. I tried changing jQuery(document).ready(function($) { to $(document).ready(function() { and the second line $ to jQuery but that didn't fix anything. I also tried to change the '.slider' to '.somethingslider' because I see another instance of .slider below, but THAT didn't work. Any help is much appreciated!

Solution

  • Remove $ from all the function you are passing into ready method. However it will not make any difference because $ points to the main jQuery object itself.

    Change this in all the ready handlers

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

    By

    jQuery(document).ready(function() {

    And make sure you have included jCarouselLite plugin js into your page, then it should work fine.