VueJS Instafeed template ignored on specific images

235 Views Asked by At

absolute beginner at using Vue here. I've been asked to convert a PHP site to VueJS and I have enjoyed the chance to start learning a JS framework. However - I'm having a single strange issue.

One of my Vue components is a Gallery page, which pulls thumbnails from an instagram account. This is done using "instafeed.js". This is working very nicely except that, my template is not applied to a couple of the images for some reason.

Gallery.vue :

<template>
  <div class="container">
    <div id="instafeed"></div>
  </div>
</template>

<script>
import $ from 'jquery'
import Instafeed from 'instafeed'

var userFeed = new Instafeed({
  get: 'user',
  userId: 'USER-ID',
  accessToken: 'ACCESS-TOKEN',
  limit: 25,
  imageTemplate: '<a href="{{link}}" target="_blank" id="{{id}}"><img src="{{image}}" /></a>',
  onAfter: 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()

This will apply the template to each image returned. You can see I have a limit of 21 images. Each image will look like this:

<a href="INSTAGRAM-POST-LINK" target="_blank" id="ID" class="animated flipInX" style="animation-delay: 0ms;">
    <img src="IMG-LINK-HERE"/>
</a>

However, for some reason, images 4, 6, 8 12, 16, 19, 21 are being loaded without the anchor tag.

<img src="IMG-LINK-HERE"/>

I have no idea what could be causing this, and this doesn't occur on the PHP version of the site. Anyone have any ideas?

0

There are 0 best solutions below