0

ここからダウンロードした非常に優れた JQuery を使用しました: http://tympanus.net/codrops/2010/10/07/slider-gallery/

これは私がやったことです： http://www.massimozompa.com/home.html

今、大きな画像の説明として短いテキストを追加しようとしています。誰かが私がそれをするのを手伝ってくれますか? ありがとうございました！

4

1 に答える 1

0

画像の説明で構成されるすべての class="content" に対して、以下のように別の div を取得します

<div class="content">
  <div>
    <a href="#"><img src="images/album1/thumbs/1.jpg" alt="images/album1/1.jpg"     class="thumb"/</a>
  </div>
   <div id="description">Description about the image.........</div>
</div>

div に css を適用する

#description {
display:none
}

今、このコードの下で

<div id="fp_overlay" class="fp_overlay"></div>
<div id="fp_loading" class="fp_loading"></div>
<div id="fp_next" class="fp_next"></div>
<div id="fp_prev" class="fp_prev"></div>
<div id="fp_close" class="fp_close">Close preview</div>

説明テキストを表示するための別の div を追加します 

<div id="displayDescription></div>

上記のdivに必要に応じてcssを適用します。つまり、表示する場所...など

今、この機能で 

$fp_content_wrapper.find('.content')
                    .bind('click',function(e){
                    var $current = $(this);
                    current = $current.index();
                    centerImage($current,true,600);
                    e.preventDefault();
                });

"centerImage($current,true,600);" の後に次のコードを追加します。 

var descriptionText=$current.children(1).text();
$('#displayDescription').text(descriptionText);

また、var $current=....; の後の if ブロックと else ブロックの両方で、次の関数に上記のコードを追加します。声明

function navigate(way) {
var $current = $fp_thumbScroller.find('.container:nth-child('+parseInt(gallery_idx+1)+')')
                                            .find('.content:nth-child('+parseInt(current+1)+')');
}

関数 showPreviewFunctions() に次のコードを追加します

$('#displayDescription').show();

関数 hidePreviewFunctions() に次のコードを追加します

$('#displayDescription').hide();

これで完了です。

私はそれをやった、それは私のために働いている...

答えが役に立ったらクリック

于 2012-07-04T10:04:04.747 に答える