jquery - jQuery - 添加图像文本描述

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

你现在完成了。

我已经做到了，它对我有用......

如果答案有用，请点击