はてなブログを使って運用している「うさプレイヤ公式サイト」にLightboxとbxSliderを導入してみたので、そのときのメモ。
補足
- はてなブログとは別にファイルをアップロードする場所も必要になります。
私はGoogleドライブに置くようにしてます(2016/08/10 追記)Googleドライブのホスティング機能が終了するので、Github pagesに置くようにしました。 - Javascript,CSS,jQueryの知識が全然無いので間違っている箇所があるかもしれません。
- 画像にマウスオーバーすると画像が少し縮小する動きをしますが、このブログが利用しているデザインテーマによるものです。
- このブログのデザインテーマの影響かbxSliderのボタンの表示が少し変になってますね…。うさプレイヤ公式サイトの方は問題無いのですが。
Lightboxとは
画像クリックによりページ切り替え無しで画像の拡大表示ができるようになるJavascript/CSSライブラリです。定番らしい。
公式サイト : Lightbox2
Lightboxサンプル
bxSliderとは
複数の画像をスクロールさせて表示できるようになるJavascript/CSSライブラリです。こういう表示方法は製品サイトのトップページでよく見かけますね。
公式サイト : jQuery Content Slider | Responsive jQuery Slider | bxSlider
bxSliderサンプル
Lightbox導入手順
※使用したバージョン v2.8.2
- 1.公式サイトからダウンロードし解凍する
- 2.必要なファイル( 「imagesフォルダ」「lightbox.css」「lightbox.min.js」 )をサーバーにアップロードする
- 3.はてなブログの「設定 > 詳細設定 > headに要素を追加」の箇所に以下のコードを記述
<link rel="stylesheet" href="ファイルをアップロードした場所/lightbox.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
- 4.はてなブログの「デザイン > カスタマイズ > ヘッダ」の箇所の先頭に以下のコードを記述
(※「設定 > 詳細設定 > headに要素を追加」に記述しても動作しなかったのでここで記述してます。)
<script src="ファイルをアップロードした場所/lightbox.min.js"></script>
- 5.ブログ記事(Markdown)に表示したい画像を記述
a
タグにdata-lightbox
属性を与えることでLightboxによる表示になります。data-title
属性でタイトルも付けられます。
<a data-lightbox="colors" data-title="テーマ色サンプル" href="Colors.png"> <img src="Colors.png" alt="テーマ色サンプル"> </a>
bxSlider導入手順
※使用したバージョン v4.1.2
- 1.公式サイトからダウンロードし解凍する
- 2.必要なファイル( 「imagesフォルダ」「jquery.bxslider.css」「jquery.bxslider.min.js」 )をサーバーにアップロードする
- 3.はてなブログの「設定 > 詳細設定 > headに要素を追加」の箇所に以下のコードを記述
Lightboxも利用する場合は2行目の''は全く同じなので不要です。
<link rel="stylesheet" href="ファイルをアップロードした場所/jquery.bxslider.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
- 4.はてなブログの「デザイン > カスタマイズ > ヘッダ」の箇所の先頭に以下のコードを記述
公式サイトのサンプルでは$(document).ready(function(){
と記述されていますが、なぜかそれだと動作しませんでした。
<script src="ファイルをアップロードした場所/jquery.bxslider.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ $('.bxslider').bxSlider({ /*ここにお好みの設定を記述*/ slideWidth: 320, slideMargin: 8, }); }); </script>
- 5.ブログ記事(Markdown)に表示したい画像を記述
全体を<div class="bxslider">
で囲い、個々の画像を<div>
で囲います。
<div class="bxslider"> <div><img src="Screen_01_00_PlaybackList.png" title ="再生リスト画面"></div> <div><img src="Screen_01_01_PlaybackList.png" title ="再生リスト画面(Artworkタブ)"></div> </div>
このように個々の<div>
の中のimg
タグをdata-lightbox
属性付きのa
タグで囲えば、画像クリック時にLightboxで表示させることもできます。
<div class="bxslider"> <div><a data-lightbox="playbacklist" href="Screen_01_00_PlaybackList.png"><img src="Screen_01_00_PlaybackList.png" title ="再生リスト画面"></a></div> <div><a data-lightbox="playbacklist" href="Screen_01_01_PlaybackList.png"><img src="Screen_01_01_PlaybackList.png" title ="再生リスト画面(Artworkタブ)"></a></div> </div>