1

img に data-title 属性があるかどうかに応じて、カスタム Fotorama キャプションの表示を変えようとしています。現在、「未定義」として表示されていますが、その属性が存在しない場合は、その属性を完全に省略してください。if/else ステートメントを使用して、img 要素にその属性があるかどうかを確認しようとしましたが、役に立ちませんでした。ギャラリーを制約し、それに応じて画像のサイズを変更する必要があるため、「div」Fotorama アプローチを使用できません。

これは私のimgタグがどのように見えるかです:

<img src="images/whatever.jpg" data-caption="Brief description goes here." data-author="Additional description here" data-title="http://www.link.com" border="0">

これは、カスタム キャプション形式を作成するために使用しているコードです。

$('.fotorama')
.on('fotorama:show', function (e, fotorama) {
fotorama.$caption = fotorama.$caption || $(this).next('.example_blurb');
var activeFrame = fotorama.activeFrame;
fotorama.$caption.html(
  '<p><em>' + activeFrame.caption + ' <a target="_blank" href="' + activeFrame.title + '">(link)</a></em></p><p>' + activeFrame.author + '</p>'
);
})
.fotorama();

これは、div に data-title 属性がない場合にキャプションを読みたい方法です。

'<p><em>' + activeFrame.caption + '</em></p><p>' + activeFrame.author + '</p>'

前もって感謝します！

4

1 に答える 1

0

他の誰かが同じ問題を抱えている場合は、CSS を使用してこれに対する回避策を考え出しました。data-title 属性が定義されているかどうかに基づいてキャプションがどのように表示されるかについて if...else ステートメントを作成するのに苦労しましたが、何らかの理由で、各 activeFrame に data-title があるかどうかをチェックしていないように見えました属性かどうか - 最初だけ。プラグインに固有の問題であるか、何かを見落としている可能性があります。

とにかく、解決策！

各 img タグ (「data-class」) に新しい属性を作成しました。値は「work_link」または「no_link」のいずれかになります。

<img src="images/whatever.jpg" data-caption="Brief description goes here." data-author="Additional description here" data-title="http://www.link.com" data-class="work_link" border="0">
<img src="images/whatever.jpg" data-caption="Brief description goes here." data-author="Additional description here" data-class="no_link" border="0">

スクリプトのキャプション HTML を次のように変更しました。基本的に、リンクに「work_link」または「no_link」クラスのいずれかを指定します。

fotorama.$caption.html(
  '<p><em>' + activeFrame.caption + '<a class="' + activeFrame.class + '" target="_blank" href="' + activeFrame.title + '">(link)</a></em></p><p>' + activeFrame.author + '</p>'
);

最後に、「work_link」クラスに基本的なスタイリング CSS を設定し、「no_link」クラスを表示しないようにしました。

.work_link { margin-left: 12px; }
.no_link { display: none; }

おそらく最もクリーンな方法ではありませんが、魅力的に機能します!

于 2014-08-07T20:12:13.210 に答える