東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【wordpress/jQuery】レスポンシブ対応のrightbox系 spipeboxの使い方

このswipebox、レスポンシブ対応ですぐに実装可能なので便利。wordpressで実装するときにした細工をここに記す。


1.ファイル読み込む

まずはheadタグ内に下記記述。

<link rel="stylesheet" href="src/css/swipebox.css">
<script src="lib/jquery-2.0.3.js"></script>
<script src="src/js/jquery.swipebox.js"></script>
<script type="text/javascript">
;( function( $ ) {

	$( '.swipebox' ).swipebox();

} )( jQuery );
</script>


あ、あと×ボタンとかの画像もimgフォルダにアップ。




2.swipeboxを発火させたいエリアを設定。

ここで今回、ブログの記事の中の写真のみを発火させたかったので、headタグ内に下記追加。

$(function(){
  $("article a[href *='/uploads/']").addClass("swipebox");
});

要するにwordpressの管理画面から記事を書くがその時にアップロードした写真が格納されるuploadsフォルダの中にある写真のみのaタグにswipeboxというクラスを付与。
セレクタが「article a」だけだと、カテゴリーやタグのリンクまでもswipeboxのクラスが付与するためこのような書き方になった。


3.swipebox.cssをいじってオーバーレイの下のナビゲーション消した。
あと、写真拡大してるときのオーバーレイの下にある一つ前・次の写真にいくナビゲーションはいらないためswipebox.cssをいじって消した。