jquery - jquery 图像缩放像谷歌图像搜索

Question

我需要从这篇文章中做同样的事情Pop Images like Google Images 但我需要添加与谷歌图片搜索相同的内容，即悬停时需要显示图片标题。我来自 java 和 jquery 的新手，所以请帮助我http://jsfiddle.net/roXon/HmTrw/

Answer 1

在我的情况下，我需要的不仅仅是属性title，我的图像结构如下：

<ul class="thumbnails">
    <li>
        <div class="thumbnail">
             <img src="/images/200X150.gif" alt="200X150" />
             <div class="caption" style="display:none">
                  HTML Goes here
             </div>
        </div>
    </li>
    ....
</ul>

您需要在以下情况下更新插件ibox ：

el.mouseenter(function() {
    ibox.html('');

添加这个：

$('#ibox').append('<div class="ibox-caption">'+$(this).siblings('.caption').html()+'</div>');

.ibox-caption 的 css 应该具有相同的图像宽度：

.ibox-caption {
    width: 200px;
}

Answer 2

在该行之后ibox.html('');（JS 中的第 20 行左右）添加以下行：

jQuery('<div />').text(this.title).appendTo(ibox);

您还需要添加一些 CSS。