Question

所以，我试图让这个图像显示在精美的盒子视图中，然后当你点击图像时它会下载一个文件。但！当我的图像在img标签周围有锚点时，花哨的盒子效果就不会起作用。

见下页：

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

Answer 1

您正在.fancybox()上致电a#linkTo。当Fancybox在您指向的锚点内找到链接时，它会将锚点（#linkTo）的内容移除到DOM中的其他位置。这可能是为了易于使用。在您的情况下，您希望#workTag保留在链接中。因此，如果您删除锚点之外的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/

Answer 2

如果您可以发布一些示例代码，以便您尝试使其正常工作，我会很高兴。

你不能做类似的事情：

$(function(){
   $("#a#linkTo").click(function(){
     $("whichResume").fancybox();
   });
});

#whichResume div的代码

<a href="images/resumeTHUMB/graphicResumeTHUMB.jpg">
<img class="graphic" src="images/resumeTHUMB/graphicResumeTHUMB.jpg">
</a>
<a href="images/resumeTHUMB/typeResumeTHUMB.jpg">
<img class="type" src="images/resumeTHUMB/typeResumeTHUMB.jpg" style="margin-left:50px;">
</a>

我没有测试它，如果你在这里发布示例代码会更容易。

对于禁用了javascript的用户（例如我），也为#whichResume提供默认显示：none。

在图像中使用链接时，无法使用fancybox

2 个答案: