Нижний колонтитул переключается с изменением изображения

Question

Спасибо, что дали мне возможность помочь.

Я хотел бы создать нижний колонтитул (панель слайдов).

Я нашел приведенный ниже код, который отлично работает, но я хочучтобы иметь возможность изменять изображение, когда панель скользит: изображение отличается для открытия и закрытия (стрелка вверх -> стрелка вниз).

Как мне перейти к интеграции этой функции с этим кодом?

Заранее большое спасибо!

Вот код:

<script type="text/javascript">
jQuery(function($) {
var slide = false;
var height = $('#footer_content').height();
$('#footer_button').click(function() {
var docHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPos = docHeight - windowHeight + height;
$('#footer_content').animate({ height: "toggle"}, 1000);
if(slide == false) {
    if($.browser.opera) { //Fix opera double scroll bug by targeting only HTML.
        $('html').animate({scrollTop: scrollPos+'px'}, 1000);
    } else {
        $('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
    }
                       slide = true;
} else {
                       slide = false;
               }
});
});
</script>

Answer 1

Вы можете изменить изображение, изменив источник изображения:

$('.classOfImage').attr('src','/images/up.png');

Ваше изображение должно иметь класс, который вы используете здесь $('.classOfImage')

<img src="/images/firstimage.pmg" alt="My Image" class="classOfImage" />

Вы можете сделать что-то вроде этогочтобы интегрировать его в ваш текущий код:

var panel = false;

Определите эту переменную вне вашей функции щелчка и установите в false.

Теперь добавьте это к вашей функции нажатия:

if(!panel){
    $('.classOfImage').attr('src','/images/secondimage.png');
    panel = true;
} else if(panel) {
    $('.classOfImage').attr('src','/images/firstimage.png');
    panel = false;
}

Как я мог видеть, у вас уже есть переменная, которая сохраняет статус панели, например, slide, чтобы вы могли использовать ее следующим образом:

$(function() {
    var slide = false;
    var height = $('#footer_content').height();

    $('#footer_button').click(function() {

    var docHeight = $(document).height();
    var windowHeight = $(window).height();
    var scrollPos = docHeight - windowHeight + height;

    $('#footer_content').animate({ height: "toggle"}, 1000);

    if(!slide) {

        $('.classOfImage').attr('src','/images/secondimage.png'); // LOOK HERE !!

        if($.browser.opera) {
            $('html').animate({scrollTop: scrollPos+'px'}, 1000);
        } else {
            $('html, body').animate({scrollTop: scrollPos+'px'}, 1000);
        }
            slide = true;

    } else {

        $('.classOfImage').attr('src','/images/firstimage.png'); // AND HERE !!

           slide = false;
    }

    });
});

Примечание: jQuery(function($) { соответствует $(function() { и if(slide == false) соответствует if(!slide)