Javascript 放大弹出窗口-不使用旧模板

我正准备把我的笔记本电脑扔出窗外，为这件事感到沮丧。无论我尝试做什么，我都完全无法让这个弹出窗口在本地工作，也无法从网络上运行。我试图通过点击一张图片来创建一个图库弹出窗口（就像看一本杂志，这正是我的客户想要的，我的想法是点击封面，弹出杂志中的页面）。此时，我还没有在脚本下添加箭头或关闭选项，因为我想先让它工作

但不管我怎么做，图像总是在新页面中链接到自身，而不会启动弹出窗口。我使用的模板运行的是较旧版本的JQuery（1.7），不幸的是，尝试将其更新为1.9.1超出了我的经验水平。但是，我确保包含jQuery1.9.1的链接以及jQueryMigrate1.2.1

非常感谢您的帮助

HTML

---

你能给我们看看你的jquery

标签吗？1.7和1.9版本都打开了吗？你是在闲逛jquery之后调用迁移插件的吗？同时检查浏览器的控制台（Ctrl+Shift+J）是否有任何错误errors@koala_dev-图像调用的JQuery在上面的“Java”下列出。至于实际的脚本，我使用的是从github获得的放大弹出窗口（此处：）的未更改版本。我确实收到了一个错误-时间戳：9/14/13 2:50:05 PM错误：TypeError:$（…）。放大弹出窗口.open不是函数源文件：file:///PUBLIC%20HTML/New%20Site%202/publications/index.html 第171行：不确定如何纠正。非常感谢您的回复，期待您的回复。我指的是加载jquery库的

标记，您提到您正在升级到1.9.1，我只是想确保您删除了旧的1.7版本，并且在jquery之后包含迁移插件，关于错误，您用来初始化插件的语法似乎是错误的，请检查。您可以在元素上初始化它或直接调用

open（）

方法，尝试将代码更改为

$（“#open-805”）。放大弹出窗口({

也就是说，删除

.open

@koala_dev-非常感谢您的帮助。打开确实是个问题，但是我仍然安装了jquery 1.7.1。删除它并（本地）切换到1.9.1使整个工作正常。非常感谢！

<div class="services-info">
        <div class="items-wrap clearfix">
            <table class="pub-layout">
                <tr>
                    <td>
                        <div class="item">
                            <a id="open-805" href="assets/publications/805/805_cover.jpg" data-mfp-src="assets/publications/805/805_cover.jpg" class="item-link">
                                <div class="overlay"></div>
                                <img src="assets/publications/805/805_cover.jpg" width="150px" height="200px" alt="">
                            </a>
                        </div>

<script type="text/javascript">
  $(document).ready(function() {
    $('#open-805').magnificPopup.open({
        items: [
        { src: 'assets/publications/805/805_cover.jpg' },
        { src: 'assets/publications/805/scan1.jpg' },
        { src: 'assets/publications/805/scan3.jpg' },
        { src: 'assets/publications/805/scan4.jpg' },],
        gallery: {
            enabled: true
        },
        type: 'image' // this is default type
        });
    });
                            </script>

.items-wrap:after, 
.items-wrap:before {
display: table;
line-height: 0;
content: '';
}

.items-wrap:after {
clear: both;
}

.items-wrap .item {
float: left;
padding-left: 50px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}

.items-wrap {
margin: 0 -10px;
position: relative;
}

.items-wrap .item .item-link {
display: block;
position: relative;
}

.items-wrap .item .item-link .overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
-webkit-transition: opacity .2s ease;
-moz-transition: opacity .2s ease;
transition: opacity .2s ease;
}

.lt-ie9 .items-wrap .item .item-link .overlay {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFFFFF,endColorstr=#7FFFFFFF)";
display: none;
}

.items-wrap .item .item-link .overlay:after, 
.items-wrap .item .item-link .overlay:before {
content: '';
position: absolute;
width: 10px; height: 10px;
top: 50%; left: 50%;
border: 3px solid #FFF;
}

.items-wrap .item .item-link .overlay:after {
margin-top: -10px;
margin-left: -10px;
border-width: 0 1px 1px 0;
}

.items-wrap .item .item-link .overlay:before {
margin-bottom: -10px;
margin-right: -10px;
border-width: 1px 0 0 1px;
}

.items-wrap .item:hover .item-link .overlay {
opacity: 1;
}

.lt-ie9 .items-wrap .item:hover .item-link .overlay {
display: block;
}