Dynamic filter bar using tag links in tumblr -
i have 10 links 10 tagpages, when clicked take page posts tag.
that’s easy enough.
i’d know if possible stack more 1 tagged post in page. example when “red” tagged posts showing can click , load in “blue” tagged posts without leaving page.
the 10 links behave filtering system. can show combination of tagged posts in 1 page… click once , load them in, click again hide posts.
i hope makes sense.
any great. thanks.
you can load in posts tag tumblr's api: http://www.tumblr.com/docs/en/api/v2#posts
the call each of tags (square brackets marking areas you'll need change):
url = http://api.tumblr.com/v2/blog/[base-hostname]/posts?api_key=[key]&tag=[tagname]&jsonp=? $.ajax(url, { type: 'get', datatype: 'json', success: function(data) { // data } });
updated more specific example:
you'd need create function each click of tag navigation. let's built out navigation in simple html, you'd want create function each of clicks.
hmtl:
<nav class="tag-nav> <ul> <li><a href="/tagged/portrait" class="portrait">portrait</a></li> <li><a href="/tagged/landscape" class="landscape">landscape</a></li> </ul> </nav>
js:
$('.tag-nav a').on('click', function (e) { e.preventdefault(); // grab classname link clicked var tagname = $(this).attr('class'); // go our tagged posts gettaggedposts(tagname); }); var gettaggedposts = function (tag) { // ajax call go // bonus points if check see if you've made ajax call // , stored posts somewhere else on page };
Comments
Post a Comment