Tumblrの画像を使って背景画像をスライドショーにするスクリプトを作ってみました。
といってもほとんど他力ですが・・・。
サイドメニューにインクルードしているTumblrの画像を使います。
定番のjQueryを使うのでヘッダでインクルードします。
|
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" charset="utf-8" type="text/javascript"></script> |
このスライドショーの本家サイト Backstretch よりスクリプトをダウンロードしてインクルードします。
|
1 |
<script src="js/jquery.backstretch.min.js"></script> |
Tumblr設置はこちらに少々書いていますので参照してください。
Tumblrにリブログした画像をWordPressに表示してみた
getJSONの所の hoge を表示したいTumblrのIDに変更してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> $.getJSON("http://hoge.tumblr.com/api/read/json?num=24&callback=?", function(data) { var tum_pic = new Array(); $.each(data.posts, function(i, posts) { var photo = this['photo-url-1280']; if (this['type'] === "photo") { tum_pic.push( photo ); } else { return; } }); $.backstretch( tum_pic, { duration: 5000, fade: 750 } ); }); </script> |
こんな感じで出来ました。
こういうブログもありました。
- Nivo Sliderのスライドショー（jQueryプラグイン）
- Parallaxをやってみましたよ、jQueryを使って
- ランダムに文字や画像をパラパラ表示する、jQueryで。
- Flashのように文字を繰り返し表示、jQueryで
- Tumblrでリブログした画像をブラウザ一杯に敷き詰めてみる
人気のあるブログ：
- 新しいgemのアップデート方法（rubygems-update）
- Coda2でscssを使うときのお供にcompassをどうぞ。
- bashでUTF-8に設定して日本語表示したり使ったり。Emacsでも。
- NginxをSSL付きで動かすために設定したこと
- Macでフォルダを結合したいとき
