Question

我使用了从这里下载的非常好的JQuery： http://tympanus.net/codrops/2010/10/07/slider-gallery/

这就是我所做的： http://www.massimozompa.com/home.html

现在我正在尝试添加一个简短的文字作为大图像的描述。有人可以帮我做吗？谢谢！

Answer 1

对于每个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>

根据您的要求将css应用于上述div，即显示......等等

现在在这个功能

$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();

你现在完成了。

我已经完成了，它对我有用......

如果答案有用，请单击

jQuery - 添加图像文本说明

1 个答案: