jquery图片到同一页面弹出窗口

jquery图片到同一页面弹出窗口,jquery,html,css,Jquery,Html,Css,第一次在这里发帖,不过我偶尔也会关注一些帖子。大家好 有一个快速的问题,我还没有找到在线等的答案。 我有一个我正在分解的模板,用它来再次构建我的站点,使其仅为一个页面,带有调用隐藏子页面的链接。保持简单等等 但是我遇到了一个问题,允许画廊中的图片链接弹出一个页面,而不是原始的.png文件来获取信息。我喜欢.png路径,但我需要放置指向外部页面和视频等的链接,因此需要指向子页面的图片链接,而不是指向.png文件 这里有一个链接[3.4mb的.zip]到实际的模板,您可以下载并使用它来了解我的意思。

第一次在这里发帖,不过我偶尔也会关注一些帖子。大家好

有一个快速的问题,我还没有找到在线等的答案。 我有一个我正在分解的模板,用它来再次构建我的站点,使其仅为一个页面,带有调用隐藏子页面的链接。保持简单等等

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

这里有一个链接[3.4mb的.zip]到实际的模板,您可以下载并使用它来了解我的意思。

我很幸运,这很容易。但我现在不知道该怎么办。花了一段时间寻找答案和测试路线,但没有运气。这就是为什么我要问

谢谢你提前回复

刘易斯·爱德华兹
smokingbunny.co.uk

首先,您需要禁用lightbox插件,以防止您的图片点击运行该功能

删除或注释掉
$('#img_slider li.pic').fancybox({'titlePosition':'inside','overlycolor':'#000')第88行
上的code>

接下来,您可以使用当前的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

  • 子页面策略

    消费精英,在劳动力和劳动力的临时激励下,在价值观上。在vero eos和accusam和justo duo dolores和ea rebum stet clita kasd gubergren,没有任何海洋保护区是属于同一领域的。他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”

    在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦(Stet clita kasd gubergren),没有海洋保护区是属于同一领域的。他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”。在vero eos和accusam以及justo duo dolores和ea Reum。Stet clita kasd gubergren,无海takimata圣地。亨德雷特的两个房间都很宽敞

    消费精英,在劳动力和劳动力的临时激励下,在价值观上,在价值观上。在vero eos和accusam和justo duo dolores和ea rebum stet clita kasd gubergren,没有任何海洋保护区是属于同一领域的。他说:“我的工作是在工作中完成的,我的工作是在工作中完成的,我的工作是在工作中完成的。”


  • 你可以走了!测试/有效。

    不太确定你是否在问这个问题,但这就是我从中得到的。我也无法理解你之前的评论。已经很晚了。你在找一个灯箱类型的图片库,链接到子页面吗?我的意思是,请原谅我疲惫的漫谈。我想让这些图片像侧面链接一样。因此,不要转到.png弹出窗口,而是一个可编辑的[在html中]弹出页面。它目前用于显示.png页面,但我需要它,就像侧边栏链接一样。我之前的工作是我习惯了整个“按enter键发布消息”,请原谅。所以我下载了代码,相信我看到了你想要实现的目标。马上更新我的答案,看看你能不能把它贴上去。人们会对把文件下载到自己的电脑上持怀疑态度。从现在起,我将来会这样做。在某种程度上还是习惯了。我知道人们会有点‘哦,不要相信这一点’
                <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>