플리커 갤러리를 만들고 이미지를 클릭하면 팝업 이미지와 태그, 테틀, 사진 ID가 표시됩니다.

Page´s photo 안녕하세요, js와 html로 flickr API를 만들 때 삼중입니다. 사진을 검색하고 html로 보여 주지만 사진을 클릭하면 팝업, 설명, 태그, 사진 ID로 팝업에 나타납니다.플리커 갤러리를 만들고 이미지를 클릭하면 팝업 이미지와 태그, 테틀, 사진 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(); 
         });

하지만 나던 일이 팝업에서 사진을 보여 해달라고과 설명을 표시 해달라고, 제목 내 코드입니다

, 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 예 u alt 속성에 더 많은 데이터를 추가 할 수 있습니다. 설명으로 표시됩니다. –

플리커 갤러리를 만들고 이미지를 클릭하면 팝업 이미지와 태그, 테틀, 사진 ID가 표시됩니다.

답변

관련 문제