JQuery hover sur instafeed.js

J'ai travaillé sur un flux Instagram pour ma page Web avec instafeed.js (http://instafeedjs.com/).JQuery hover sur instafeed.js

Cela fonctionne, affiche les images et toutes les données dont j'ai besoin, mais jQuery ne peut pas reconnaître les objets créés par instafeed.js (ceux définis sur "template").

<body> 

    <div id="instafeed"></div> 

    <script> 
     var userFeed = new Instafeed({ 
     get: 'user', 
     userId: '**********', 
     accessToken: '*************************', 
     resolution: 'standard_resolution', 
     template: '<img src="{{image}}"/> <div id="hover"><p>{{caption}}</p></div>' 
     }); 

     userFeed.run(); 
    </script> 

    <script> 
     $("#hover").hover(function(){ 
      $(this).fadeOut(40); 
      $(this).fadeIn(80); 
     }); 
    </script> 

</body>

Source

2017-08-08 Dani Martínez

Voici quelques-uns des problèmes de votre code. La fonction 1.hover ne liera pas aux éléments dynamiques créés.

2.hover est également déprécié et vous devez utiliser .on() pour .on() jQuery doc pages.

3.In votre cas, il est préférable de l'utiliser est préférable d'utiliser mouseentermouseleave

exemple de code vous aidera j'avais masqué l'ID utilisateur et acess-jeton vous devez le remplacer.

var userFeed = new Instafeed({ 
 
    get: 'user', 
 
    userId: '<enter your user id>', 
 
    accessToken: '<enter acess token>', 
 
    resolution: 'standard_resolution', 
 
    template: '<img src="{{image}}"/> <div class="hover"><p>{{caption}}</p></div>' 
 
}); 
 

 
userFeed.run(); 
 

 
$('body').on("mouseenter", ".hover", function() { 
 
    // hover starts code here 
 
    $(this).fadeOut(40); 
 
}); 
 

 
$('body').on("mouseleave", ".hover", function() { 
 
    // hover ends code here 
 
    $(this).fadeIn(80); 
 
});

<div id="instafeed"></div> 
 
</body> 
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/instafeed.js/1.4.1/instafeed.min.js"></script>

Source

2017-08-08 11:26:18

JQuery hover sur instafeed.js

Répondre

Questions connexes