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?