Example for next or previous image/post?

[ballmannweber]

hey there! I bought and installed your nice craftagram and try to get it showing one image/post at a time with two links beneath that let me click to next or the previous image. can you post a small example for that behaviour?

thank you very much in advance! matthias

[jsmrtn]

You would want something like this–I haven't tested this but it should work functionally I believe. You would probably want to check that cursors.before and cursors.after exist, so you can hide the link when it isn't available.

{% set craftagram = craft.craftagram.getInstagramFeed(1) %}

{% if craftagram|length %}
    <div data-js="insta-wrapper">
        {% for item in craftagram.data %}
            <img src={{item.media_url}} />
        {% endfor %}
    </div>

    <a data-link="{{ craftagram.paging.cursors.before }}" data-js="load-prev">Load prev</a>
    <a data-link="{{ craftagram.paging.cursors.after }}" data-js="load-next">Load next</a>
{% endif %}

{% js %}
    $("[data-js=load-more]").click(function(e) {
        e.preventDefault();
        $.get("{{ parseEnv(craft.app.sites.primarySite.baseUrl) }}/actions/craftagram/default/get-next-page?siteId={{ currentSite.id }}&limit=1&url=" + $(this).data('after'), function(res) {
            data = $.parseJSON(res);

            // For each, append the item to our wrapper
            $.each(data["data"], function() {
                $("[data-js='insta-wrapper']").html("<img src="+$(this)[0]["media_url"]+" />");
            });

            // Update the paging.
            $("[data-js=load-next]").data("link", data["paging"]["cursors"]["after"]);
            $("[data-js=load-prev]").data("link", data["paging"]["cursors"]["before"]);
        });
    });
{% endjs %}

[ballmannweber]

thank you for your fast reply! it’s not working yet but I will look into this.

another quick question: are there tags for number or likes or comments? item.likes didn’t do the trick.

[jsmrtn]

We return all the data provided by the media endpoint, so if it's not listed there, it's not available.