0

flickr から写真を取得し、各写真をテキスト ボックスで表示するフォト ギャラリーを構築しようとしています。div class='col-sm-6 col-md-4 center' で、すべての子関係が div class="row" 内で繰り返される以下のコードが必要です。

<div id="body" style="padding-top: 60px;">
 <div class="row">

  <!-- Section to repeat -->
  <div class='col-sm-6 col-md-4 center'>
   <div class='thumbnail'>
    <div id="gallery"></div> <!-- Photos go here -->
    <div class='input-group'>
     <!-- textbox and button -->
     <input type='text' class='form-control' placeholder='#tag'>
     <span class='input-group-btn'>
      <button class='btn btn-default' type='button'>Tag!</button>
     </span>
    </div>
   </div>
  </div>

  <!-- Above section repeats here 6 times -->

 </div><!--./row -->
</div><!--./body -->

私が親しみを感じているJavascriptは次のとおりです。

<script>
 (function() {
  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  var tagForm = "<span class='input-group-btn'><button class='btn btn-default' type='button'>Tag!</button></span>";

  $.getJSON( flickerAPI, {
   tags: "porsche",
   tagmode: "any",
   format: "json"
  })
  .done(function( data ) {
   $.each( data.items, function( i, item ) {
    $( "<img>" ).attr( "src", item.media.m ).appendTo( "#gallery" );
    $( "#gallery" ).append( tagForm );
    if ( i == 5 ) {
     return false;
    }
   });
  });
 })();
</script>

これにより写真がプルされますが、テキストボックスとボタンは下ではなく写真の右側になります。最初の 2 つの div が含まれていないことが問題であることはわかっていますが、写真とテキストボックス/ボタンをサムネイルと col-sm-6 の掘り出し物に埋め込む方法がわかりません。

どんな助けでも素晴らしいでしょう！ありがとうございます。

4

1 に答える 1

0

各画像を独自のタグ ボタンで #gallery に入れたい場合は、画像をグループ化して要素内にスパンすると、スタイルがはるかに簡単になります。

出力例:

<div class="gallery">
    <div class="img-box">
        <img src="something.jpg">
        <span class='input-group-btn'><button class='btn btn-default' type='button'>Tag!</button></span>
    </div>
</div>

<script>
 (function() {

  var flickerAPI = "http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
  var tagForm = "<span class='input-group-btn'><button class='btn btn-default' type='button'>Tag!</button></span>";
  // store this so we dont look it up every iteration
  var $gallery = $("#gallery");

  $.getJSON( flickerAPI, {
   tags: "porsche",
   tagmode: "any",
   format: "json"
  })
  .success(function( data ) {
   $.each( data.items, function( i, item ) {
        // create a div to stuff img and tag in
        var $img_box = $('<div class="img-box">');    
        $( "<img>" ).attr( "src", item.media.m ).appendTo( $img_box );
        $img_box.append( tagForm ).appendTo($gallery)
    if ( i == 5 ) {
     return false;
    }
   });
  });
 })();
</script>
于 2013-11-12T21:13:14.370 に答える