Javascript 如何实现或创建放大弹出窗口？_Javascript_Jquery Plugins_Magnific Popup

Javascript 如何实现或创建放大弹出窗口？

javascript jquery-plugins

Javascript 如何实现或创建放大弹出窗口？,javascript,jquery-plugins,magnific-popup,Javascript,Jquery Plugins,Magnific Popup,简介：这是一个新手业余设计师提出的问题，他想知道如何正确地创建一个放大弹出窗口。所以，这听起来可能有点愚蠢，但那是因为我是个新手我想知道的：我想知道如何创建一个放大的弹出窗口，其中包括：完整的HTML结构，在哪里放置脚本和脚本需要什么我来StackOverflow之前所做的：花了无数个小时试图实现放大弹出窗口，但毫无结果。我得到的最终结果就是图像，当我点击它时，它会将我重定向到图像的链接来源：这是文档：。这就是我试图创建的：-在Lightbox Gallery部分我尝试过HTM

简介：
这是一个新手业余设计师提出的问题，他想知道如何正确地创建一个放大弹出窗口。所以，这听起来可能有点愚蠢，但那是因为我是个新手

我想知道的：
我想知道如何创建一个放大的弹出窗口，其中包括：完整的HTML结构，在哪里放置脚本和脚本需要什么

我来StackOverflow之前所做的：
花了无数个小时试图实现放大弹出窗口，但毫无结果。我得到的最终结果就是图像，当我点击它时，它会将我重定向到图像的链接

来源：
这是文档：。
这就是我试图创建的：-在Lightbox Gallery部分

我尝试过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>


$（文档）.ready（函数（）{
$（'.popupgallery'）.magnificPopup({
键入：“图像”，
closeOnContentClick：正确，
图片：{
垂直拟合：假
}
});
});

注意：
我还尝试将.js文件放在

之前，以避免产生预期的结果。
我想我错过了什么，我只是不知道是什么。在放大弹出窗口的文档中，有很多我不理解的东西，但我认为它们不相关

我希望外面有人能帮助我回答这个问题

相关查询：

再次感谢！我真的很感激你的想法

只需在jquery函数中添加

delegate:'a'

，并确保img标记包含完整的res图像，而href包含缩略图

$('.popupgallery').magnificPopup({ 
    type: 'image', 
    delegate: 'a', 
    closeOnContentClick: true, 
    image: { 
        verticalFit: false 
    } 
});

尝试将“http:”放在.js文件源的反斜杠之前。还可以尝试使用新版本的jQuery，如下所示：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </ script>

javascript控制台中是否有错误？链接文件（css和js）是否位于正确的目录中？路径正确吗？第三条评论：根据您发布的文档，您只需要使用

a href

。无需在href中添加

img

标记。删除img标记并确保href的路径正确（我注意到它与img中的路径不同：为什么？我假设这是一个错误）。如果有效的话，我会贴出来作为答案。嗯。。你的第二个问题，是从文档中写出来的。我实际上尝试了github css和js（原始）文件，但仍然不起作用。在第3条评论中，是的，链接是正确的。请检查您发布的代码：在href标记内，您有另一个img标记。去掉那个：它不是必需的。关于

magnific popup

文件夹（包含js和css文件），如果您没有下载并将其放置在html文件的同一目录中，显然它不会被包括在内。如果不包括该文件，则粘贴规范中的代码将不起作用。