Photos de survol de Flickr

J'essaye de créer une liste de photos, et quand vous les survolez, elles devraient agrandir. Cependant, pour une raison quelconque, je ne peux pas les agrandir. J'ai ajouté une photo en haut avec la même classe qui agrandit, donc je suis confus.Photos de survol de Flickr

<!doctype html> 
<html lang="en"> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script> 

<!-- initalisation 
var url = "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=8489f42538c845c42b590276f04d6d5b&per_page=15"; 
var tags = $("input[type='radio'][name='radio']:checked").val(); 
getPictures(); 
var src; 

<!-- handles the radio button input then calls getPictures 
$("input[name='radio']").change(function(){ 
    tags = $("input[type='radio'][name='radio']:checked").val(); 
    $('#images').empty(); 
    getPictures(); 
}); 

<!-- jQuery function to get the flickr photos 
function getPictures() 
{ 
    $.getJSON(url + "&tags=" + tags + "&format=json&jsoncallback=?", function(data){ 
     $.each(data.photos.photo, function(i,item){ 
      <!-- return 3 columns 
      if(i % 3 == 0 && i != 0) 
       $("#images").append("<br />"); 

      src = "http://farm"+ item.farm +".staticflickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret +"_m.jpg"; 
      var image = $("<img class='resize'/>").attr("src", src); 
      var imagelink = "http://www.flickr.com/photos/" + item.owner + "/" + item.id + "/"; 
      var link = $("<a>").attr("href", imagelink); 
      link.append(image); 
      $("body").append(link); 

     }); 
    }); 

} 

$(document).ready(function(){ 
    $('.resize').mouseenter(function() 
      { 
       $(this).animate({width: "30%", height: "30%"}, 'slow'); 
      }); 

    $('.resize').mouseleave(function() 
    { 
     $(this).animate({width: "10%"}, 'fast'); 
    }); 
}); 

</script> 
</head> 
<body> 
<form> 
    <input type="radio" name="radio" value="HTML5"> HTML5 Apps<br> 
    <input type="radio" name="radio" value="Hybrid" checked> Hybrid Apps<br> 
    <input type="radio" name="radio" value="Native"> Native Apps<br> 
</form> 
<img src="http://www.lindanieuws.nl/cache/img/c-500-280/wp-content/uploads/2014/09/hh-41198294-e1411643634795.jpg" class="resize"/> 
<div id="images" position="absolute"></div> 



</body> 
</html>

Source

2016-02-26 Cake

Vous insérez vos images .resize dynamiquement, ce qui signifie qu'ils sont apparus après la page a été chargée. Afin de faire un auditeur pour les événements, utilisez ce qui suit:

$('body').on('mouseenter', '.resize', function(){ 
    ... 
})

Et la même chose pour mouseleave.

Source

2016-02-26 13:19:31

Ah génial, qui l'a réparé. Merci! – Cake

Photos de survol de Flickr

Répondre

Questions connexes