jquery - 使用图像中的链接时无法让 fancybox 工作

Question

所以，我试图让这张图片显示在花哨的框 View 中，然后当你点击图片时，它会下载一个文件。但!当我的图像在 img 标签周围有 anchor 时，花式框效果将不起作用。

页面如下:

点击查看我的简历横幅，它会显示 2 张简历图片。我希望能够单击其中任何一个，它将下载我的文件。但是我说过，当我这样做时，花哨的盒子不会让我点击横幅。

Answer 1

您正在 a#linkTo 上调用 .fancybox()。当 Fancybox 在您指向的 anchor 内找到链接时，它会将您的 anchor (#linkTo) 的内容删除到 DOM 中的其他位置。这大概是为了便于使用。在您的情况下，您希望 #workTag 保留在链接中。因此，如果您在 anchor 之外删除您的 fancybox 内容 (#whichResume)，Fancybox 应该会自动找到 ID 为 #whichResume 的内容，因为您的 href 指向它。你不需要它在你的链接中。

改变这个:

<a id="linkTo" href="#whichResume">     
    <div id="workTag">       
        <div id="whichResume" style="background:white;" class="roundedCorners">     
            <a href="images/icons/document_pdf.png">
                <img src="images/resumeTHUMB/graphicResumeTHUMB.jpg" class="graphic" />
            </a>       
            <a href="images/icons/document_pdf.png">
                <img style="margin-left:50px;" src="images/resumeTHUMB/typeResumeTHUMB.jpg" class="type"/>
            </a>       
        </div>   
    </div>  
</a>

对此:

<a id="linkTo" href="#whichResume">     
    <div id="workTag"></div>  
</a>

<div id="whichResume" style="background:white;" class="roundedCorners">     
    <a href="images/icons/document_pdf.png">
        <img src="images/resumeTHUMB/graphicResumeTHUMB.jpg" class="graphic" />
    </a>       
    <a href="images/icons/document_pdf.png">
        <img style="margin-left:50px;" src="images/resumeTHUMB/typeResumeTHUMB.jpg" class="type"/>
    </a>       
</div>   

请参阅此处示例:http://jsfiddle.net/jtbowden/BTqxx/