私はFlickrギャラリーを作成したいと思います。画像をクリックすると、画像とそのタグ、テラル、写真IDがポップアップ表示されます。

Page´s photoおはようございます、私はjsとhtmlでflickr APIを作成しています。 HTMLで表示していますが、写真をクリックすると、説明、タグ、タイトル、写真IDのポップアップが表示されます。私はFlickrギャラリーを作成したいと思います。画像をクリックすると、画像とそのタグ、テラル、写真IDがポップアップ表示されます。

私のコードです：

<html> 
<head> 
<title>Creating your first app with Flickr API</title> 
<style type="text/css"> 
</style> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script> 
<script> 
function obtenerFotos(text) { 
var apiurl; 
apiurl = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f0b84fba1c00631410b85b90720f52ba&text="+text+"&per_page=10&format=json&nojsoncallback=1"; 
$.getJSON(apiurl,function(json){ 
$.each(json.photos.photo,function(i,myresult){ 
var url = 'https://farm' + myresult.farm + ".staticflickr.com/" + myresult.server + '/' + myresult.id + '_' + myresult.secret + '_b.jpg'; 
$('<img/>').attr("src", url).appendTo("#results").wrap("<div class=\"slide\"><h3>"+ myresult.title + url +"</h3><a href='" + myresult.link + "'></a></div>"); 
         $('img').click(function() { //al hacer click en una miniatura ampliamos la imagen 
          $('#imga').attr("src", $(this).attr('src')); 

          $('#fondo').fadeIn(); 
         }); 
}); 
}); 
      $('#fondo').click(function() { //si clickeamos de nuevo volvemos a la pantalla principal 
       $('#fondo').fadeOut(); 
      }); 

}; 

</script> 
</head> 
<body> 
<div id="left_sidebar" class="container"></div> 
      <input type="text" name="a" placeholder="Inserte su texto aqui" id="a"> 
       <button type="button" onclick="obtenerFotos(document.getElementById('a').value)">Buscar</button> 


<div class="wraper" id="results"></div> 
<div id="fondo"> 
<div><img src="" id="imga"/> 

</div> 
</div> 


</body> 
</html>

写真があることを示している一部：

      $('img').click(function() { //al hacer click en una miniatura ampliamos la imagen 
          $('#imga').attr("src", $(this).attr('src')); 

          $('#fondo').fadeIn(); 
         });

しかしdoesn't仕事がポップアップで写真を表示し、説明を示しいけない、いけないタイトル、id、tags。

よろしくお願いいたします。

出典

2017-05-06 Juan

コンソールにエラーがありますか？ – ADyson

いいえ、エラーは、私はコンソールイメージとページを使って投稿を編集します。 – Juan

このコードを試すことができますか？私はそれをポップアップにするためにthisを使用しました。あなたの要件に応じてCSSを適用します。

<html> 

    <head> 
     <title>Creating your first app with Flickr API</title> 
     <style> 
      #myImg { 
       border-radius: 5px; 
       cursor: pointer; 
       transition: 0.3s; 
      } 

      #myImg:hover { 
       opacity: 0.7; 
      } 
      /* The Modal (background) */ 

      .modal { 
       display: none; 
       /* Hidden by default */ 
       position: fixed; 
       /* Stay in place */ 
       z-index: 1; 
       /* Sit on top */ 
       padding-top: 100px; 
       /* Location of the box */ 
       left: 0; 
       top: 0; 
       width: 100%; 
       /* Full width */ 
       height: 100%; 
       /* Full height */ 
       overflow: auto; 
       /* Enable scroll if needed */ 
       background-color: rgb(0, 0, 0); 
       /* Fallback color */ 
       background-color: rgba(0, 0, 0, 0.9); 
       /* Black w/ opacity */ 
      } 
      /* Modal Content (image) */ 

      .modal-content { 
       margin: auto; 
       display: block; 
       width: 80%; 
       max-width: 700px; 
      } 
      /* Caption of Modal Image */ 

      #caption { 
       margin: auto; 
       display: block; 
       width: 80%; 
       max-width: 700px; 
       text-align: center; 
       color: #ccc; 
       padding: 10px 0; 
       height: 150px; 
      } 
      /* Add Animation */ 

      .modal-content, 
      #caption { 
       -webkit-animation-name: zoom; 
       -webkit-animation-duration: 0.6s; 
       animation-name: zoom; 
       animation-duration: 0.6s; 
      } 

      @-webkit-keyframes zoom { 
       from { 
        -webkit-transform: scale(0) 
       } 
       to { 
        -webkit-transform: scale(1) 
       } 
      } 

      @keyframes zoom { 
       from { 
        transform: scale(0) 
       } 
       to { 
        transform: scale(1) 
       } 
      } 
      /* The Close Button */ 

      .close { 
       position: absolute; 
       top: 15px; 
       right: 35px; 
       color: #f1f1f1; 
       font-size: 40px; 
       font-weight: bold; 
       transition: 0.3s; 
      } 

      .close:hover, 
      .close:focus { 
       color: #bbb; 
       text-decoration: none; 
       cursor: pointer; 
      } 
      /* 100% Image Width on Smaller Screens */ 

      @media only screen and (max-width: 700px) { 
       .modal-content { 
        width: 100%; 
       } 
      } 
     </style> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script> 
     <script> 
      function obtenerFotos(text) { 
       var apiurl; 
       apiurl = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f0b84fba1c00631410b85b90720f52ba&text=" + text + "&per_page=10&format=json&nojsoncallback=1"; 
       $.getJSON(apiurl, function (json) { 
        $.each(json.photos.photo, function (i, myresult) { 
         var url = 'https://farm' + myresult.farm + ".staticflickr.com/" + myresult.server + '/' + myresult.id + '_' + myresult.secret + '_b.jpg'; 


         $('<img>').attr("src", url).width("400").attr("alt",myresult.title).appendTo("#imageList"); 

         // Get the modal 
         var modal = document.getElementById('myModal'); 

         // Get the image and insert it inside the modal - use its "alt" text as a caption 
         //var img = document.getElementsByClassName('myImg'); 
         var modalImg = document.getElementById("img01"); 
         var captionText = document.getElementById("caption"); 

         // Get the <span> element that closes the modal 
         var span = document.getElementsByClassName("close")[0]; 

         // When the user clicks on <span> (x), close the modal 
         span.onclick = function() { 
          modal.style.display = "none"; 
         } 

         $("img").click(function() { 
          modal.style.display = "block"; 
          modalImg.src = this.src; 
          captionText.innerHTML = this.alt; 
         }); 
        }); 
       }); 
      }; 
     </script> 
    </head> 

    <body> 
     <div id="left_sidebar" class="container"></div> 
     <input type="text" name="a" placeholder="Inserte su texto aqui" id="a"> 
     <button type="button" onclick="obtenerFotos(document.getElementById('a').value)">Buscar</button> 

     <div id="imageList"> 
     </div> 

     <!-- The Modal --> 
     <div id="myModal" class="modal"> 
      <span class="close">&times;</span> 
      <img class="modal-content" id="img01"> 
      <div id="caption"></div> 
     </div> 
    </body> 

    </html>

出典

2017-05-06 14:54:32

ありがとう、この仕事は完璧です、そして、私が説明の中でもっと欲しいのなら、私はmyresult.titleをタグなどで変数に変更できますか？ – Juan

@Juanはい、alt属性にデータを追加できます。それは説明として表示されます。 –

私はFlickrギャラリーを作成したいと思います。画像をクリックすると、画像とそのタグ、テラル、写真IDがポップアップ表示されます。

答えて

関連する問題