1

写真とビデオのセクションがあるギャラリー セクションに取り組んでいます。

私はすべてがフォト ギャラリーで問題なく、正常に動作しています。例: フォト ギャラリーの URL http://tinyurl.com/bsqd5lp

フォトギャラリーでは、タグ'titleFromAlt': true,を使用してタイトルを渡すために使用しています。altalt タグにはカスタマイズされたタイトルの例があります<span>2012-07-02</span><br><span>Department of Tourism</span>

ビデオギャレーでも同じことをしたいのですが、を使用してこれを達成することはできません'titleFromAlt': true,。HTMLコードとして画像にカーソルを合わせるとタイトルが表示されるので、私がやっている方法は良くありません。例: ビデオ ギャラリーの URL http://tinyurl.com/bsdq694

これに関する他の問題は、ビデオのタイトルが中央に来ることです。タイトルが左揃えになるようにCSSを変更してみました。

.fancybox-title-float {
    position: absolute;
    left: 0;
    bottom: -20px;
    height: 32px;
    float:left;
}

何らかの理由で、画像を表示した後にこれを配置しても、上記のコードを一晩中実行できません。

ご協力をお願いいたします。

更新しました：

you tube ビデオのコード

$(document).ready(function () {
    $(".youtube").click(function () {
        $.fancybox({
            'padding': 0,
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
            'title': this.title,
            'titleFromAlt': true,
            //'titlePosition': 'over',
            'width': 680,
            'height': 495,
            'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type': 'swf',
            'swf': { 'wmode': 'transparent', 'allowfullscreen': 'true' }
        });
        return false;
    });
});
4

2 に答える 2

1

私たちが見落としていることの 1 つは、あなたの動画では、.click()fancybox をセレクターにバインドする通常の方法ではなく、手動の方法を使用していることです。.fancybox()

このシナリオ (使用.click()) では、titleFromAltオプションは機能しませんが、通常の jQuery 式を使用して、タグaltに格納された属性からファンシーボックスのタイトルを設定できます。img

このスクリプトを試してください

$(document).ready(function () {
    $(".youtube").click(function () {
     // first, get the value from the alt attribute
        var newTitle = $(this).find("img").attr("alt"); // NEW
        $.fancybox({
            'padding': 0,
            'autoScale': false,
            'transitionIn': 'none',
            'transitionOut': 'none',
          //'title': this.title, // we will replace this line
            'title' : newTitle,  //<--- this will do the trick
          //'titleFromAlt': true,  // we don't need this anymore
          //'titlePosition': 'over', 
            'width': 680,
            'height': 495,
            'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
            'type': 'swf',
            'swf': { 'wmode': 'transparent', 'allowfullscreen': 'true' }
        });
        return false;
    });
});

...タグaltに属性があると仮定します。img

混乱と前後のすべてのコメントをお詫び申し上げます。

于 2012-07-10T06:58:17.797 に答える
1

あなたのコードを見ると、span タグに表示されるテキストが title 属性内にも表示されることがわかりました。テキストでその属性を削除しようとすると、タイトル テキストは表示されません。

2 番目の問題について:
CSS クラスから.fancybox-title-float属性 'position: absolute;' を#fancybox-title-float-left削除し、id から 'padding' 属性を削除します。これらの変更を適用すると、テキストが左揃えになります。

于 2012-07-09T14:07:35.243 に答える