swipebox.jsをWordPressに入れて見た

swipebox.jsをWordPressに入れて見たみました。
プラグインがあるのかもしれませんが、プラグインは使わず直接に入れました。

swipeboxはこんな感じです↓

ちょっと好みじゃないけどMITライセンスだし、まぁいいかな。

■ 設置

swipeboxの本サイトからダウンロードします。
http://brutaldesign.github.io/swipebox/

解凍後、srcフォルダ内にあるcss、img、jsの3つのフォルダをアップロード。
私の場合はswipeboxフォルダを作成しそこにjquery.swipebox.min.jsとswipebox.min.css、imgフォルダを入れました。

head部に

<script src="jqueryの設置パス/jquery-2.0.3.js"></script>
<link rel="stylesheet" type="text/css" href="swipebox.cssの設置パス/swipebox.min.css">
<script src="swipebox.jsの設置パス/jquery.swipebox.min.js"></script>
<script>
$(function () {
$(".swipebox").swipebox();
});
</script>

入れます。

functions.phpに

add_filter( 'image_send_to_editor', 'remove_img_attr' );
function remove_img_attr( $html ) {
  $class = 'swipebox';
  return str_replace( '<a ', '<a class="'. $class. '" ', $html );
}

入れます。

これで画像が拡大表示されるはずです。

さて、私は上の設置のところでimgフォルダの保存先を変えてるのでcssを変更しないといけません。
swipebox.min.cssをエディタで開いて、gifとpngを検索し、それぞれパスを変更します。

background-image:url(../img/icons.png)　→　background-image:url(img/icons.png)
background:url(../img/loader.gif)　→　background:url(img/loader.gif)

ついでに画像が拡大されたときの背景を少し透過させてみました。

・オリジナルの色を透過
background:#0d0d0d　→　background:rgba(13,13,13,0.8)

・白で透過
background:#0d0d0d　→　background:rgba(255,255,255,0.9)

そのほか、cssを変更してどこをクリックしても閉じるようにし、スマホで見たときにスワイプしないようにjsを変更してみました。
正しいやり方かはわかりませんけどね。。。