Tumblrでリブログした画像をブラウザ一杯に敷き詰めてみる

by CyberMameCAN on 2013年7月3日, 0 comments
カテゴリ：Developper, Webサイト作成
タグ：jQuery, Tumblr
Short URL: http://blog.tstylestudio.com/?p=1943

ブラウザ一杯に敷き詰めるのはjQueryプラグインAutomatic Image Montageを使いました。
画像を格好良く敷き詰める事が出来ます。
Automatic Image Montage with jQuery

Tumblrより画像を取得するのはこちらを参考にしました。
ブログのフッター等にjQueryでTumblrに投稿した画像を表示する – かちびと.netさん

ブラウザ一杯に奇麗に敷き詰められるとなんだかカッコいい！

HTML

<div id="am-container" class="am-container"></div>

1	<div id="am-container" class="am-container"></div>

CSS

.am-wrapper{
	float:left;
	position:relative;
	overflow:hidden;
}
.am-wrapper img{
	position:absolute;
	outline:none;
}

.am-wrapper{

float:left;

position:relative;

overflow:hidden;

}

.am-wrapper img{

position:absolute;

outline:none;

}

JavaScript

<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より画像を取得

$.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>

月	火	水	木	金	土	日
« 6月				8月 »
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

サイバーまめカン鹿児島の出水市でプログラミングしてる人のブログ

MacとSwift, Ruby, Pythonと温い日常。Linuxも少々。