1
このカスタムテーマを作成しています。www.designislikethis.tumblr.comは、jQuery MasonryプラグインとSliderプラグインを使用しています。このテーマを作成する際、私は自分のフォトセットスライドショーを作成したかったのですが、これはデフォルトのFlashベースのスライドショーを使いこなすことでした。tumblrを使用してカスタム写真セットをレンダリングするJSON
私は、JSとjQueryを使って、各フォトセットの投稿のJSONから投稿のIDでイメージを引き出すことから始めました。
次に、最小限のjQueryスライドショープラグインにリンクされた特別なdivで、これらの画像を自分のフロントページにレンダリングして、各画像をフェードインまたはフェードインしました。次のように
私は、各フォトセットのポストのためのレンダリング/プルするために使用するコードは次のとおりです。
function photoSet() {
$('.photoset').each(function() {
var postID = $(this).attr('id');
var that = $(this);
$.getJSON("http://designislikethis.tumblr.com/api/read/json?id="+postID+"&callback=?",
function(data) {
var postPhotos = data["posts"][0]["photos"];
var postPermalink = data["posts"][0];
for(var i = 0; i<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('<a class="'+ setClass +'" href="'+postLink+'"><img class="'+ imgClass +'" src="' +photo250.src+ '"/></a>');
}
});
});
}
今私の問題は私のtumblrのインデックスページ上の他のすべての要素をJSONでレンダリングされていないことにあるので、それらより速くロードします。私の写真セットがレンダリングされるまでに、divはその周りにロードされているすべてのものに非比例しているので、イメージスライダが動かなくなり、レンダリングされたイメージが残ってしまいます。
この問題の最も厄介な点は、ページがどのくらいの速さで読み込まれたか、またはブラウザにキャッシュされているかどうかによってうまくいくことがあることです。
は私のJavascriptの度合いを表示するには、私が呼び出していますどのようにこのフォトセットのfuncitonはこちらを参照してください。http://helloauan.com/apps/DILTtheme/utils.js
を私はこのすべてに新しいですのために、それは、少し厄介だ知っています。 :)
ありがとうございました。