
ブラウザ一杯に敷き詰めるのはjQueryプラグインAutomatic Image Montageを使いました。
画像を格好良く敷き詰める事が出来ます。
Automatic Image Montage with jQuery
Tumblrより画像を取得するのはこちらを参考にしました。
ブログのフッター等にjQueryでTumblrに投稿した画像を表示する – かちびと.netさん
HTML
1 |
<div id="am-container" class="am-container"></div> |
CSS
1 2 3 4 5 6 7 8 9 |
.am-wrapper{ float:left; position:relative; overflow:hidden; } .am-wrapper img{ position:absolute; outline:none; } |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<script type="text/javascript" src="js/jquery.montage.min.js"></script> <script> // Tumblrより画像を取得 $.getJSON("http://atbat-jp.tumblr.com/api/read/json?num=50&callback=?", function(data) { $.each(data.posts, function(i, posts) { var photo = this['photo-url-250']; var url = this['url']; if (this['type'] === "photo") { $('#am-container').append('<a href="' + url + '" target="_blank"><img src="' + photo + '" \/><\/a>'); } else { return; } }); // AutomaticImageMontageプラグインを使って画像を敷き詰める var $container = $('#am-container'), $imgs = $container.find('img').hide(), totalImgs = $imgs.length, cnt = 0; $imgs.each(function(i) { var $img = $(this); $('<img/>').load(function() { ++cnt; if( cnt === totalImgs ) { $imgs.show(); $container.montage({ fillLastRow : true, alternateHeight : true, alternateHeightRange : { min : 90, max : 240 } }); /* * just for this demo: */ $('#overlay').fadeIn(500); } }).attr('src',$img.attr('src')); }); }); </script> |
こういうブログもありました。
- Tumblrのリブログした画像をスライドショーの背景画像として設置 jQueryで
- Nivo Sliderのスライドショー(jQueryプラグイン)
- 画像拡大プラグイン ZoomIt + jQuery
- Parallaxをやってみましたよ、jQueryを使って
- ニッカンツイッター 2012-04-12
人気のあるブログ:
- 新しいgemのアップデート方法(rubygems-update)
- Coda2でscssを使うときのお供にcompassをどうぞ。
- bashでUTF-8に設定して日本語表示したり使ったり。Emacsでも。
- NginxをSSL付きで動かすために設定したこと
- Macでフォルダを結合したいとき
Tumblrでリブログした画像をブラウザ一杯に敷き詰めてみる http://t.co/4nCXDCtO5Y @CyberMameCANさんから