Скрипт спойлера с изменяющимися изображениями в заголовке спойлера

[Admin]

К теме Обновленный скрипт спойлера с плавным открытием и скрытием содержимого поступил комментарий от Алексея:

(07.10.2014 21:05:15)Алексей писал(а):Добрый вечер!
Огромное спасибо за отличный спойлер.
Есть вопрос...
Выпадает при нажатии на картинку. Вопрос:
Как сделать чтобы при наведении курсора на картинку она менялась (№2), при открытом спойлере опять менялась (№3), при закрытии становилась исходной (№1).

Использую код:
$(document).ready(function(){
$(document).click(function(){
$("div[class^='spoiler_body']").hide('normal');
});
$('.spoiler_style').click(function(){
$(this).next('.spoiler_body').toggle('normal');
return false;
});
});

HTML:
<div class="spoiler_style">
<img src="images/spoiler2.png" alt="subscribe" width="300" height="55" />
</div>
<div class="spoiler_body">
Здесь содержится все то, что должен скрывать спойлер.<br>
</div>

Спасибо!

Данный комментарий в связи со своими большими размерами и узкой спецификой вопроса (не всем это может понадобиться) был перенесен на форум. Так же ответ на данный комментарий будет не маленьким.

[Admin]

Если я правильно Вас понял, то изображение должно иметь три состояния: при открытом спойлере, при закрытом спойлере и под курсором мыши.

В таком случае держите код, который будет корректно работать только в том случае, если изначально все спойлеры закрыты:

Код:

<style type="text/css">
    .spoiler_body { display:none; }
</style>

<div class="spoiler_style">
<img src="image/img_1.png" alt="subscribe" width="300" height="55" />
</div>
<div class="spoiler_body">
Здесь содержится все то, что должен скрывать спойлер.<br>
</div>

<div class="spoiler_style">
<img src="image/img_1.png" alt="subscribe" width="300" height="55" />
</div>
<div class="spoiler_body">
Здесь содержится все то, что должен скрывать спойлер.<br>
</div>

<div class="spoiler_style">
<img src="image/img_1.png" alt="subscribe" width="300" height="55" />
</div>
<div class="spoiler_body">
Здесь содержится все то, что должен скрывать спойлер.<br>
</div>


<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_style').data('state', 0);
var time=300;
var img_url=["image/img_1.png","image/img_3.png","image/img_2.png"];

$(document).click(function(){
    $('.spoiler_body').hide('normal');
    $('.spoiler_style').data('state', 0);
    $('.spoiler_style img').fadeOut(time, function() { $(this).attr('src', img_url[0]).fadeIn(time); });
});

$('.spoiler_style').click(function(){
    if ($(this).data('state')==0) $(this).data('state', 1);
    else $(this).data('state', 0);
    $(this).children('img').attr('src', img_url[2]);
    $(this).next('.spoiler_body').toggle('normal');
    return false;
});

$('.spoiler_style img').hover(
function(){
    $(this).fadeOut(time, function() { $(this).attr('src', img_url[2]).fadeIn(time); });
},
function(){
    if ($(this).parent().data('state')==0) {
        $(this).fadeOut(time, function() { $(this).attr('src', img_url[0]).fadeIn(time); });
    }
    else {
        $(this).fadeOut(time, function() { $(this).attr('src', img_url[1]).fadeIn(time); });
    }
});

});
</script>

P.S. Пришлось конечно помучаться, но вроде работает как надо и с плавной сменой изображений.

[aleks]

Добрый вечер.
Спасибо огромное! То что нужно!

Единственная проблема (( отказали все ссылки на сайте.
эффект "hover" есть, а перехода по ссылке нет...
Подскажите пожалуйста как поправить.

Спасибо.

[Admin]

Это я пока тестировал, немного перестарался.

Удалите строчку return false; из функции $(document).click(function(){...});

Вверху код тоже поправил.

[aleks]

Большое спасибо!
Все работает и не конфликтует ни с одним из скриптов!
Отличная работа!

[aleks]

Добрый день!
По ходу дела возникла еще одна проблема.
Скрипт закрывает спойлер при нажатии в любое место страницы. Как исключить ТОЛЬКО область внутри открытого спойлера, т.к. внутри есть картинки при нажатии на которые спойлер должен оставаться открытым!

Еще раз спасибо!

[Admin]

Замените функцию:

Код:

$(document).click(function(){
     $('.spoiler_body').hide('normal');
     $('.spoiler_style').data('state', 0);
     $('.spoiler_style img').fadeOut(time, function() { $(this).attr('src', img_url[0]).fadeIn(time); });
});

На новую:

Код:

$(document).click(function(e){
    if (!$(e.target).closest('.spoiler_body').length) {
        $('.spoiler_body').hide('normal');
        $('.spoiler_style').data('state', 0);
        $('.spoiler_style img').fadeOut(time, function() { $(this).attr('src', img_url[0]).fadeIn(time); });
    }
});

[aleks]

И ещё раз спасибо за оперативную помощь!

[aleks]

Добрый день!

Еще один вопрос...
Скажите пожалуйста, чтобы добавить второй спойлер (картинка на которую будет клик, отличается от первого спойлера) на ту же страницу, необходимо подключать новый скрипт или достаточно внести дополнение в имеющийся?

Заранее спасибо.

[Admin]

Думаю, тут малыми изменениями не обойдется, легче повторить скрипт, изменив адреса изображений и имена стилей для второго спойлера. Ничего более оригинального предложить не могу...