Databases
StackOverflow2013
Postsdbo
PORendering custom photo set using tumblr JSON
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORendering custom photo set using tumblr JSON
    primarykey
    data
    text
    <p>I am creating this custom theme <em>www.designislikethis.tumblr.com</em>, which uses the jQuery Masonry and the Slider plugins. In creating this theme I wanted to create my own photoset slideshow instead of messing around with the default Flash-based one.</p> <p>I started by pulling the images from the JSON of each photoset post by the post's ID using JS and jQuery.</p> <p>I then rendered these images onto my frontpage in a special div that is linked to a minimal jQuery slideshow plugin, so each image fades in and out.</p> <p>The code I use to pull/render for each photoset post is as follows:</p> <pre><code> function photoSet() { $('.photoset').each(function () { var postID = $(this).attr('id'); var that = $(this); $.getJSON("http://designislikethis.tumblr.com/api/read/json?id="+postID+"&amp;callback=?", function(data) { var postPhotos = data["posts"][0]["photos"]; var postPermalink = data["posts"][0]; for(var i = 0; i&lt;postPhotos.length; i++) { var photo250 = new Image(); photo250.src = postPhotos[i]['photo-url-250']; postLink = postPermalink["url-with-slug"]; var setClass = ".photoset"+ i; var imgClass = ".img"+ i; $(that).find('.slide').append('&lt;a class="'+ setClass +'" href="'+postLink+'"&gt;&lt;img class="'+ imgClass +'" src="' +photo250.src+ '"/&gt;&lt;/a&gt;'); } }); }); } </code></pre> <p>Now my problem lies in that all the other elements on my tumblr index page are not rendered with JSON, so they load faster. By the time my photo set renders it's divs are unproportional to everything that has loaded around it, and so the image slider wont kick in and you are left with a mess of rendered images.</p> <p>What's most annoying about this problem is that some times it works fine, and others it's a mess, depending on how fast the page loads, or if you have the website already cached in your browser.</p> <p>To see the extent of my Javascript and how I am calling this photoset funciton see here:</p> <p><a href="http://helloauan.com/apps/DILTtheme/utils.js" rel="nofollow">http://helloauan.com/apps/DILTtheme/utils.js</a></p> <p>I know it's a little messy, for I am new to all of this. :)</p> <p>Thanks.</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. UStamago
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PORendering custom photo set using tumblr JSON
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload