はじめに
NP_CustomThumbnailにLightboxPlusの機能を統合したpluginとLyteboxを導入し、画像をスライドショー形式で表示できるようにします。
プラグインのインストール
nucleusフォーラムからダウンロードしてきた「NP_CustomThumbnail_RC2.zip」を解凍し、フォルダの中身を /var/www/example/nucleus/plugins/にアップロードし、管理画面のプラグイン管理からインストールします。
プラグインの設定
お好みに合わせて実施して下さい。本サイトでは以下の修正を行いました。
- プラグインの管理→Custom Thumbnailの「オプション編集」を選択
ネイル画像の横幅の最大値。(px) 240→320 サムネイル画像の高さ幅の最大値。(px) 180→240 アイテム中の<%image(…)%>をサムネイル画像に置き換える いいえ→はい 指定サイズより小さな画像に対しても処理する (拡大され画質が落ちます) いいえ→はい ※本来、lightboxを使うならpopupのみでよさそうですが、本サイトではすでにimageで大量の記事を書いてしまっているため、imageもサムネイル画像に置き換える設定としています。
- サンガツさんのサイトを参考に画像保存ディレクトリを作成
# mkdir /var/www/example/media/1 /var/www/example/media/thumbnail # chown www-data.www-data /var/www/example/media/1 /var/www/example/media/thumbnail # chmod 777 /var/www/example/media/1 /var/www/example/media/thumbnail
- 元画像(クリックされて表示される想定の画像)を上記ディレクトリ「1」にアップロード
- 管理ホーム→アイテムの編集にて以下のように画像貼り付け
<div class="leftbox"><%image(airindia.jpg|320|240|エアーインディア)%></div>日本出発時に撮ったエアーインディアです。 <br clear="all" />
- header部分に以下の一行を追加(初期状態であればスキン編集→個別アイテムページに追加)
<head> <%parsedinclude(head)%> <%parsedinclude(navigation)%> <%CustomThumbnail(head)%> </head>
- サイトにアクセスして画像をクリック
※サムネイル画像の生成がバックグラウンドで行われるため、サーバスペックによっては時間がかかります。
Lyteboxの設定
- 関連ファイルの設置
Lyteboxの公式サイトからzipファイルをダウンロードして解凍します。
解凍後、lytebox.js、lytebox.css、imagesフォルダを/var/www/example/js/の直下に置きます。
- スキン編集→個別アイテムページの編集
先ほど追加したばかりの行を再度編集します。<head> <%parsedinclude(head)%> <%parsedinclude(navigation)%>
<%CustomThumbnail(head)%><script type="text/javascript" language="javascript" src="/js/lytebox/lytebox.js"></script> <link rel="stylesheet" href="/js/lytebox/lytebox.css" type="text/css" media="screen" /> </head> - プラグイン管理→Custom Thumbnailのオプション編集
「a要素に加える属性」を以下のように修正します。rel="lightbox"rel="lytebox[]" - IE対応
この設定だけだとIE8でcloseなどが表示されないため、/js/lytebox/lytebox.jsの81行目
付近を以下のように修正します修正するthis.ie = (document.all && !window.opera) ? true : false;this.ie = (document.all && !window.opera && document.documentMode != 8) ? true : false;
- 参考文献
