images.google.com效果图片库

Question

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

我用疯狂的谷歌搜索，我能找到的最接近的是菜单。所以我假设我必须使用jquery将div显示标签从none更改为可见，但我刚刚开始理解jquery，而且我还没有学会从头开始编码。

如果我偏离基地或思考正确的方向，请告诉我。

Answer 1

你走了：

Demo

Mark Up：

<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>

来源：THUMBNAIL GRID WITH EXPANDING PREVIEW

希望这有帮助。