Having trouble paginating external Tumblr JSON

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

30 Replies - 2399 Views - Last Post: 08 July 2013 - 11:19 AM

#1 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Having trouble paginating external Tumblr JSON

Posted 02 July 2013 - 08:45 AM

Good morning,

I have a javascript which pulls my Tumblr feed and displays it on an external website.

	var tumblr_api_read = null; // this is important do not remove
	
	$(document).ready(function() {	
			// setup our namespace
			$.tumblr = {};
			// modify these
			$.tumblr.url = "http://wisdmlab.tumblr.com/api/read/json?callback=?&num=7";
			$.tumblr.numPostsToDisplay = 50;
			$.tumblr.postMaxDescriptionLength = 500; // set to -1 to turn off jquery.expander
			$.tumblr.videoWidth='200'; // youtube default 400
			$.tumblr.videoHeight='163'; // youtube default 325
			// do not modify these unless you are hardcore
			$.tumblr.imagePath = '..//testscripts/tumblr-jquery-master/img/';	
			$.tumblr.postCount = 0;
		
 			reloadTumblr();
  });		
  
  function reloadTumblr(){  	
  	$("#tumblrFeed").empty();
  	$("#tumblrFeed").append("<div class='body'>loading Tumblr</div>");
  
  	$.ajax({
		  url: $.tumblr.url,
		  dataType: 'script',
		  timeout: 10000,
      success:function(){ 
      	$("#tumblrFeed").empty();
      	if ((tumblr_api_read == undefined) || (tumblr_api_read == null)) {
      		$("#tumblrFeed").append("<div class='title' href='#'>unable to load Tumblr</div>");
      		$("#tumblrFeed").append("<div class='body'><a href=\"#\" onclick=\"javascript:reloadTumblr();\">[retry]</a></div>");    			
    		} else {
    			//$("#tumblrFeed").append("<div class='body'><a href=\"#\" style=\"float:center\" onclick=\"javascript:reloadTumblr();\">Refresh News Page</a></div>");
    			$.tumblr.postCount = 0;
	        $.each(tumblr_api_read.posts.slice(0, 50), function(i,post){
						if ($.tumblr.postCount >= $.tumblr.numPostsToDisplay) {
							return;
						}    			
	    			parseTumblrJSON(post);
	    			$.tumblr.postCount++;
	  			});
	
	    		// Apply Expander
	    		if ($.tumblr.postMaxDescriptionLength > -1) {
					  $('div.expandable').expander({
					    slicePoint:       $.tumblr.postMaxDescriptionLength,  // default is 100
					    expandText:         'Read more.',
					    userCollapseText: 'Read less.'
					  });					    			
	    		}
    		}
      },
      error:function (xhr, statusTxt, errorTxt){
      		$("#tumblrFeed").append("<a class='title' href='#'>Tumblr Parse Error</a>");
      		$("#tumblrFeed").append("<div class='body'>" + errorTxt + "<br/>" + xhr.responseText + "</div>");
      } 					      
		});  	
  }
	
	function formatDate(d) {
		/*
Format  Description                                                                  Example
------  ---------------------------------------------------------------------------  -----------------------
 s      The seconds of the minute between 0-59.                                      "0" to "59"
 ss     The seconds of the minute with leading zero if required.                     "00" to "59"
 
 m      The minute of the hour between 0-59.                                         "0"  or "59"
 mm     The minute of the hour with leading zero if required.                        "00" or "59"
 
 h      The hour of the day between 1-12.                                            "1"  to "12"
 hh     The hour of the day with leading zero if required.                           "01" to "12"
 
 H      The hour of the day between 0-23.                                            "0"  to "23"
 HH     The hour of the day with leading zero if required.                           "00" to "23"
 
 d      The day of the month between 1 and 31.                                       "1"  to "31"
 dd     The day of the month with leading zero if required.                          "01" to "31"
 ddd    Abbreviated day name. Date.CultureInfo.abbreviatedDayNames.                  "Mon" to "Sun" 
 dddd   The full day name. Date.CultureInfo.dayNames.                                "Monday" to "Sunday"
 
 M      The month of the year between 1-12.                                          "1" to "12"
 MM     The month of the year with leading zero if required.                         "01" to "12"
 MMM    Abbreviated month name. Date.CultureInfo.abbreviatedMonthNames.              "Jan" to "Dec"
 MMMM   The full month name. Date.CultureInfo.monthNames.                            "January" to "December"

 yy     The year as a two-digit number.                                              "99" or "08"
 yyyy   The full four digit year.                                                    "1999" or "2008"
 
 t      Displays the first character of the A.M./P.M. designator.                    "A" or "P"
        $C.amDesignator or Date.CultureInfo.pmDesignator
 tt     Displays the A.M./P.M. designator.                                           "AM" or "PM"
        $C.amDesignator or Date.CultureInfo.pmDesignator
 
 S      The ordinal suffix ("st, "nd", "rd" or "th") of the current day.            "st, "nd", "rd" or "th"
 	*/
 		return d.toString('dddd, MMMM d, yyyy')
	}
	
	function processResponse() {
	}
	
	function parseTumblrJSON(post) {
		//alert(post.type);
		var d = Date.parse(post["date-gmt"]);
		var dateFmt = formatDate(d);
		
    switch(post.type)
    {		    	
    	case "regular":
    	{
				$("#tumblrFeed").append(
					"<table style='width: 100%;'><tr><td width='18px'>" +
					"</td></table>");						
    		//Place directly before "</td>" <div class='date'>" + dateFmt + "</div>
			
    		$("#tumblrFeed").append("<a class='title' href='" + post.url + "' target='_blank'>" + (post["regular-title"] == null ? 'view tumblr' : post["regular-title"])  + "</a>");
    		$("#tumblrFeed").append("<div class='body expandable'>" + post["regular-body"] + "</div>");
			$("#tumblrFeed").append("<div class='date'>" + dateFmt + "</div>");
    		break;
    	}
    	case "link":
    	{
				$("#tumblrFeed").append(
					"<table style='width: 100%;'><tr><td width='18px'>" +
					"<a href='" + post.url + "' target='_blank'>" +
					"<div class='date'>" + dateFmt + "</div></td></table>");						
    		
    		$("#tumblrFeed").append("<a class='title' href='" + post["link-url"] + "' target='_blank'>" + (post["link-text"] == null ? 'view tumblr' : post["link-text"]) + "</a>");
    		$("#tumblrFeed").append("<div class='body expandable'>" + post["link-description"] + "</div>");
    		break;
    	}		    	
    	case "quote":
    	{
				$("#tumblrFeed").append(
					"<table style='width: 100%;'><tr><td width='18px'>" +
					"<a href='" + post.url + "' target='_blank'>" +
					"<div class='date'>" + dateFmt + "</div></td></table>");						
    		
    		$("#tumblrFeed").append("<div class='body'>" + 
    			"<div class='quote expandable'>" + post["quote-text"] + "</div>" +
    			"<div class='quotesrc'>" + post["quote-source"] + "</div>" +
    			"</div>");
    		break;
    	}		    	
    	case "photo":
    	{
				$("#tumblrFeed").append(
					"<table style='width: 100%;'><tr><td width='18px'>" +
					"<a href='" + post.url + "' target='_blank'>" +
					"</td></table>");						
    		// valid values are: photo-url-[75, 100, 250, 400, 500, 1280]
    		$("#tumblrFeed").append("<div class='body'>" + 
    			"<a href='" + post.url + "'>" +
    			"<img src='" + post["photo-url-250"] + "'/></a><br/>" + 
    			post["photo-caption"] + 
    			"</div>", "<div class='date'>" + dateFmt + "</div>");
    		break;
    	}
    	case "conversation":
    	{
				$("#tumblrFeed").append(
					"<table style='width: 100%;'><tr><td width='18px'>" +
					"<a href='" + post.url + "' target='_blank'>" +
					"<div class='date'>" + dateFmt + "</div></td></table>");						
					    		
    		var html = '';
    		$("#tumblrFeed").append("<a class='title' href='" + post.url + "' target='_blank'>" + (post["conversation-title"] == null ? 'view tumblr' : post["conversation-title"])  + "</a>");

				for(var i = 0; i < post["conversation"].length; i++) {
					var conv = post["conversation"][i];						
					html += "<div class='convlabel'>" + conv.label + "</div>";
					html += "<div class='convtext expandable'>" + conv.phrase + "</div>";
				}

				/*    		
				$(this).find("line").each(function(){
					html += "<div class='convlabel'>" + $(this).attr("label") + "</div>";
					html += "<div class='convtext'>" + $(this).text() + "</div>";
				});*/
    				    		
    		$("#tumblrFeed").append("<div class='body'>" + html + "</div>");
    		break;
    	}
    	case "audio":
    	{
				$("#tumblrFeed").append(
					"<table style='width: 100%;'><tr><td width='18px'>" +
					"<a href='" + post.url + "' target='_blank'>" +
					"<div class='date'>" + dateFmt + "</div></td></table>");						
    		
    		$("#tumblrFeed").append("<a class='title' href='" + post.url + "' target='_blank'>" + post["audio-caption"] + "</a>");
    		$("#tumblrFeed").append("<div class='body'>" + post["audio-player"] + "</div>");
    		break;
    	}
    	case "video":
    	{
				$("#tumblrFeed").append(
					"<table style='width: 100%;'><tr><td width='18px'>" +
					"<a href='" + post.url + "' target='_blank'>" +
					"<div class='date'>" + dateFmt + "</div></td></table>");						
    		
    		$("#tumblrFeed").append("<a class='title' href='" + post.url + "' target='_blank'>" + post["video-caption"] + "</a>");
    		// resize our video code if possible
    		var vdo = post["video-player"];
    		var re = new RegExp('width=\"([a-zA-Z0-9]*)\"', 'g');
    		vdo = vdo.replace(re, 'width="' + $.tumblr.videoWidth + '"');
    		re = new RegExp('height=\"([a-zA-Z0-9]*)\"', 'g');
    		vdo = vdo.replace(re, 'height="' + $.tumblr.videoHeight + '"');    		
    		re = new RegExp('400,320', 'g');
    		vdo = vdo.replace(re, $.tumblr.videoWidth + ',' + $.tumblr.videoHeight);
    		re = new RegExp('400,250', 'g');
    		vdo = vdo.replace(re, $.tumblr.videoWidth + ',' + $.tumblr.videoHeight);
    		$("#tumblrFeed").append("<div class='body'>" + vdo + "</div>");
    		break;
    	}		    	
    	default:
    		break;
    }
    $("#tumblrFeed").append("<div class='clear'>&nbsp;</div>");
	}	




For the most part, everything works, however I'm looking to split the content into different pages using a pagination method. I have no clue how to do this, it's beyond my skill level. I'm hoping that someone who knows Tumblr's v1 API can help me do this or point me in the right direction. Here's a URL for some of the .tumblr.com/api/read/json? syntax: http://www.tumblr.com/docs/en/api/v1

Currently the max number of posts you can display at once is 50, and my Tumblr is at 37. I'm hoping that we can call this script multiple times or write a loop to call it multiple times per page (1,2,3,4,...10, etc).

Is This A Good Question/Topic? 0
  • +

Replies To: Having trouble paginating external Tumblr JSON

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9570
  • View blog
  • Posts: 36,240
  • Joined: 12-June 08

Re: Having trouble paginating external Tumblr JSON

Posted 02 July 2013 - 08:55 AM

From the API:

Quote

start - The post offset to start from. The default is 0.
num - The number of posts to return. The default is 20, and the maximum is 50.


Wouldn't that push one towards the direction that you could use a loop where you increment the start offset?

http://www.w3schools...js_loop_for.asp

Though, as an aside, that would be pretty odd. running multiple calls to the api so you can make the data into some sort of faux page just seems.. excessive.
Was This Post Helpful? 0
  • +
  • -

#3 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Having trouble paginating external Tumblr JSON

Posted 02 July 2013 - 09:08 AM

Yeah I thought it would be pretty odd to run the script multiple times. The only thing that I can think of is writing a loop, like you said, to start=0&num=7 for page 1 start=8&num=7 for page 2, and so on and so forth. I think I could write a for loop to increment each time a certain set of data is loaded. The problem is, I have trouble putting code together and javascript's syntax is a little different than what I'm learning, which is C++.
Was This Post Helpful? 0
  • +
  • -

#4 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9570
  • View blog
  • Posts: 36,240
  • Joined: 12-June 08

Re: Having trouble paginating external Tumblr JSON

Posted 02 July 2013 - 09:21 AM

Quote

The problem is, I have trouble putting code together and javascript's syntax is a little different than what I'm learning, which is C++.

The syntax isn't too far off of that of c++.

So puzzle it out. Throw down some psuedo code and work out what the logic is going to be. Are you able to enumerate those steps?
Was This Post Helpful? 0
  • +
  • -

#5 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 446
  • View blog
  • Posts: 1,921
  • Joined: 30-April 10

Re: Having trouble paginating external Tumblr JSON

Posted 02 July 2013 - 09:23 AM

Your first request needs to include the get variable of the number you want to show.
http://wisdmlab.tumblr.com/api/read/json?callback=?&num=7



Then you will have a link that gets the new data from that point.
http://wisdmlab.tumblr.com/api/read/json?callback=?&num=7&start=8"



and so on.
Was This Post Helpful? 0
  • +
  • -

#6 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Having trouble paginating external Tumblr JSON

Posted 02 July 2013 - 10:15 AM

Okay, I'll see if I can put something together. I'm trying to load them without having a new url ie: news.php/page2/ news.php/page3/ etc. It shoud load everything without leaving news.php (where the script is).
Was This Post Helpful? 0
  • +
  • -

#7 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 446
  • View blog
  • Posts: 1,921
  • Joined: 30-April 10

Re: Having trouble paginating external Tumblr JSON

Posted 02 July 2013 - 10:19 AM

You could use ajax to get the information from the api and then just replace or add it into the existing page.

I prefer to use jquery for this type of thing because it is faster to write and easier to implement. Just my opinion.
Was This Post Helpful? 0
  • +
  • -

#8 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Having trouble paginating external Tumblr JSON

Posted 02 July 2013 - 11:32 AM

I found something that looks like it might suite my needs. https://github.com/g...uery_pagination
Was This Post Helpful? 0
  • +
  • -

#9 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 446
  • View blog
  • Posts: 1,921
  • Joined: 30-April 10

Re: Having trouble paginating external Tumblr JSON

Posted 02 July 2013 - 12:29 PM

Try it out and come back if you have a problem. Good luck.
Was This Post Helpful? 0
  • +
  • -

#10 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Having trouble paginating external Tumblr JSON

Posted 03 July 2013 - 09:20 AM

So I've been looking at some lightweight solutions but I'm still unsure how to tie it into my existing code, posted above.

(function($){

       $.fn.customPaginate = function(options)
       {
           var paginationContainer = this;
           var itemsToPaginate;
           
            
           var defaults = {
       
                itemsPerPage : 5
           
           };
        
           var settings = {};
        
           $.extend(settings, defaults, options);
           
           var itemsPerPage = settings.itemsPerPage;
        
           itemsToPaginate = $(settings.itemsToPaginate);
           var numberOfPaginationLinks = Math.ceil((itemsToPaginate.length / itemsPerPage));
        
           $("<ul></ul>").prependTo(paginationContainer);
           
           for(var index = 0; index < numberOfPaginationLinks; index++)
           {
                paginationContainer.find("ul").append("<li>"+ (index+1) + "</li>");
           }
           
           itemsToPaginate.filter(":gt(" + (itemsPerPage - 1)  + ")").hide();
           
           paginationContainer.find("ul li").first().addClass(settings.activeClass).end().on('click', function(){
			   
			   var $this = $(this);
			   
			   $this.addClass(settings.activeClass);
			   
			   $this.siblings().removeClass(settings.activeClass);
           
               var linkNumber = $this.text();
               
                var itemsToHide = itemsToPaginate.filter(":lt(" + ((linkNumber-1) * itemsPerPage)  + ")");
                $.merge(itemsToHide, itemsToPaginate.filter(":gt(" + ((linkNumber * itemsPerPage) - 1)  + ")"));
                itemsToHide.hide();
                
                var itemsToShow = itemsToPaginate.not(itemsToHide);
                itemsToShow.show();
           });
           
       }
            
}(jQuery));



In the code it splits the data when it encounters a certain number of <ul></ul>, for example 10. My Tumblr script doesn't use lists, it's split between 3 divs, for the title, post body, and date. I could be wrong, but given the pagination code provided, it seems like my requirements are much more advanced.
Was This Post Helpful? 0
  • +
  • -

#11 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 446
  • View blog
  • Posts: 1,921
  • Joined: 30-April 10

Re: Having trouble paginating external Tumblr JSON

Posted 03 July 2013 - 11:07 AM

I think that this would be a better option for your project.

Take a look and see if you can fallow the examples to get the idea of how it works.
Was This Post Helpful? 0
  • +
  • -

#12 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Having trouble paginating external Tumblr JSON

Posted 04 July 2013 - 11:26 PM

I tried using something simple like this, but had no success. I'm missing something but not sure what it is that I'm missing.

This is how I output the page:

	<!-- style -->

	<script type="text/javascript" src="../testscripts/tumblr-jquery-master/jquery-1.4.4.min.js" ></script> 		
	<script type="text/javascript" src="../testscripts/tumblr-jquery-master/date.js" ></script>
	<script type="text/javascript" src="../testscripts/tumblr-jquery-master/jquery.expander.js" ></script>
	<script type="text/javascript" language="javascript" src="http://assets.tumblr.com/javascript/tumblelog.js?16"></script>
	<!-- tumblr -->
	<link rel="stylesheet" href="../testscripts/tumblr-jquery-master/tumblr.css" type="text/css" media="screen" />
	<script type="text/javascript" src="../testscripts/tumblr-jquery-master/tumblr.js" ></script> 		
	
<!-- content START -->
<div id="content">
	<!-- main START -->
	<div id="main">
				
		<!-- Tumblr -->
		<div id="tumblrFeed"></div>
        
        <!-- Begin Pagination -->
        <div id="example3-pagination">
        <a id="example3-previous" href="#">&laquo; Previous</a> 
        <a id="example3-next" href="#">Next &raquo;</a> 
        </div>
        <!-- End Pagination -->
			<div class="clear"></div>	
	</div>
	<!-- main END -->

<script type="text/javascript" src="/july4/fedecarg-jquery-paginate-ec56cdb/src/js/jquery.paginate.js"></script>
<script type="text/javascript">
$(document).ready(function()    {
	$('#tumblrFeed').paginate({itemsPerPage: 10});

	$.getJSON('data.json', function(data) {
		var items = [];
		$.each(data.items, function(i, item) {
			items.push('<li>' + item + '</li>');
		});
		
	});
});
</script> 




This is the pagination javascript:

/**
 * Paginate - jQuery Plugin
 * By Federico Cargnelutti <fedecarg@gmail.com>
 * 
 * Dual licensed under the MIT and GPL licenses:
 *   - http://www.opensource.org/licenses/mit-license.php
 *   - http://www.gnu.org/licenses/gpl.html
 * 
 * Examples and documentation at: 
 *   - http://github.com/fedecarg/jquery-htmlpaginate
 * 
 * Usage:
 * 
 * <ul id="items">
 *     <li>Item 1</li>
 *     <li>Item 2</li>
 *     <li>Item 3</li>
 *     <li>Item 4</li>
 *     <li>Item 5</li>
 *     <li>Item 6</li>
 * </ul>
 * <div id="items-pagination" style="display:none">
 *     <a id="items-previous" href="#">&laquo; Previous</a> 
 *     <a id="items-next" href="#">Next &raquo;</a>
 * </div>
 *     
 * <script type="text/javascript">
 * $('#items').paginate({itemsPerPage: 2});
 * </script>
 * 
 */
(function($) {
    
$.fn.paginate = function(options) {
    
    var Paginator = function(self, options) {
        
        var defaults = {
            itemsPerPage: 10,
            selector: {
                next: self.selector+'-next',
                previous: self.selector+'-previous',
                pagination: self.selector+'-pagination'
            },
            cssClassName: {
                disabled: 'disabled'
            }
        };
        var options = $.extend(defaults, options);
        var currentPage = 1;
        var numberOfPages = 1;
        var numberOfItems = 0;
        
        var init = function() {
            numberOfItems = self.children().size();
            numberOfPages = Math.ceil(numberOfItems / options.itemsPerPage);
            if (numberOfPages > 1) {
                $(options.selector.pagination).show();
                $(options.selector.previous).addClass(options.cssClassName.disabled);
            }
            
            self.children().hide();
            self.children().slice(0, options.itemsPerPage).show();
            
            $(options.selector.previous).click(function(e){
                e.preventDefault();
                previous();
            });
            $(options.selector.next).click(function(e){
                e.preventDefault();
                next();
            });
            
            self.show();
        }
        
        var show = function(page) {
            currentPage = page;
            startPage = (currentPage - 1) * options.itemsPerPage;
            endPage = startPage + options.itemsPerPage;
            self.children().hide().slice(startPage, endPage).show();

            var disabled = options.cssClassName.disabled;
            $(options.selector.pagination + ' a').removeClass(disabled);
            if (currentPage <= 1) {
                $(options.selector.previous).addClass(disabled);
            } else if (currentPage == numberOfPages) {
                $(options.selector.next).addClass(disabled);
            }
        };
        
        var next = function() {
            if (currentPage < numberOfPages){
                show(currentPage + 1);
            }
        };
        
        var previous = function() {
            if (currentPage > 1) {
                show(currentPage - 1);
            }
        };
        
        init();
        return this;
    }
    
    return new Paginator(this, options);
};
})(jQuery);


Was This Post Helpful? 0
  • +
  • -

#13 laytonsdad  Icon User is online

  • Cheese and Sprinkles
  • member icon

Reputation: 446
  • View blog
  • Posts: 1,921
  • Joined: 30-April 10

Re: Having trouble paginating external Tumblr JSON

Posted 05 July 2013 - 09:11 AM

I don't see where you are writing the content to the page.
Was This Post Helpful? 0
  • +
  • -

#14 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Having trouble paginating external Tumblr JSON

Posted 05 July 2013 - 10:56 AM

View Postlaytonsdad, on 05 July 2013 - 09:11 AM, said:

I don't see where you are writing the content to the page.


It's written from the tumblr javascript file when the html file calls <div id="tumblrFeed">

Here's the javascript file. I *think* I might have to embed the pagination within the tumbrfeed javascript file and create a variable when the pages increment.

	var tumblr_api_read = null; // this is important do not remove
	
	$(document).ready(function() {	
			// setup our namespace
			$.tumblr = {};
			// modify these
			$.tumblr.url = "http://wisdmlab.tumblr.com/api/read/json?callback=?&num=7";
			$.tumblr.numPostsToDisplay = 50;
			$.tumblr.postMaxDescriptionLength = 500; // set to -1 to turn off jquery.expander
			$.tumblr.videoWidth='200'; // youtube default 400
			$.tumblr.videoHeight='163'; // youtube default 325
			// do not modify these unless you are hardcore
			$.tumblr.imagePath = '..//testscripts/tumblr-jquery-master/img/';	
			$.tumblr.postCount = 0;
		
 			reloadTumblr();
  });		
  
  function reloadTumblr(){  	
  	$("#tumblrFeed").empty();
  	$("#tumblrFeed").append("<div class='body'>loading Tumblr</div>");
  
  	$.ajax({
		  url: $.tumblr.url,
		  dataType: 'script',
		  timeout: 10000,
      success:function(){ 
      	$("#tumblrFeed").empty();
      	if ((tumblr_api_read == undefined) || (tumblr_api_read == null)) {
      		$("#tumblrFeed").append("<div class='title' href='#'>unable to load Tumblr</div>");
      		$("#tumblrFeed").append("<div class='body'><a href=\"#\" onclick=\"javascript:reloadTumblr();\">[retry]</a></div>");    			
    		} else {
    			//$("#tumblrFeed").append("<div class='body'><a href=\"#\" style=\"float:center\" onclick=\"javascript:reloadTumblr();\">Refresh News Page</a></div>");
    			$.tumblr.postCount = 0;
	        $.each(tumblr_api_read.posts.slice(0, 50), function(i,post){
						if ($.tumblr.postCount >= $.tumblr.numPostsToDisplay) {
							return;
						}    			
	    			parseTumblrJSON(post);
	    			$.tumblr.postCount++;
	  			});
	
	    		// Apply Expander
	    		if ($.tumblr.postMaxDescriptionLength > -1) {
					  $('div.expandable').expander({
					    slicePoint:       $.tumblr.postMaxDescriptionLength,  // default is 100
					    expandText:         'Read more.',
					    userCollapseText: 'Read less.'
					  });					    			
	    		}
    		}
      },
      error:function (xhr, statusTxt, errorTxt){
      		$("#tumblrFeed").append("<a class='title' href='#'>Tumblr Parse Error</a>");
      		$("#tumblrFeed").append("<div class='body'>" + errorTxt + "<br/>" + xhr.responseText + "</div>");
      } 					      
		});  	
  }
	
	function formatDate(d) {
		/*
Format  Description                                                                  Example
------  ---------------------------------------------------------------------------  -----------------------
 s      The seconds of the minute between 0-59.                                      "0" to "59"
 ss     The seconds of the minute with leading zero if required.                     "00" to "59"
 
 m      The minute of the hour between 0-59.                                         "0"  or "59"
 mm     The minute of the hour with leading zero if required.                        "00" or "59"
 
 h      The hour of the day between 1-12.                                            "1"  to "12"
 hh     The hour of the day with leading zero if required.                           "01" to "12"
 
 H      The hour of the day between 0-23.                                            "0"  to "23"
 HH     The hour of the day with leading zero if required.                           "00" to "23"
 
 d      The day of the month between 1 and 31.                                       "1"  to "31"
 dd     The day of the month with leading zero if required.                          "01" to "31"
 ddd    Abbreviated day name. Date.CultureInfo.abbreviatedDayNames.                  "Mon" to "Sun" 
 dddd   The full day name. Date.CultureInfo.dayNames.                                "Monday" to "Sunday"
 
 M      The month of the year between 1-12.                                          "1" to "12"
 MM     The month of the year with leading zero if required.                         "01" to "12"
 MMM    Abbreviated month name. Date.CultureInfo.abbreviatedMonthNames.              "Jan" to "Dec"
 MMMM   The full month name. Date.CultureInfo.monthNames.                            "January" to "December"

 yy     The year as a two-digit number.                                              "99" or "08"
 yyyy   The full four digit year.                                                    "1999" or "2008"
 
 t      Displays the first character of the A.M./P.M. designator.                    "A" or "P"
        $C.amDesignator or Date.CultureInfo.pmDesignator
 tt     Displays the A.M./P.M. designator.                                           "AM" or "PM"
        $C.amDesignator or Date.CultureInfo.pmDesignator
 
 S      The ordinal suffix ("st, "nd", "rd" or "th") of the current day.            "st, "nd", "rd" or "th"
 	*/
 		return d.toString('dddd, MMMM d, yyyy')
	}
	
	function processResponse() {
	}
	
	function parseTumblrJSON(post) {
		//alert(post.type);
		var d = Date.parse(post["date-gmt"]);
		var dateFmt = formatDate(d);
		
    switch(post.type)
    {		    	
    	case "regular":
    	{
				$("#tumblrFeed").append(
					"<table style='width: 100%;'><tr><td width='18px'>" +
					"</td></table>");						
    		//Place directly before "</td>" <div class='date'>" + dateFmt + "</div>
			
    		$("#tumblrFeed").append("<a class='title' href='" + post.url + "' target='_blank'>" + (post["regular-title"] == null ? 'view tumblr' : post["regular-title"])  + "</a>");
    		$("#tumblrFeed").append("<div class='body expandable'>" + post["regular-body"] + "</div>");
			$("#tumblrFeed").append("<div class='date'>" + dateFmt + "</div>");
    		break;
    	}
    	case "link":
    	{
				$("#tumblrFeed").append(
					"<table style='width: 100%;'><tr><td width='18px'>" +
					"<a href='" + post.url + "' target='_blank'>" +
					"<div class='date'>" + dateFmt + "</div></td></table>");						
    		
    		$("#tumblrFeed").append("<a class='title' href='" + post["link-url"] + "' target='_blank'>" + (post["link-text"] == null ? 'view tumblr' : post["link-text"]) + "</a>");
    		$("#tumblrFeed").append("<div class='body expandable'>" + post["link-description"] + "</div>");
    		break;
    	}		    	
    	case "quote":
    	{
				$("#tumblrFeed").append(
					"<table style='width: 100%;'><tr><td width='18px'>" +
					"<a href='" + post.url + "' target='_blank'>" +
					"<div class='date'>" + dateFmt + "</div></td></table>");						
    		
    		$("#tumblrFeed").append("<div class='body'>" + 
    			"<div class='quote expandable'>" + post["quote-text"] + "</div>" +
    			"<div class='quotesrc'>" + post["quote-source"] + "</div>" +
    			"</div>");
    		break;
    	}		    	
    	case "photo":
    	{
				$("#tumblrFeed").append(
					"<table style='width: 100%;'><tr><td width='18px'>" +
					"<a href='" + post.url + "' target='_blank'>" +
					"</td></table>");						
    		// valid values are: photo-url-[75, 100, 250, 400, 500, 1280]
    		$("#tumblrFeed").append("<div class='body'>" + 
    			"<a href='" + post.url + "'>" +
    			"<img src='" + post["photo-url-250"] + "'/></a><br/>" + 
    			post["photo-caption"] + 
    			"</div>", "<div class='date'>" + dateFmt + "</div>");
    		break;
    	}
    	case "conversation":
    	{
				$("#tumblrFeed").append(
					"<table style='width: 100%;'><tr><td width='18px'>" +
					"<a href='" + post.url + "' target='_blank'>" +
					"<div class='date'>" + dateFmt + "</div></td></table>");						
					    		
    		var html = '';
    		$("#tumblrFeed").append("<a class='title' href='" + post.url + "' target='_blank'>" + (post["conversation-title"] == null ? 'view tumblr' : post["conversation-title"])  + "</a>");

				for(var i = 0; i < post["conversation"].length; i++) {
					var conv = post["conversation"][i];						
					html += "<div class='convlabel'>" + conv.label + "</div>";
					html += "<div class='convtext expandable'>" + conv.phrase + "</div>";
				}

				/*    		
				$(this).find("line").each(function(){
					html += "<div class='convlabel'>" + $(this).attr("label") + "</div>";
					html += "<div class='convtext'>" + $(this).text() + "</div>";
				});*/
    				    		
    		$("#tumblrFeed").append("<div class='body'>" + html + "</div>");
    		break;
    	}
    	case "audio":
    	{
				$("#tumblrFeed").append(
					"<table style='width: 100%;'><tr><td width='18px'>" +
					"<a href='" + post.url + "' target='_blank'>" +
					"<div class='date'>" + dateFmt + "</div></td></table>");						
    		
    		$("#tumblrFeed").append("<a class='title' href='" + post.url + "' target='_blank'>" + post["audio-caption"] + "</a>");
    		$("#tumblrFeed").append("<div class='body'>" + post["audio-player"] + "</div>");
    		break;
    	}
    	case "video":
    	{
				$("#tumblrFeed").append(
					"<table style='width: 100%;'><tr><td width='18px'>" +
					"<a href='" + post.url + "' target='_blank'>" +
					"<div class='date'>" + dateFmt + "</div></td></table>");						
    		
    		$("#tumblrFeed").append("<a class='title' href='" + post.url + "' target='_blank'>" + post["video-caption"] + "</a>");
    		// resize our video code if possible
    		var vdo = post["video-player"];
    		var re = new RegExp('width=\"([a-zA-Z0-9]*)\"', 'g');
    		vdo = vdo.replace(re, 'width="' + $.tumblr.videoWidth + '"');
    		re = new RegExp('height=\"([a-zA-Z0-9]*)\"', 'g');
    		vdo = vdo.replace(re, 'height="' + $.tumblr.videoHeight + '"');    		
    		re = new RegExp('400,320', 'g');
    		vdo = vdo.replace(re, $.tumblr.videoWidth + ',' + $.tumblr.videoHeight);
    		re = new RegExp('400,250', 'g');
    		vdo = vdo.replace(re, $.tumblr.videoWidth + ',' + $.tumblr.videoHeight);
    		$("#tumblrFeed").append("<div class='body'>" + vdo + "</div>");
    		break;
    	}		    	
    	default:
    		break;
    }
    $("#tumblrFeed").append("<div class='clear'>&nbsp;</div>");
	}	



Was This Post Helpful? 0
  • +
  • -

#15 popa  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 53
  • Joined: 15-February 13

Re: Having trouble paginating external Tumblr JSON

Posted 05 July 2013 - 06:50 PM

	var tumblr_api_read = null; // this is important do not remove
    var tumblrPaginate = 0; // **TODO** make loop to increment each for pagination feature
    var tumblrpostCount = 5; // set the post count number, max is 50 for API v1
	
	$(document).ready(function() {	
			// setup our namespace
			$.tumblr = {};
			// modify these
			$.tumblr.url = 'http://wisdmlab.tumblr.com/api/read/json?callback=?&num=' + tumblrpostCount +'&start=' + tumblrPaginate +''; // set to display 7 posts. off set syntax is start=[postnumtobeginat]
			$.tumblr.numPostsToDisplay = 50;
			$.tumblr.postMaxDescriptionLength = 500; // set to -1 to turn off jquery.expander
			$.tumblr.videoWidth='200'; // youtube default 400
			$.tumblr.videoHeight='163'; // youtube default 325
			// do not modify these unless you are hardcore
			$.tumblr.imagePath = '..//testscripts/tumblr-jquery-master/img/';	
			$.tumblr.postCount = 0;
		
 			reloadTumblr();
  });


I've made a little headway by creating a variable (tumblrPaginate) to increment the value each time the user clicks on a link. Should I use t a for loop for the forward and backward function?
Was This Post Helpful? 0
  • +
  • -

  • (3 Pages)
  • +
  • 1
  • 2
  • 3