Javascript 如何获得放大弹出窗口，以便在一个动态库中同时显示图像和iframe视频？_Javascript_Jquery_Iframe_Plugins_Magnific Popup

Javascript 如何获得放大弹出窗口，以便在一个动态库中同时显示图像和iframe视频？

javascript jquery iframe plugins

Javascript 如何获得放大弹出窗口，以便在一个动态库中同时显示图像和iframe视频？,javascript,jquery,iframe,plugins,magnific-popup,Javascript,Jquery,Iframe,Plugins,Magnific Popup,我正在使用放大弹出窗口通过以下方式创建图像库： $('.main-content').magnificPopup({ delegate: '.gallery', // child items selector, by clicking on it popup will open type: 'image', gallery: {enabled:true} // other options }); 我也有一个视频嵌入使用以下： $('.video').magnificPopup(

我正在使用放大弹出窗口通过以下方式创建图像库：

$('.main-content').magnificPopup({
  delegate: '.gallery', // child items selector, by clicking on it popup will open
  type: 'image',
  gallery: {enabled:true}
  // other options
});

我也有一个视频嵌入使用以下：

$('.video').magnificPopup({
    type: 'iframe',
    iframe: {
      markup: '<div class="mfp-iframe-scaler">'+
                '<div class="mfp-close"></div>'+
                '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
              '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button

      patterns: {
        youtube: {
          index: 'youtube.com/', // String that detects type of video (in this case YouTube). Simply via url.indexOf(index).

          id: 'v=', // String that splits URL in a two parts, second part should be %id%
          // Or null - full URL will be returned
          // Or a function that should return %id%, for example:
          // id: function(url) { return 'parsed id'; } 

          src: '//www.youtube.com/embed/%id%?autoplay=1' // URL that will be set as a source for iframe. 
        },
        vimeo: {
          index: 'vimeo.com/',
          id: '/',
          src: '//player.vimeo.com/video/%id%?autoplay=1'
        },
        gmaps: {
          index: '//maps.google.',
          src: '%id%&output=embed'
        }

        // you may add here more sources

      },

      srcAction: 'iframe_src', // Templating object key. First part defines CSS selector, second attribute. "iframe_src" means: find "iframe" and set attribute "src".
    }

});

$（'.video'）。放大弹出窗口({
键入：“iframe”，
iframe：{
标记：“”+
''+
''+
“”，//弹出窗口的HTML标记，`mfp close`将替换为close按钮
模式：{
youtube：{
索引：“youtube.com/”，//检测视频类型的字符串（在本例中为youtube）。只需通过url.indexOf（索引）即可。
id:'v='，//将URL分成两部分的字符串，第二部分应为%id%
//或null-将返回完整的URL
//或应返回%id%的函数，例如：
//id:function（url）{return'parsed id'；}
src:'//www.youtube.com/embed/%id%？autoplay=1'//URL，该URL将设置为iframe的源。
},
维梅奥：{
索引：“vimeo.com/”，
id:“/”，
src:“//player.vimeo.com/video/%id%？自动播放=1”
},
GMAP：{
索引：'//maps.google'，
src:'%id%&output=embed'
}
//您可以在这里添加更多来源
},
srcAction:'iframe\u src'，//模板化对象键。第一部分定义CSS选择器，第二个属性。“iframe\u src”的意思是：查找“iframe”并设置属性“src”。
}
});

如何将视频iframe合并到库中？我无法使用项目数组，因为我的图像和视频是动态的

谢谢

我解决了这个问题如下

$('.video').each(function(){

var items = [];
var temp_count = 0;

$('.img_container a').each(function(){
    if($(this).attr('class') == 'video'){
        items.push({
            src:$(this).attr('href'),
            type:'iframe'
        });
        temp_count = temp_count +1;
    }else{
        items.push({
            src:$(this).attr('href'),
            type:'image',
            tLoading: '', 
            removalDelay: 500
        });
        temp_count = temp_count +1;
    }

});

$('.img_container a').each(function(index2, element){    
    $(this).magnificPopup({
        items:items,
        midClick:true,
        index: parseInt(index2),
        gallery: {
            enabled: true
        }
    }); 
});
});

$（'.magnific gallery'）。每个（函数（index1，元素）{/.magnific gallery=/.gallery var项目=[]； var temp_计数=0

$('.img_container a').each(function(){
    if($(this).attr('class') == 'video'){
        items.push({
            src:$(this).attr('href'),
            type:'iframe'
        });
        temp_count = temp_count +1;
    }else{
        items.push({
            src:$(this).attr('href'),
            type:'image',
            tLoading: '', 
            removalDelay: 500
        });
        temp_count = temp_count +1;
    }
});



$('.img_container a').each(function(index1, element){   
    $(this).magnificPopup({`enter code here`
        items:items,
        midClick:true,
        index: parseInt(index1),
    //  index: 4,
        gallery: {
            enabled: true
        }
    }); 
});

}))

我希望你能根据上面的代码处理你的问题

这里有一个简单的解决方案：

$('.image-link, .video-link').magnificPopup({
    callbacks: {
      elementParse: function(item) {
         // the class name
         if(item.el.context.className == 'video-link') {
           item.type = 'iframe';
         } else {
           item.type = 'image';
         }
      }
    },
    gallery:{enabled:true},
    type: 'image',
});

它应该与类型格式化程序一起使用。

您可以使用

mfp type

CSS类定义库项目的类型。因此，在本例中，您将向指向视频的锚定标记添加

mfp iframe

，插件将处理其余部分

HTML:

<div class="gallery">
  <!-- Image -->
  <a href="https://www.example.com/image-fullsize-1.jpg">
     <img src="https://www.example.com/image-thumbnail-1.jpg" alt="">
  </a>

  <!-- Video item with mfp-iframe class -->
  <a href="https://www.example.com/video-url" class="mfp-iframe">
     <img src="https://www.example.com/video-thumbnail.jpg" alt="">
  </a>

  <!-- Image -->
  <a href="https://www.example.com/image-fullsize-2.jpg">
     <img src="https://www.example.com/image-thumbnail-2.jpg" alt="">
  </a>

  <!-- Image -->
  <a href="https://www.example.com/image-fullsize-3.jpg">
     <img src="https://www.example.com/image-thumbnail-3.jpg" alt="">
  </a>
</div>

$('.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 '';
                }
            }
        }
    );

JS:

<div class="gallery">
  <!-- Image -->
  <a href="https://www.example.com/image-fullsize-1.jpg">
     <img src="https://www.example.com/image-thumbnail-1.jpg" alt="">
  </a>

  <!-- Video item with mfp-iframe class -->
  <a href="https://www.example.com/video-url" class="mfp-iframe">
     <img src="https://www.example.com/video-thumbnail.jpg" alt="">
  </a>

  <!-- Image -->
  <a href="https://www.example.com/image-fullsize-2.jpg">
     <img src="https://www.example.com/image-thumbnail-2.jpg" alt="">
  </a>

  <!-- Image -->
  <a href="https://www.example.com/image-fullsize-3.jpg">
     <img src="https://www.example.com/image-thumbnail-3.jpg" alt="">
  </a>
</div>

$('.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 '';
                }
            }
        }
    );

$（'.gallery'）。放大弹出窗口(
{
代表：“a”，
键入：“图像”，
t加载：“正在加载图像#%curr%…”，
mainClass:'mfp img mobile'，
画廊：{
启用：对，
NavigateByMgClick:true，
预加载：[0,1]//将在当前映像之前预加载0，在当前映像之后预加载1
},
图片：{
恐怖：“无法加载。”，
标题RC：功能（项目）{
返回“”；
}
}
}
);

更多信息可在文档中找到：

/*参考：https://gist.github.com/hirejordansmith/1ac659aadc1d720f505b28a1540d6547#file-放大弹出式多媒体资料图像加视频js*/
$（“.popup-youtube”）.removeAttr（'class'）.attr（'class'，'popup-youtube'）；
$（'.popup gallery'）.magnificPopup({
代表：“a”，
键入：“图像”，
t加载：“正在加载图像#%curr%…”，
mainClass:'mfp img mobile'，
画廊：{
启用：对，
NavigateByMgClick:true，
预加载：[0,1]//将在当前映像之前预加载0，在当前映像之后预加载1
},
图片：{
恐怖：“无法加载。”，
/*标题RC：功能（项目）{
返回项目.el.attr（'标题'）+'由Marsel Van Oosten'编写；
}*/
},
回调：{
elementParse:函数（项）{
//类名
如果（item.el.context.className=='popup youtube'）{
item.type='iframe'；
}否则{
item.type='image'；
}
}
},
});

完整的工作示例只需复制并运行代码即可。（根据您的代码更改类名）

我在元素上有多个CLASEE<代码>如果（item.el.context.classList.contains（'video-link'）{item.type='iframe'；}否则{item.type='image'；}对我有效