magnific-popup 相关问题

Magnific Popup是一个响应式灯箱和对话脚本,专注于性能,并为用户提供任何设备(jQuery或Zepto.js)的最佳体验。

放大弹出窗口无法在移动设备上运行

放大的弹出窗口似乎在桌面甚至 Android 手机上运行良好,但在 iPhone 上它显示消息“此网页出现问题,因此已重新加载”并且无法播放 Vimeo...

回答 3 投票 0

无法删除youtube中的相关视频

我嵌入了带有 magnificpopup 脚本的视频。 我无法在嵌入的 youtbe 复制结束时删除相关视频。 这是我尝试过的代码: 我嵌入了带有 magnificpopup 脚本的视频。 我无法在嵌入的 youtbe 复制结束时删除相关视频。 这是我尝试过的代码: <a class="popup-youtube" href="https://www.youtube.com/watch?rel=0&feature=player_detailpage&v=83UHRghhars"> 但不起作用。 以下代码也不重现视频 <a class="popup-youtube" href="https://www.youtube.com/watch?feature=player_detailpage&v=83UHRghhars&rel=0"> 如果我输入 youtube 告诉我的嵌入代码: //www.youtube.com/embed/83UHRghhars?rel=0 视频无法播放。我做错了什么? 这是一种通过添加额外的 JavaScript 来实现此目的的方法,如此处所示。 <script> jQuery(window).load(function(){ jQuery('a[href*="youtube.com/watch"]').magnificPopup({ type: 'iframe', iframe: { patterns: { youtube: { index: 'youtube.com', id: 'v=', src: '//www.youtube.com/embed/%id%?rel=0&autoplay=1' } } } }); }); </script> 如果不需要,可以删除“&autoplay=1”。 这里有一个问题。我做了这个解决方法。 $('.js-home-video .js-popup-youtube').magnificPopup({ // your default config here // All below settings are default except the rel attribute in youtube-src // This is here to remove the related videos from showing up after the video ends // Adding rel=0 from url in html template stopped autoplay, hence this hack 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&rel=0' // URL that will be set as a source for iframe. } } } } 如果您使用的是混合图库(例如混合的图像和视频之一),那么您可能想要覆盖放大弹出窗口构建 YouTube 嵌入的方式。 youtube 的默认设置是 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. } 这意味着 ID 是 v= 之后的所有内容,它只是在创建嵌入代码时将其保留并在末尾粘贴 autoplay=1 。 要更改此设置,您可以传入要使用的任何特殊 iframe youtube 模式: iframe: { patterns: { youtube: { src: '//www.youtube.com/embed/%id%?autoplay=1&amp;rel=0&amp;feature=player_detailpage' } } } 在这里,我们调整了源代码,以便它将正常使用 id 构建嵌入,然后粘贴您的 rel 和特征参数(以及自动播放) 如果这样做,则将参数保留在 html 标记中的 url 中,或者在末尾设置 v= 属性,以便在构建嵌入 url 时不会添加额外的参数。 最终的外观可能是这样的: $('.gallery-list').magnificPopup({ delegate: 'a', type: 'image', gallery: { enabled: true }, iframe: { patterns: { youtube: { src: '//www.youtube.com/embed/%id%?autoplay=1&amp;rel=0' } } } }); 你的元素可能是: <div class="gallery-list"> <a class="popup-youtube mfp-iframe" href="https://www.youtube.com/watch?v=83UHRghhars">Click here</a> <img class="mfp-image" href="http://domain/image.jpg" width="100" height="200" /> </div> 视频链接上的 mfp-iframe 类告诉 magnific 使用 iframe 功能。 上面的初始化代码告诉 magnific 默认使用图像,但 mfp-iframe css 类将覆盖视频的该类。 现在,当有人点击视频时,放大的弹出窗口应该通过 v= 参数获取视频 id,然后使用该 id 构建嵌入代码,然后附加额外的自动播放和 rel url 参数。 转到 jquery.magnific-popup.min.js 或 jquery.magnific-popup.js,无论您在网站上嵌入什么内容。 使用文本编辑器搜索和替换,如下所示: Search: youtube.com/embed/%id%?autoplay=1<br> Replace: youtube.com/embed/%id%?rel=0&autoplay=1 点击“保存”。 瞧

回答 4 投票 0

不公开视频的 Vimeo 嵌入(2023 更新)

Vimeo 最近更新了他们的嵌入代码的工作方式。 (“从 Vimeo 隐藏”隐私设置现在位于“不公开”下。)由于此更改,我的视频将无法再在 Magni 中播放...

回答 0 投票 0

如何在同一个页面打开两个华丽的弹窗?

我有两个弹出模式,一个用于查询,另一个用于时事通讯订阅。让时事通讯订阅表单出现在查询表单弹出表单之后。 我已经为 newsl 使用了设置超时...

回答 0 投票 0

Magnific Popup - 打开视频时出错

无法在华丽的弹出窗口中播放视频。 当我使用 class=iframe 时,页面将重定向到 youtube 并播放视频。 但是当我使用 class=popup-youtube 时,弹出窗口会显示,...

回答 5 投票 0

如何在Angular中使用 "magnific-popup"?

我已经在这里几乎成功地实现了Magnific弹出式:https:/github.comorchidea90Popup https:/orchidea90.github.ioPopup,但我需要一个帮助我的.ts文件。如何让它更简单...

回答 1 投票 -1

循环中的多个Magnific弹出窗口只显示最后一项的内容。

我正在使用这个功能通过Magnific Popup在灯箱中显示youtube视频。我得到.video-youtube链接的id,为任何链接创建一个动态iframe。在这个页面中,我有3个不同的...。

回答 1 投票 2

在视频弹出窗口下方添加一些文字

我想在 "我的视频 "下面添加一些文字,就像例图一样。我怎么做呢?我的代码: $(document).ready(function) $(document).ready(function () { $.magnificPopup.open({ items:[{ ...

回答 2 投票 2

无法使用“宏指令”弹出窗口显示图像

我有以下代码,图像弹出窗口不显示任何内容。我究竟做错了什么? $('span.confluence-embedded-file-wrapper')。magnificPopup({type:'image'});和HTML代码:

回答 1 投票 0

用于在wordpress页面上显示youtube视频的壮观弹出窗口

(我正在使用此功能通过Magnific Popup功能custom_magnificpopup(){?> (function($){$(document).ready(function(){$(...] >

回答 1 投票 0

Magnific popup html page scroll top problem

我在网站上使用了巨大的弹出窗口。当我单击图像时,它会在弹出窗口中调用另一个(第二个)html页面,并且效果很好。我的问题是,当弹出窗口打开时,我要滚动...

回答 1 投票 0

Magnific Popup后备图像源

如何使用具有备用图片格式的大型弹出式窗口?我想对所有支持webp的浏览器使用webp,但是将jpeg作为后备。我想将我的页面部署在gitlab页面上,这就是为什么...

回答 1 投票 0



magnific-popup基本实现不起作用

我正在尝试在页面上实现magnific-popup(在官方示例中为“单个图像灯箱”)的最基本示例,但我无法使其正常工作-在缩略图上单击时,它只是.. 。

回答 1 投票 1

Bootstrap模态中的Magnific-Popup

我正在使用Bootstrap的模式来渲染某些内容。在此内容中,我有一个视频链接,并且我正在使用jQuery插件Magnific-Popup打开此视频。但是当我进入模态时,单击...

回答 2 投票 1

关闭,通过API打开新的放大弹出窗口

通过一项功能,我试图关闭当前打开的Magnific弹出窗口,然后打开一个新窗口。我所拥有的是带有自定义标题的图像库,其中包含链接。链接关闭...

回答 2 投票 1

我的放大模式图像没有关闭按钮

我希望使用Magnific Popup v1.1.0来允许用户放大我网页上的图像。我的最初测试似乎很积极,但是我注意到没有封闭的框。我已经下载了Magnific Popup CSS ...

回答 2 投票 0

弹出窗口中的站点速度图像缓存

我正在创建一个网站,该网站会在首次加载时加载一些图像,然后,如果用户单击其中一个图像,则同一图像会在弹出窗口中打开,但会更大(放大)。我的问题是,只使用...

回答 1 投票 0

以大的弹出窗口显示动态内容

我正在尝试进行动态内容放大弹出。这是我当前的代码。 if($ queryResult> 0){而($ row = mysqli_fetch_assoc($ result)){echo“ ]

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.