0

私は簡単な問題のように見えるものに苦労してきました:

スライダーと jquery バックストレッチの組み合わせのように見えるものを使用するサイトを継承しました。クライアントは、スライドショーの 1 つにキャプションがあり、画像の表示されている下部に沿って配置されるように要求しました。

だから私はこれを変えたい：

<div id="backstretch" style="…">
<img style="…">
</div>

これに：

<div id="backstretch" style="…">
<img style="…">
<div class="gallery-caption">Caption</div>
</div>

そして、画像の場合と同様に、div の各インスタンスを破棄します。

ただし、JavaScript でキャプション div をレンダリングし、ナビゲーションと同期させることができないようです。きれいな水の目的で、私はすべての試みを削除し、最初に使用した JS コードに戻りました。

以下に例を示します: http://tylonius.net/backstretch/lifestyle-gallery.html

誰でもこれを手伝ってもらえますか？

4

1 に答える 1

0

他の回答は関係ありません。FancyBox だとは気づきませんでした。

同様の質問がここ、ここ、ここに投稿されました。@JFK が最初のリンクに記載されているように、キャプション情報を保持するために、image の属性に接頭辞 data- を使用できます。そして、jquery スクリプトでアクセスします。

<!doctype html>
<html>
<head>
 . . . 
    <title>your demo</title>
</head>

<body>
    <div id="gallery" class="residences">
        <div class="bigImages">
            <ul>
                <li>
                    <div class="gallery-image">
                            <img class="caption" src="images/lifestyle-gallery/img2.jpg" title="Caption 1" data-caption="Caption will go here">
                     </div> <!-- /gallery-image -->
                </li>

スクリプトは次のようになります。

$(document).ready(function() {
    $(".fancybox").fancybox({
        helpers : {
        title: { type: 'inside'}
    },
    // use the following if you want to do the caption before the image
    // beforeShow : function(){ 
    afterLoad: function(){
        this.title = this.title + ' ' + $(this.element).data("caption");
        //you can also do the following to use the alt instead of the caption
        //this.title = this.title + ' ' + $(this.element).find('img').attr('alt');
    }

    }); // fancybox
}); // ready
于 2014-10-07T02:02:24.893 に答える