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

Question

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

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

让我知道我是否偏离了基本点或在正确的方向思考。

Answer 1

给你:

Demo

标记:

<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

希望这对您有所帮助。