个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
25
4
简介:
这是一个新手业余设计师提出的关于如何正确创建 Magnific Popup 的问题。所以，这听起来可能有点菜鸟，但那是因为我是新手。
我想知道的:
我想知道如何创建一个 Magnific Popup，其中包括:完整的 HTML 结构、放置脚本的位置以及需要什么脚本。
我在来到 StackOverflow 之前做了什么:
花了无数个小时尝试实现 Magnific Popup，但无济于事。我得到的最终结果只是图像，当我点击它时，它会将我重定向到图像的链接。
来源:
这是文档:http://dimsemenov.com/plugins/magnific-popup/documentation.html .
这就是我要创建的:http://dimsemenov.com/plugins/magnific-popup/ - 在灯箱画廊部分。
我尝试过但失败的 HTML 结构:
<!DOCTYPE html>
<html>
<head>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<!-- jQuery 1.7.2+ or Zepto.js 1.0+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>
</head>
<body>
<div class="popupgallery">
<a href="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_b.jpg" title="The Cleaner"><img src="http://farm9.staticflickr.com/8242/8558295633_f34a55c1c6_s.jpg" width="75" height="75"/></a>
<a href="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_b.jpg" title="Winter Dance"><img src="http://farm9.staticflickr.com/8382/8558295631_0f56c1284f_s.jpg" width="75" height="75"/></a>
<a href="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_b.jpg" title="The Uninvited Guest"><img src="http://farm9.staticflickr.com/8225/8558295635_b1c5ce2794_s.jpg" width="75" height="75"></a>
<a href="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_b.jpg" title="Oh no, not again!"><img src="http://farm9.staticflickr.com/8383/8563475581_df05e9906d_s.jpg" width="75" height="75"></a>
<a href="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_b.jpg" title="Swan Lake"><img src="http://farm9.staticflickr.com/8235/8559402846_8b7f82e05d_s.jpg" width="75" height="75"></a>
<a href="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_b.jpg" title="The Shake"><img src="http://farm9.staticflickr.com/8235/8558295467_e89e95e05a_s.jpg" width="75" height="75"></a>
<a href="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_b.jpg" title="Who's that, mommy?"><img src="http://farm9.staticflickr.com/8378/8559402848_9fcd90d20b_s.jpg" width="75" height="75"></a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.popupgallery').magnificPopup({
type: 'image',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
});
</script>
</body>
</html>
注意:
我还尝试将 .js 文件放在 </body> 之前，再一次，没有产生预期的结果。
我想我错过了什么，我只是不确定是什么。在 Magnific Popup 的文档中，有很多东西我不明白，但我认为它们不相关。
我希望有人能帮助我解决这个问题。
相关查询:
I can't get magnific-popup animations to work
Pop-up not showing (with magnific-popup)
https://stackoverflow.com/questions/16572007/instructions-on-implementing-magnific-popup
再次感谢!非常感谢您的想法!
最佳答案
只需将 delegate: 'a' 添加到您的 jquery 函数中，并确保 img 标签包含完整的 res 图像，而 href 包含缩略图。
$('.popupgallery').magnificPopup({
type: 'image',
delegate: 'a',
closeOnContentClick: true,
image: {
verticalFit: false
}
});
关于javascript - 如何实现或创建 Magnific Popup？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17375713/
25
4
0
我的弹出窗口正常工作，但有时用户会点击浏览器上的后退按钮关闭弹出窗口。 如何让浏览器后退按钮关闭已经打开的“magnific-popup”？ 谢谢 最佳答案 经过一些挖掘发现 history.js 然
我制作了一个带有华丽弹出窗口的视频库。 但与图片库不同的是，视频库不显示计数器，例如1/3 在视频的右下角。为什么不？在图片库中，它运行良好。 视频库代码: $('.gallery_video').e
有没有办法绑定(bind)一个事件回调，以便为 Magnific Popup 的所有实例调用它？在我正在构建的网站上，当主浏览器滚动条消失时，几个元素具有固定位置和“跳转”。我想设置一个回调以在打开任
$.magnificPopup.open({ items: { src: $('#cabinet-msg') }, type:'inline', mid
在 jquery 对话框中我们可以做 $("#id").dialog('open|close') 打开关闭对话框。如何在 Magnific-popup 中做到这一点？ 最佳答案 $.magnificP
无法在放大的弹出窗口中播放视频。 当我使用 class=iframe ，页面将重定向到 youtube 并播放视频。 但是当我使用 class=popup-youtube ，将显示弹出窗口，但我收到以
测试 Magnific Popup 当前是否“打开”的最佳方法是什么？ 检查某个 div 的存在是否会成为 future 的证明？ 例如，如果我使用: if ($(".mfp-ready").leng
我想显示一个 iframe，如 http://chesstao.com/test.php (单击绿色框)。但是我没有看到设置 iframe 高度和宽度样式的方法或类。 HTML: Show ifra
我目前有一个很棒的弹出窗口，在那个弹出窗口中我有一个链接可以打开另一个很棒的弹出窗口。类似的东西: $('.logbook-entry-details').magnificPopup({
我想自定义和定位(替换为自定义图像 jpg/png)箭头和关闭按钮。任何帮助，将不胜感激。 最佳答案 也许有点晚了，但我发现了一些东西:在定位按钮的情况下，magnific-popup 显然不是直接的
我需要 Magnific 来打开带有 verticalFit = true 的图像才能开始。图像是纵向的，需要适合视口(viewport)。但是如果用户点击图像，Magnific 应该将vertica
我的弹出窗口中有一些表单控件，如果表单无效，我希望防止用户关闭它。 我试过这个只是作为测试，但是当用户单击关闭按钮等时，弹出窗口仍然关闭。 $.magnificPopup.open({
我正在尝试使用Magnific-Popup jQuery插件创建一个包含一些图库的页面。我在div中包含不同的部分，具有单独的ID和包含图像的.gallery类。 Some content
当 TinyMCE(或任何其他所见即所得编辑器)在 Magnific-Popup 中初始化时，它可以毫无问题地工作，您可以编辑和格式化 HTML。但是，当您单击添加链接或添加图像按钮时，TinyMCE
如何将 magnific-popup 画廊限制为直接 sibling ？当我打开第一个 .child 中的图像时，我不希望第二个 .child 中的图像出现在图库中。 html结构:
我正在使用 Magnific 弹出窗口显示一个上传表单，用户可以在其中选择多个图像进行上传并在提交表单之前预览它们，我让用户预览图像并在他单击图像下方添加一个输入输入标题和它的替代品，这是我拥有的代码
我最近刚刚实现了“Magnific Popup”并且弹出窗口很好，但是当我单击一个输入框时，整个弹出窗口消失回到父页面。在插件网站上显示的示例中，整个对话框都是可单击的，直到您在该框外单击。 我希望它
我在我的网站上放了 magnific popup，以在图库中显示图像。我喜欢这个工具，除了一件事。换图的箭头显示在屏幕的侧面，当你有大屏幕和大分辨率时，这有点不切实际。所以我想问一下是否可以在图像内移
对于每个 有 mfp-ajax类会作为弹出框执行，这个弹出框使用了Magnific-Popup中的插件。 HTML: View List Javascript: magnificSetting: {
我有一个视频链接，我想使用Magnific在弹出窗口中打开它，但是单击它时，它只是链接到Youtube网址。我怀疑未读取某些JS代码，但返回的错误为0。 目前，我的div如下所示: 我的JS函数
我是一名优秀的程序员,十分优秀！