1

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
   }
4

1 に答える 1