Question

第一次在这里发帖，虽然一次又一次地关注了一些帖子。所以，大家好。

得到一个简短的问题，我没有找到在线等的答案。我有一个模板我拆开，使用它再次建立我的网站，使它只有一个页面，链接调用隐藏的子页面。保持简单等。

但是我遇到了一个问题，即允许图库中的图片链接弹出一个页面，而不是原始的.png文件信息。我喜欢.png路线，但是我需要输入外部页面和视频等链接，因此需要链接到子页面，而不是.png文件。

这是一个链接[.zip在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（它将链接的位置）以链接锚点。

    <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。

e.g。

            <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>

你很高兴去！测试/作品。

jquery图片到同一页弹出窗口

刘易斯爱德华兹

1 个答案: