jquery图片到同一页面弹出

Question

第一次在这里发帖，不过时常关注一些帖子。所以，大家好。

有一个快速问题，我还没有找到在线等的答案。我有一个模板，我正在拆开，用它来重新构建我的网站，使它只有一个页面，并带有调用隐藏子页面的链接。保持简单等等。

但是我遇到了一个问题，允许画廊中的图片链接弹出一个页面，而不是原始的 .png 文件来获取信息。我喜欢 .png 路径，但我需要放置外部页面和视频等的链接，因此需要图片链接到子页面，而不是 .png 文件。

这里有一个指向实际模板的链接 [.zip at 3.4mb]，您可以下载并使用它来了解我的意思。 http://www.smokingbunny.co.uk/downloads/cream%20template.zip

很可能，我很幸运，这很容易。但我只是不知道现在该怎么办。花了一段时间寻找答案和测试路线，但没有运气。所以这就是我问的原因。

提前感谢任何答案

刘易斯·爱德华兹

smokingbunny.co.uk

Answer 1

首先，您需要禁用灯箱插件以防止您的图片点击运行该功能。

删除或注释掉 $('#img_slider li .pic').fancybox({'titlePosition': 'inside', 'overlayColor':'#000'});在 line 88的 scripts.js

接下来，您可以使用当前的 picHold div 链接到您的子页面。添加一个 ID/href(它将链接到的位置)以链接 anchor 。

    <div class="picHold">
<a id="mySubpage" class="pic" rel="Appendix" href="#!/mySubpage"><span class="zoomSp"></span><img src="images/galleryIcon1.jpg" alt=""></a>
</div> 

然后复制您的其他内容容器 (li) 并为其提供新创建的 ID。

例如

            <li id="mySubpage">
                   <div class="box">
                        <div class="closePlane">
                            <a class="closeButton" href="#!/pageGallery"><img src="images/closeIcon.png" alt=""></a>
                     </div>
                    <div class="containerContent">
                    <h2>Subpage Policy</h2>
                        <div class="col1">
                            <div class="Btns1">
                                <a href="#" class="upBtn"></a>
                                <a href="#" class="downBtn"></a>
                            </div>
                            <div class="scroll1">

                                <p class="padBot4">Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                                <p class="padBot4">At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus. Duis autem vel eum iriure dolor in hendrerit.</p>
                                <p>Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
                            </div>
                        </div> 
                    </div>
               </div>
            </li>   

然后你就可以开始了!测试/工作。