0

だから、私はこの画像をファンシーボックスビューに表示させようとしています。そして、画像をクリックするとファイルがダウンロードされます。だが!画像にimgタグの周りにアンカーがある場合、ファンシーボックス効果は機能しません。

ここにページがあります:

履歴書のバナーをチェックアウトをクリックすると、履歴書の2つの画像が表示されます。どちらかをクリックできるようにしたいのですが、ファイルがダウンロードされます。しかし、私が言ったように、私がそれをするとき、ファンシーボックスは私にバナーをクリックさせません。

4

2 に答える 2

0

あなたはに呼びかけ.fancybox()ていa#linkToます。Fancyboxは、ポイントしたアンカー内のリンクを見つけると、アンカー(#linkTo)の内容をDOM内の他の場所に削除します。これはおそらく使いやすさのためです。あなたの場合、あなた#workTagはリンクに残りたいです。したがって、アンカーの外側でfancyboxコンテンツ()を削除すると、hrefがそれを指しているため#whichResume、Fancyboxはidを持つコンテンツを自動的に検出するはずです。#whichResumeリンク内にある必要はありません。

これを変える:

<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 に答える
0

それを機能させるためにどのように試みたのか、いくつかのサンプルコードを投稿していただければ幸いです。

あなたは次のようなことをすることはできません:

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

そして、#whichResumedivのコード

<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を無効にしているユーザーには、デフォルトのdisplay:noneを#whichResumeに指定します。

于 2012-04-10T23:20:49.783 に答える