Instafeed.js-Instagram脚本CSS样式不适用于元素

Question

在我的网站上添加了instafeed.js并成功设置了样式。 它是在网站上显示instagram照片的feed。 这正常工作。

这就是我要尝试的操作：现在尝试添加一个突出显示每个图标的翻转功能...

添加了css，然后更改了脚本，它不会像预期的那样响应。

调试，没有错误。

<script type="text/javascript">
    var userFeed = new Instafeed({
        get: 'user',
        userId: 1481598384,
        accessToken: '1481598384.467ede5.3870e3db231943d98eb5c12bc04b1463',
      limit: 10,  
      after: function () {
    var images = $("#instafeed").find('a');
    $.each(images, function(index, image) {
      var delay = (index * 75) + 'ms';
      $(image).css('-webkit-animation-delay', delay);
      $(image).css('-moz-animation-delay', delay);
      $(image).css('-ms-animation-delay', delay);
      $(image).css('-o-animation-delay', delay);
      $(image).css('animation-delay', delay);
      $(image).addClass('animated flipInX');
    });
  },
    });
    userFeed.run();
</script> 


    <center> 
        <div id="instafeed">

          <a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="likes">&hearts; {{likes}}</div></a>


        </div> 
    </center>  

这是CSS：

#instafeed a {
  padding:5px 5px 1px 5px;
  margin:10px;
  border:1px solid #e1e1e1;
  display:inline-block;
  border-radius: 4px;
  position:relative;
}

#instafeed .likes {
  background:rgba(10,100,105,0.8);
  font-family:sans-serif;
  font-size:1em;
  position:absolute;
  color:#fff;
  right:5px;
  top:5px;
  left:5px;
  opacity:0;
  text-align:center;
  line-height:150px;
  text-shadow:0 1px rgba(0,0,0,0.5);
  -webkit-font-smoothing:antialiased;
  -webkit-transition: opacity 100ms ease;
    -moz-transition: opacity 100ms ease;
    -o-transition: opacity 100ms ease;
    -ms-transition: opacity 100ms ease;
    transition: opacity 100ms ease;
}

#instafeed a:hover .likes {
  opacity:1;
}

JSFiddle- http://jsfiddle.net/timsalabim/u7yc810v/

Answer 1

您需要指定instafeed.js应该呈现的template 。 目前，它正在删除您的原始标记： http : //instafeedjs.com/

HTML

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

使用Javascript

var userFeed = new Instafeed({
  get: 'user',
  userId: 1481598384,
  accessToken: '1481598384.467ede5.3870e3db231943d98eb5c12bc04b1463',
  limit: 10,  
  template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="likes">&hearts; {{likes}}</div></a>',
  after: function () {
    var images = $("#instafeed").find('a');
    $.each(images, function(index, image) {
      var delay = (index * 75) + 'ms';
      $(image).css('-webkit-animation-delay', delay);
      $(image).css('-moz-animation-delay', delay);
      $(image).css('-ms-animation-delay', delay);
      $(image).css('-o-animation-delay', delay);
      $(image).css('animation-delay', delay);
      $(image).addClass('animated flipInX');
    });
  },
});

userFeed.run();

示例： http ： //jsfiddle.net/ocnf0z8e/