画像を拡大する仕組みをSwipeboxに入れ替えました
画像をクリックしたら拡大(ズーム)する仕掛けとして、prettyPhotoを使っていました。Lightboxの一種です。
- 画像をクリックしたらズームする仕掛け(改訂版) : プラスα空間 (2015年6月25日)
ですが、JavaScriptサイズが大きかったり、動作が遅かったりと、困っていました。
軽いLiteboxを調べてみると、Swipeboxが良さそうでした。ありがとうございます。Thank you!
WordPressのプラグインも用意されています。
プラグインを有効化するだけで、使えるようになりました。マニュアル設定をする場合は、リンクのaタグに、class="swipebox"を追加します。
<a href="https://oichinote.com/plus/files/2014/06/20140626pwr-n200-1-init1.png" rel="prettyPhoto[INIT] _RAclick"><img src="https://oichinote.com/plus/files/2014/06/20140626pwr-n200-1-init1-480x156.png" alt="PWR-N200 初回" width="480" height="156" class="alignnone size-medium wp-image-12261" /></a>
Autodetectにしておけば(デフォルト)、画像リンクに自動的にclass="swipebox"がDOM上に加わります。WordPressの投稿を修正する必要がありません。
1ページに複数の画像がある場合、切り替えて表示ができます。iPhoneの場合、スワイプ動作で画像を切り替えられます。
次のページで確認できます。お試しください。
- 光ポータブルPWR-N200の基本設定 : プラスα空間 (2014年6月26日)