Jquery EasySlider с подписями - последний слайд не анимируется - PullRequest
Новая
       23

Jquery EasySlider с подписями - последний слайд не анимируется

0 голосов
/ 29 июня 2011

Я создал слайд-шоу с помощью EasySlider и добавил функцию наведения / анимации, чтобы добавить наложение заголовка, способное запускать Shadowbox.

Моя проблема в том, что последний слайд, кажется, делает мою последовательность подписей нулевой. Функция будет работать, пока слайд находится в переходном состоянии, но когда он заканчивается, заголовок возвращается в исходное положение. Это происходит только на последнем слайде последовательности.

Может кто-нибудь сказать мне, как я мог бы изменить функцию подписи или EasySlider, чтобы заставить это работать?

http://zachinscho.com/save/kreber_test/V2/

Спасибо

Ответы [ 2 ]

2 голосов
/ 24 июня 2012

Я знаю, что это старый пост, и я уверен, что Марлин для многих решил текстовую функцию - но если кто-то ищет решение для добавления подписей (которое не включает в себя изменение js), я добавил класс для css (файл easyslider screen.css) и класс наведения для определения поведения текста:

CSS: 

.stext {
display: none; 
position: absolute; 
margin-top: -29px; 
width: 660px; 
left:0px; 
padding: 7px 0px;
}
#slider li:hover .stext {
display: block; 
background: #000000; 
opacity: 0.5; 
filter: alpha(opacity=50); 
padding-left: 10px; 
padding-right: 10px; 
font-family: Trebuchet MS, Arial, sans-serif; 
font-size: 12px; 
color: #eeeeee; 
text-decoration: none;
}

и HTML (я только что включил первый слайд в качестве примера: 

<div id="slider">
    <ul>                
        <li><img src="images/slide-01.jpg" alt="image description" />
         <a href="#"><span class="stext">caption text to show on hover</span></a></li>
0 голосов
/ 29 июня 2011

Зак, я, честно говоря, не могу найти ошибку в вашем коде, но если вы уберете отдельных слушателей и примените универсальный слушатель для всех слайдов, это решит вашу проблему 

$('#easysliderMain li').hover(function(){
     $(".cover", this).stop().animate({top:'250px'},{queue:false,duration:160});
}, function() {
     $(".cover", this).stop().animate({top:'280px'},{queue:false,duration:160});
});
...