Я использую шаблон WordPress, у которого есть карусель jQuery на домашней странице и некоторые другие полезности jQuery (переключатели и ползунки) на страницах категорий, и все они работают отдельно. Я хотел продублировать слайдер на всех страницах категорий, но когда я его добавляю, он ломает jQuery на ОБА. Может кто-нибудь подсказать, как заставить их хорошо играть друг с другом? Вот 2 фрагмента кода:
<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>
и
<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>
... и
<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>
... и последний
<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>
Последние три отлично работают вместе, но когда я добавляю первый на той же странице, они все ломаются. Я попытался изменить jQuery(document).ready(function($) { на $(document).ready(function() { и вторую строку $ на jQuery, но это ничего не исправило. Я также попытался изменить '.slider' на '.somethingslider', потому что я вижу другой экземпляр .slider ниже, но ЭТО не сработало. Любая помощь очень ценится!