【jQuery】Google画像検索のような拡大表示ができるプラグインjQuery Portfolio

jp_1
【jQuery】画像ギャラリーを効果的に見せる為に!Gallery系プラグイン10選でご紹介したjQuery Portfolio。このプラグインはレスポンシブに対応していて、Googleの画像検索のようにサムネイル画像をクリックすると下にアコーディオンのように広がって画像と詳細を表示できるプラグインです。

jp_2
ブラウザ幅を狭めてみました。

CSS&JS

<link rel="stylesheet" href="portfolio.jquery.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="portfolio.jquery.js"></script>

オプション

<script>
$(document).ready(function() {
$('.thumbs').portfolio({
cols: 4,
transition: 'slideDown'
});
});
</script>

HTMLマークアップ

<ul class="thumbs">
<li><a href="#thumb1" class="thumbnail" style="background-image: url('images/thumb1.jpg')">
<h4>Web development</h4><span class="description">Get the latest technologies</span></a>
</li>
</ul>
<div class="portfolio-content">
<div id="thumb1">
<div class="media"><img src="images/media.jpg"/></div>
<h1>Web development</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mollis nisi sit amet metus venenatis, ut congue turpis aliquet. Pellentesque eget elit sollicitudin, feugiat felis in, ornare diam. Morbi blandit sapien nibh, eu pulvinar tortor luctus nec. Aenean lobortis lacus cursus gravida adipiscing. Praesent in odio porta, placerat felis id, viverra est. Nam magna quam, tincidunt eget augue in, aliquet tristique ipsum.</p>
<a href="#" class="btn btn-primary">Learn More</a>
</div>
</div>
 

【jQuery】Google画像検索のような拡大表示ができるプラグインjQuery Portfolio

  • LATEST
  • RELATED
  • POPULAR