Potomaks Instagram Jquery スクリプトを使用して、特定のタグの画像を取得しています。行がテーブル全体に収まるように、画像のサイズを自動調整するように CSS を設定しています。
テーブルは 100% に設定され、画像のメイン div は 100% に設定されます。
でもなぜか、何をやっても最後にGAPがあります。コードを徹底的にチェックしましたが、説明はありません。float:left に関連している可能性があり、JavaScript に関連している可能性があります。
いずれにせよ、私の目標は、画像が 20% の画像幅 (各行に 5 画像) でテーブル全体を埋めることです。
このままでは画像が10%、15%、20%と右にズレがあります
http://postimg.org/image/rkz5zxtfr/
私のhtmlは次のとおりです。
<script src="jquery.instagram.js"></script>
<link rel="stylesheet" href="jgram.css" type="text/css" />
<script type="text/javascript">
$(function(){
var tokeny= "xxxx";
var ids= tokeny.substr(0, tokeny.indexOf('.'));
var
insta_container = $(".instagram")
, insta_next_url
insta_container.instagram({
hash: 'motorcycles'
, clientId: 'xxxx'
, accessToken: tokeny
, show : 15
, image_size: 'low_resolution'
, onComplete : function (photos, data) {
insta_next_url = data.pagination.next_url
}
})
$('button').on('click', function(){
var
button = $(this)
, text = button.text()
if (button.text() != 'Loading...'){
button.text('Loading...')
insta_container.instagram({
next_url : insta_next_url
, show : 50
, image_size: 'low_resolution'
, onComplete : function(photos, data) {
insta_next_url = data.pagination.next_url
button.text(text)
}
})
}
})
});
</script>
<div class="instagram"></div>
<br>
<button class="instamore">More</button><br><br>
すべてが「instagram」div に読み込まれます。そこから、画像は別の div "instagram-placeholder" に入ります。
CSSは次のとおりです。
.instagram {
width:100%;
}
.instagram-placeholder {
float:left;
width:15%;
height:15%;
}
.instagram-image {
width:100%;
height:100%;
border-style: none;
}
.instamore{
width: 100%;
color: #fbfbfb;
font-style: italic;
font: 30px Sans-Serif;
padding: 0px 5px;
display: inline-block;
background-color: #3F3F3F;
border-radius: 2px;
-o-border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border: 1px solid #000000;
margin-right: 3px;
margin-top:10px;
margin-bottom:10px;
cursor:pointer
}