0

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

继承人页面：

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

4

2 回答 2

0

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

你不能做这样的事情：

$(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 提供默认显示：无。

于 2012-04-10T23:20:49.783 回答
0

你在.fancybox()打电话a#linkTo。当 Fancybox 在您指向的锚点内找到链接时，它会将锚点 ( #linkTo) 的内容删除到 DOM 中的其他位置。这大概是为了方便使用。在您的情况下，您希望#workTag保留在链接中。因此，如果您#whichResume在锚点之外删除您的 fancybox 内容 ( )，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/

于 2012-04-10T23:18:04.040 回答