jquery - 图片库的 images.google.com 效果

Question

我正在尝试建立一个带有图片库的网站，当单击缩略图时，隐藏的 div 会滑出并显示有关图像的更多信息，可能还有幻灯片。

我疯狂地用谷歌搜索，我能找到的最接近的是菜单。所以我假设我将不得不使用 jquery 将 div 显示标签从无更改为可见，但我才刚刚开始了解 jquery，而且我还远远没有学习从头开始编写代码。

让我知道我是否偏离基础或朝着正确的方向思考。

Answer 1

干得好：

演示

标记：

<ul id="og-grid" class="og-grid">
<li>
    <a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
        <img src="images/thumbs/1.jpg" alt="img01"/>
    </a>
</li>
<li>
    <a href="http://cargocollective.com/jaimemartinez/" data-largesrc="images/2.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
        <img src="images/thumbs/2.jpg" alt="img02"/>
    </a>
</li>
<li><!-- ... --></li>
<!-- ... -->
</ul>

来源：带有扩展预览的缩略图网格

希望这可以帮助。