CODEWITHSUNDEEP
javascriptjquery
Cocorico
Cocorico

Reputation: 2347

Best way to cycle through a bunch of small avatars using maybe Jquery or Javascript

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.

Upvotes: 0

Views: 105

Answers (3)

frumbert
frumbert

Reputation: 2427

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!

Upvotes: 1

Art
Art

Reputation: 5924

Let's say your more link has an id: "more-link", and your image container has an id "images". Then it would look something like this:

$(function() {
    var avatars = [], position=0;

    $.get("/avatars").then(function(list) {
        avatars = list;
        show_25();
    });

    function show_25() {
        for(var i = position; Math.min(i,list.length) < 25+position; i++) {
            $("<img />").attr("src",list[i]).appendTo("#images");
        }

        position += 25;

        if( position > list.length ) {
            $("#more-link").hide();
        }
    }

    $("#more-link").click(show_25);
});

Upvotes: 1

Taha Paksu
Taha Paksu

Reputation: 15616

I would go with http://masonry.desandro.com/ and it has its infinite scroll method, seems cool.

Upvotes: 1

Related Questions