Question

I have a PHP script that connects to an API and grabs around 200 avatars. I want to display 25 of them on my page, but have a “MORE” button for the user to press that will fade those 25 out, and then show the next 25. When it gets to the end of the avatars, I want the “MORE” button to cycle to the start again.

I am not sure the best way to do this, should I load all 200 images but set the last 175 to be invisible, then do it through Javascript and JQuery, does that make sense?

I know I am asking a confusing question. I just basically want to display 25 at a time instead of 200, and I’m not sure of the specific JQuery or Javascript way to do it.

Answer 1

Sounds like you’re looking for something that loads data dynamically from a php-based source, so many at a time. You can load images pretty easy from a datasource like:

$.getJSON("http://somewhere.com/feeds/feed.php?id=12345", function(data) {
    $.each(data.items, function(index, item) {
        $("<img/>")
            .attr("title", item.title)
            .attr("src", item.src)
            .wrap("<a href='" + item.link + "'></a>")
            .appendTo("#mybox")
    });
});

and then combining the list with something like jCarousel – http://sorgalla.com/jcarousel/ – which has the ability to cycle from the last item back through the first. In fact, jCarousel might be your best solution. Load and build a list from your php-driven json source – check out this demo of loading a carousel from ajax

http://sorgalla.com/projects/jcarousel/examples/dynamic_ajax_php.html

Adding pagination might not be required with a carousel, but if required this link might be helpful to you.

http://www.myphpetc.com/2009/10/easy-pagination-with-jquery-and-ajax.html

Good luck!