タブを画面サイズによってアコーディオンにしてくれる「Easy Responsive Tabs to Accordion」

「Easy Responsive Tabs to Accordion」はタブ表示を画面サイズによって折りたたみのアコーディオン形式に変換してくれるjQueryプラグインです。
デフォルトでは、768pxがブレイクポイントとなっており、それ以下になるとアコーディオンに変換してくれます。ダウンロードデモ

スクリプト

<script src="jquery.min.js" type="text/javascript"></script>
<link href="easy-responsive-tabs.css" type="text/css" rel="stylesheet">
<script src="easyResponsiveTabs.js" type="text/javascript"></script>

実装(HTML)

<div id="htab">
    <ul class="resp-tabs-list">
        <li>"タブ1"</li>
        <li>"タブ2"</li>
        <li>"タブ3"</li>
    </ul> 
    <div class="resp-tabs-container">
        <div>"コンテンツ1"</div>
        <div>"コンテンツ2"</div>
        <div>"コンテンツ3"</div>
    </div>
</div>

実装(オプション設定)

// 768px以上 横タブ 768px以下アコーディオン
<script type="text/javascript">
$('#htab').easyResponsiveTabs();
</script>

// 768px以上 縦タブ  768px以下アコーディオン
<script type="text/javascript">
$('#vtab').easyResponsiveTabs({
    type: 'vertical',
});
</script>

// 常にアコーディオン
<script type="text/javascript">
$('#acc').easyResponsiveTabs({
    type: 'accordion',
});
</script>

オプション

type：表示タイプを指定
指定無し：横タブ vertical：縦タブ accordion：画面サイズによらず常にアコーディオンを表示
width：タブとアコーディオンの横幅を指定
指定無し：auto(親要素に合わせる) '~px'：横幅を指定する
fit：親要素に合わせる
true：合わせる false：合わせない

他プラグイン
jQuery Responsive Tabs

WordPressプラグイン
WP Easy Responsive Tabs to Accordion

: マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」

「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちらスクリプト

: Lightboxなどが実装できるプラグイン「Magnific Popup」

「Magnific Popup」はlightboxを実装できるjQueryプラグインです。この手のものは、商用利用に制限がかかっているものが多いですがこのプラグインはMITライセンスで提供されてい

: 画像ズームプラグイン

画像をズームしてくれるプラグインには、ツールチップ的にサムネイルにマウスオーバーした部分をズームアップしたり元画像を表示したり、その画像内でインナーズームするというような機能があるようです。

: ECサイトの商品表示に使えそうなスライダー「Simple Multi-Item Slider」

「Simple Multi-Item Slider」は、いうなればネスト型の画像スライダーです。ECサイトでの商品陳列からサムネイルメニューなどにも使用できそうです。ダウンロード　デモスクリプ