我正在使用大胆的弹出窗口通过以下方式创建图片库:
$('.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".
}
});
如何将视频iframe合并到图库中?我无法使用items数组,因为我的图片和视频是动态的。
由于
答案 0 :(得分:9)
这是我用过的一个简单的解决方案:
$('.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',
});
它应该适用于类型格式化程序。
答案 1 :(得分:2)
您可以使用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>
<强> JS:强>
$('.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 '';
}
}
}
);
更多信息可在文档中找到:
http://dimsemenov.com/plugins/magnific-popup/documentation.html#content-types
答案 2 :(得分:0)
我解决了这个问题如下。
$('.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')。each(function(index1,element){// .magnific-gallery = //.gallary 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(index1, element){
$(this).magnificPopup({`enter code here`
items:items,
midClick:true,
index: parseInt(index1),
// index: 4,
gallery: {
enabled: true
}
});
});
});
我希望您能根据以上代码处理您的问题。
答案 3 :(得分:0)
/*reference : https://gist.github.com/hirejordansmith/1ac659aadc1d720f505b28a1540d6547#file-magnific-popup-gallery-image-plus-video-js */
$(".popup-youtube").removeAttr('class').attr('class','popup-youtube');
$('.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 item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
}*/
},
callbacks: {
elementParse: function(item) {
// the class name
if(item.el.context.className == 'popup-youtube') {
item.type = 'iframe';
} else {
item.type = 'image';
}
}
},
});
完整的工作示例只需复制并运行代码。(根据您的代码更改类名)