0

画像の上にカーソルを置いたときにタイトル属性を表示しないように FancyBox 2 をカスタマイズしようとしています。グループ内の最初の画像がページに表示されるように設定し、クリックするとファンシーボックスが読み込まれ、スクロールして他の画像を表示できます。それらすべてをページに表示するのではなく、最初の画像だけを表示します。最初のアンカーに続くアンカーを非表示にすることでこれを行いました（FancyBoxのWebサイトでこれを行う方法の例が見られなかったので、これが私の最初の傾向であり、うまくいきました）

私のHTML

<li class="web">
  <a href="img/sites/salonantebellum.jpg" class="thumb web fancybox" rel="group1" title="My title">
    <h2 class="title">Web</h2>
    <span>
      <img class="button" src="web.jpg" alt="Web" title="image">Web
    </span>
  </a>
  <div id="myCaption" style="display: none;"><p>My Caption</p></div>
  <a href="img/sites/staceys.jpg" class="fancybox hidden" rel="group1" title="My title"></a>
  <a href="img/sites/mcfpd.jpg" class="fancybox hidden" rel="group1" title="My title"></a>
  <a href="img/sites/redstone.jpg" class="fancybox hidden" rel="group1" title="My title"></a>
</li>

頭の中の私のスクリプトは

$(document).ready(function() {
  $(".fancybox").fancybox({
    afterLoad: function(){
      this.title = $('#myCaption').html();
    },
    helpers: {
      title : {
        type : 'inside'
      }
    }
  }); // fancybox
}); // ready

そのため、タイトルは画像の長い説明になるので、画像にカーソルを合わせたときに表示されないようにします。とにかく残りは隠されているので、最初の画像を修正する必要があります。非表示にする方法に関するこの投稿を見つけました: FancyBox 2.0 を使用しているときに、ホバー時にタイトル タグからツールチップを非表示にするにはどうすればよいですか?

上記のコードで、非表示の div を使用しようとしていることがわかりますが、FancyBox をスクロールして最初の画像に戻ると、「myCaption」ではなく「タイトル」が再び表示されます。

どうすればいいですか？私はデザイナーであり、開発者ではないので、よく説明してください。

更新: 自分の状況を十分に説明していないように感じたので、サイトを更新して最新のコードを含めました: mckernanms.com Web 画像をスクロールして最初の「タイトル」に戻ると注意してください。 」が表示されます。また、他のギャラリーの最初の画像には、最初の Web 画像のキャプションが表示されていますが、これは間違っています。

4

2 に答える 2

4

あなたのコメントに基づいて、あなたの問題に対する正しい解決策は次のとおりです。

この実用的なフィドルの例を参照してください!

コードを次のように変更します。

$(document).ready(function() {
  $(".fancybox").fancybox({
    beforeLoad : function() {
      this.title = $(this.element).find('img').attr('alt');
    }
  }); // fancybox
}); // ready

このように、現在のキャプションをからtitleに渡すことができます。<a></a>altimg

画像はリンクのラッパーであり、リンクにはタイトルが含まれていないため、ブラウザには表示されません。

例えば、

<a rel="example_group" title="" href="path_to_image.jpg">
    <img alt="This is the title, the title is mine!" src="path_to_image.jpg">
</a>

ここのドキュメントで解決策を見つけました!

于 2012-05-30T20:59:07.710 に答える
0

「ポップアップ」というタイトルについて話している場合、それらはブラウザー/OS の一部です。タイトル属性を含めないことを除いて、無効にできるものではありません。

<a href="img/sites/staceys.jpg" title="My title"></a>

上記のコードは、Chrome のプレビュー ペインや "Stack Overflow" ポップアップ バブルに見られるような、ブラウザーの「機能」により、ホバー時にポップアップを表示します。

ここに画像の説明を入力

FancyBox もこの属性を使用して、画像のキャプションも生成していると思います。私は FancyBox に十分に精通していませんが、回避策として、独自のカスタム HTML を設計して画像を表示することが考えられます。FancyBox はミニ HTML コンテンツをポップアップ表示できます。

したがって、次のようになります。

<a href="#" class="fancybox">
    <img src="..." alt="" />
    <b class="caption">Lorem ipsum...</b>
</a>

FancyBox のデフォルトの画像ビュー HTML を使用する代わりに、手動で HTML を介して画像とキャプションを表示します。

これにより、A または IMG タグに「タイトル」属性を使用せずにキャプションを付けることができます。

それが役立つことを願っています。

乾杯！

更新 1

おそらく何かが足りないのでしょうが、「タイトル」属性を削除したところ、問題なく動作しているように見えました。

<ul class="gallery">
    <li class="web"><a ... title="Salon Antebellum">

その [title="Salon Antebellum"] ビットと、次の 2 つの要素の同等のものを削除するだけです。

また、これから title 属性を削除します。

<span><img class="button" src="web.jpg" alt="Web" title="image">Web</span>

それが機能するかどうかを確認し、そうでない場合は、何が欠けているかを説明してください. かなりの数のことが起こっており、詳細の一部を取り上げることができない場合があります。

于 2012-05-30T21:38:07.643 に答える