スポンサーリンク

swipebox.jsをWordPressに入れて見た

スポンサーリンク

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

swipeboxはこんな感じです↓

IMG_3898
DSC00107

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

■ 設置

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

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

swipebox

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を変更してみました。
正しいやり方かはわかりませんけどね。。。

コメント

  1. ハル より:

    「cssを変更してどこをクリックしても閉じるようにし」
    上記を実現したいと考え、サイトを色々と巡っている内に貴サイトに辿り着きました。
    結構頑張ってソースを解読したのですが、初心者の私にはハードルが高かったです…
    差し支えなければ、CSSのどの部分をカスタマイズされたか教えていただけませんか?

    • marsh より:

      こんばんは。
      この記事を書いたのがだいぶ前のことなので覚えていません(^^;)
      しかし、現在のSwipeboxをダウンロードして確認してみると、swipebox.cssの128行目からはじまる

      #swipebox-prev,
      #swipebox-next,
      #swipebox-close {
      background-image: url(../img/icons.png);
      background-repeat: no-repeat;
      border: none !important;
      text-decoration: none !important;
      cursor: pointer;
      width: 50px;
      height: 50px;
      top: 0;
      }

      #swipebox-prev,
      #swipebox-next,
      #swipebox-close {
      background-image: url(../img/icons.png);
      background-repeat: no-repeat;
      border: none !important;
      text-decoration: none !important;
      cursor: pointer;
      width: 100%;
      height: 100%;
      background-image: none!important;

      top: 0;
      }

      と赤字の部分を追加・変更したのではないかと思われます。
      これが正しい方法かはわかりませんが、お試しください。

      • ハル より:

        お返事いただきありがとうございました!
        試してみたのですが、画像をクリックしても閉じてしまうので、むー…なんとか頑張ってやってみます。
        取り急ぎ、御礼まで!有益な情報ありがとうございました!