【jQuery】 Colorbox と framework.js を組み合わせて、モーダルウィンドウ内のリンク移動をカテゴリ内にする方法

framework.png

Colorboxframework.js を組み合わせて、モーダルウィンドウ内のリンクをカテゴリ内移動のみにします。

ポートフォリオサイト制作の時に、Colorbox などで作った作品をモーダルウィンドウで紹介することがよくありますが、frameworks.js と組み合わせることで、モーダルウィンドウ内のナビゲーションリンクを、特定のカテゴリのみの移動に切り替えることが出来ます。

やり方が分かれば、Fancyboxでも応用可能です。


2015/01/09 HTML構文エラーを修正しました。(rel属性を使うとエラーになるため)

やり方:

各種プラグインの準備

Colorboxframework.js をダウンロードしてきて、解凍します。

Colorboxからは、jquery.colorbox.js と colorbox.css と colorbox.css に依存する画像データ。
framework.js は framework.js のみ。

それぞれをファイリングしておきます。

css/images/
   /colorbox.css
js/jquery.colorbox.js
  /framework.js


HTMLの準備

htmlの準備をします。以下のような形にします。各種説明はコメントアウトに記入しています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ポートフォリオ</title>
<link rel="stylesheet" href="css/colorbox.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/framework.js"></script>
<script src="js/jquery.colorbox.js"></script>
<script type="text/javascript">
//Colorboxのオプション。下記の内容では a要素の属性relが currentのコンテンツをモーダルウィンドウ化させる。
$(function(){
$('a[data-rel^=current]').colorbox({innerWidth:640, innerHeight:480});
});
</script>
</head>
<body>
<ul id="filter">
<!--ul#filter内の a要素の値がカテゴリ名になります。値が All ですべて表示-->
<li class="this"><a href="#" class="All">すべてを表示</a></li>
<li><a href="#" class="a">カテゴリA</a></li>
<li><a href="#" class="b">カテゴリB</a></li>
<li><a href="#" class="c">カテゴリC</a></li>
</ul>
<ul id="portfolio">
<!--ul#portfolio内の li要素の値にカテゴリ名を入れてください。a要素にはrel=currentを入れてください。-->
<li class="a">
<a data-rel="current" href="a.png"><img alt="" src="a_thumb.png"></a>
</li>
<li class="b">
<a data-rel="current" href="b.png"><img alt="" src="b_thumb.png"></a>
</li>
<li class="c">
<a data-rel="current" href="c.png"><img alt="" src="c_thumb.png"></a>
</li>
</ul><!--/#portfolio-->
</body>
</html>


frameworks.js を編集する

このままでも Colorbox と framework.js は動きますが、framework.js でカテゴライズした後に表示させたモーダウウィンドウ内リンクをカテゴリ内のみの移動にするために、書き換えます。

$(document).ready(function() {
  $('ul#filter a').click(function() {
    $(this).css('outline','none');
    $('ul#filter .this').removeClass('this');
    $(this).parent().addClass('this');
//デフォルトでは、$(this).text()となっているところを、.attr('class')にすることでクラス名でカテゴライズできます。
    var filterVal = $(this).attr('class').toLowerCase().replace(' ','-');
      if(filterVal == 'all') {
        $('ul#portfolio li.hidden').fadeIn('slow').removeClass('hidden');
//クラス名が all のものが押された場合、すべての ul#portfolio li a のrel属性の値に current をつける。
        $('ul#portfolio li a').attr('data-rel','current');
      }else {
        $('ul#portfolio li').each(function() {
          if(!$(this).hasClass(filterVal)) {
//押されたクラス以外を隠すときに、同時に data-rel属性の値を none にする。
            $(this).fadeOut('normal').addClass('hidden');
            $('a',this).attr('data-rel','none');
          }else {
//押されたクラスを表示するとき、同時に data-rel属性の値を current にする。
            $(this).fadeIn('slow').removeClass('hidden');
            $('a',this).attr('data-rel','current');
          }
      });
    }
    return false;
  });
});


これでAカテゴリ表示のときは、モーダルウィンドウ内もAカテゴリだけに移動する、といった動きが実現できます。

comments powered by Disqus