イメージ内のリンクを使用するとファンシーボックスが動作しなくなる

Question

このイメージをファンシーボックスビューに表示しようとしています。イメージをクリックするとファイルがダウンロードされます。しかし！画像にimgタグの周りにアンカーがあると、ファンシーボックスエフェクトは動作しません。

相続人のページ：チェックアウト私の履歴書のバナー上

クリックして、履歴書の2枚の画像が表示されます。いずれかをクリックすると、ファイルがダウンロードされます。しかし、私はそれを行うとき、ファンシーボックスは、私がバナーをクリックさせてはいけないと言った。

Answer 1

.fancybox()はa#linkToです。あなたが指しているアンカーの中にFancyboxがリンクを見つけたら、あなたのアンカー（#linkTo）の内容をDOMの他の場所に取り除きます。これはおそらく使い易さのためです。あなたの場合、#workTagをリンクに残しておきます。したがって、あなたのアンカーの外にfancyboxコンテンツ（#whichResume）を削除すると、ファンシーボックスはあなたのhrefが指しているので、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> 

これに：この

変更http://jsfiddle.net/jtbowden/BTqxx/

Answer 2

あなたには、いくつかのサンプルコードを投稿することができれば、あなたがそれを取得しようとしましたどのように私はいいだろう：

<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> 

は、ここでの例を参照してください。ワーキング。

は、あなたが何か行うことはできません：あなたが投稿した場合

$(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> 

私はそれをテストしていなかったのコードを、簡単にたくさんのだろうここのサンプルコード。

また、#whichデフォルトの表示を行います：none、javascriptが無効になっている（私のような）ユーザーの場合は、noneを返します。