我正在尝试使用Instafeed.js从Instagram捕获图像和视频到Swiper Slider和onclick事件中,我已经设法通过MagnificPopup.js在弹出窗口中打开图像。但是,我也无法显示视频,而只能显示图像。有谁知道一种更好的方法来在滑块中显示来自Instagram的图像和/或视频并将其显示在弹出画廊中? 我希望能在弹出窗口中显示视频时有所帮助。 这是我的代码:
$(document).ready(function($) {
var userFeed = new Instafeed({
get: 'user',userId: 'USERID',limit: 100,resolution: 'standard_resolution',accessToken: 'accESS_TOKEN',sortBy: 'most-recent',template: '<div class="swiper-slide instaimg popup-gallery"><a href="{{image}}" title="{{caption}}" target="_blank" id="{{id}}"><span class="overlay-insta"><span class="overlay-txt"><i class="fa fa-heart-o fa-lg-insta"></i><span class="overlay-txt-lg">{{likes}}</span><br><br>@{{model.user.username}}</span></span><img src="{{image}}" alt="{{caption}}" class=""/></a></div>',after: function () {
var swiper5 = new Swiper('.swiper5',{
autoHeight: true,spaceBetween: 0,//pagination: {
//el: '.swiper-pagination',//clickable: true,//},loop: true,speed:2000,autoplay: {
delay: 3000,},// Default parameters
slidesPerView: 3,spaceBetween: 10,breakpoints: {
1024: {
slidesPerView: 3,spaceBetween: 5,768: {
slidesPerView: 2,480: {
slidesPerView: 2,320: {
slidesPerView: 2,}
}
});
}
});
userFeed.run();
});
$(document).ready(function ($) {
// This will create a single gallery from all elements that have class "gallery-item"
$('.popup-gallery').magnificPopup({
delegate: 'a',type: 'image',tLoading: 'Loading image #%curr%...',mainClass: 'mfp-img-mobile',gallery: {
enabled: true,navigateByImgClick: true,preload: [0,1] // Will preload 0 - before current,and 1 after the current image
},image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',titleSrc: function(item) {
return '<br>'+'<a href="https://www.instagram.com/username/" target="_blank"><i class="fa fa-instagram fa-lg-insta"></i> <span class="follow">Follow Us</span></a>'+'<br><br>' + item.el.attr('title');
}
}
});
});
https://github.com/DannaB67/INSTAFEED-AND-MAGNIFICPOPUP-TO-DISPLAY-VIDEOS-AND-IMAGES