jquery functions don't work with news ticker
-
12-11-2019 - |
Вопрос
I'm using a news ticker for a news section in a page and I want to use prettyphoto plugin with these news but any of jquery function doesn't work when < li > items change their position.
For example none of jquery functions doesn't work when first item becomes last
Here are the codes
$(document).ready(function(){
var first = 0;
var speed = 1000;
var pause = 3500;
function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
//Codes above are for the news ticker
$(".news").click(function(e){
e.preventDefault(); //I assign news class to links if there is no image for the news on db but it doesn't even work
});
$("#newsdiv a[rel^='gallery']").prettyPhoto({
theme:'light_rounded'
});
});
And the HTML Result of the php functions
<ul id="listticker">
<li>
<img src="http://example.com/m.../k_haber.png"><a href="#" class="news">12.05.2011</a><span class="news-text">Some Title</span>
</li>
<li>
<img src="http://example.com/../some.png"><a href="http://example.com/../news/p_some.jpg" class="news-title" rel="gallery[dd0]"> 12.05.2011</a><span class="news-text">Some Other Title</span>
</li>
</ul>
Any idea what might be causing this or how to fix it?
EDIT:
I assume the problem occurs because of the jquery html selector.
Решение 3
I realized Jquery functions shuld be declared within the function which will be used so Finally I found the solution.
Here are the codes
$(document).ready(function(){
var first = 0;
var speed = 1000;
var pause = 3500;
function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.fadeOut('slow', function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow',function(){
$("a[rel^='gallery']").click(function() {
$.prettyPhoto.open($(this).attr("href"),"","");
return false;
});
});
$(".news").click(function(e){
e.preventDefault();
});
}
interval = setInterval(removeFirst, pause);
$("#newsdiv a[rel^='gallery']").prettyPhoto({
theme:'light_rounded'
});
});
Другие советы
Get your variables and function declarations outside the dom ready event. http://jsfiddle.net/jfahv/
jQuery's ":first" selector returns the first-matched element, not the first child element. Try using :first-child instead.