jqueryinstafeedjs

JQuery hover on instafeed.js

I've been working on a Instagram feed for my webpage with instafeed.js (http://instafeedjs.com/).

It works, shows the images and any data I required, but jQuery can't recognize the objects that instafeed.js creates (the ones defined on "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>
Solution

  • The following are some of the issues in your code.

    1.hover function will not bind to dynamic created elements.

    2.hover is also depreciated inted you need to use .on() per the .on() jQuery doc pages.

    3.In your case it is better to use it is better to use mouseenter mouseleave

    Following sample code will help you i had masked the user id and acess-token you need to replace it.

    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>