Search code examples
jqueryjquery-pluginsnews-ticker

jquery functions don't work with news ticker


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.


Solution

  • 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'
        });
    });