OpenPNE３　画像表示にlightbox

OpenPEN設置環境

・OpenPNEのバージョン
[OpenPNE3.8.20]

・Pluginバージョン
[opDiaryPlugin 1.5.1]

・運用環境
[kagoyaレンタル専用サーバー]

Apacheバージョン Apache/2.4.20
MySQLバージョン 5.6.22 (Ver 14.14 Distrib 5.6.22)
PHP 5.6.23

・OpenPNE設置場所
WEBサイト閲覧用ルートディレクトリー(public_html)にサブディレクトリー
(openpne)のフィルダーを作成展開

////////////////////////////////////////////////////////////////////////////////

・日記・日記コメントの画像表示にLightboxを使用するためのカスタマイズ

[参考サイト]
http://itkan-kei.blogspot.jp/2016/02/openpne.html

————————————————————————————————————————–
■【日記本文の写真をlightboxで表示】

[修正ディレクトリー]
/public_html/openpne/plugins/opDiaryPlugin/apps/pc_frontend/modules/diary/templates

[修正ファイル]
showSuccess.php

[修正箇所]下記　－：削除　　+：追加

オリジナル（変更前）

<?php use_helper('opDiary', 'Text') ?>
-
<?php decorate_with('layoutB') ?>
<?php slot('op_sidemenu', get_component('diary', 'sidemenu', array('member' => $member, 'year' =>

カスタマイズ（変更後）

<?php use_helper('opDiary', 'Text') ?>
+ <?php use_javascript('/opDiaryPlugin/js/lightbox.js', 'last') ?>
+ <?php use_stylesheet('/opDiaryPlugin/css/lightbox.css', 'last') ?>
<?php decorate_with('layoutB') ?>
<?php slot('op_sidemenu', get_component('diary', 'sidemenu', array('member' => $member, 'year' =>

オリジナル（変更前）

<ul class="photo">
<?php foreach ($images as $image): ?>
- <li><a href="<?php echo sf_image_path($image->File) ?>" target="_blank"><?php echo image_tag_sf_image($image->File, array('size' => '120x120')) ?></a></li>
<?php endforeach; ?>
</ul>

カスタマイズ（変更後）

<ul class="photo">
<?php foreach ($images as $image): ?>
+ <li><a href="<?php echo sf_image_path($image->File) ?>"rel="lightbox[photo]"><?php echo image_tag_sf_image($image->File, array('size' => '120x120')) ?></a></li>
<?php endforeach; ?>
</ul>

————————————————————————————————————————–
■【日記コメントの写真をlightboxで表示】

[修正ディレクトリー]
/public_html/openpne/plugins/opDiaryPlugin-1.5.1/apps/pc_frontend/modules/diaryComment/templates

[修正ファイル]
_list.php

[修正箇所]下記　－：削除　　+：追加

オリジナル（変更前）

<ul class="photo">
<?php foreach ($images as $image): ?>
- <li><a href="<?php echo sf_image_path($image->File) ?>" target="_blank"><?php echo image_tag_sf_image($image->File, array('size' => '120x120')) ?></a></li>
<?php endforeach; ?>
</ul>

カスタマイズ（変更後）

<ul class="photo">
<?php foreach ($images as $image): ?>
+ <li><a href="<?php echo sf_image_path($image->File) ?>"rel="lightbox[photo]"><?php echo image_tag_sf_image($image->File, array('size' => '120x120')) ?></a></li>
<?php endforeach; ?>
</ul>

————————————————————————————————————————–
■【lightboxを使用した場合にloadingマークとcloseマークが表示されない不具合修正】

（原因）
画像指定先フォルダーにloadingマークとcloseマークがないため

[修正ディレクトリー]
/public_html/openpne/plugins/opDiaryPlugin/web/js

[修正ファイル]
lightbox.js

[修正箇所]下記　－：削除　　+：追加

オリジナル（変更前）

    function LightboxOptions() {
      this.fileLoadingImage = '/opTimelinePlugin/images/loading.gif';
      this.fileCloseImage = '/opTimelinePlugin/images/close.png';
      this.resizeDuration = 700;
      this.fadeDuration = 500;
      this.labelImage = "Image";
      this.labelOf = "of";

カスタマイズ（変更後）

    function LightboxOptions() {
      this.fileLoadingImage = '/openpne/plugins/opDiaryPlugin/web/images/loading.gif';
      this.fileCloseImage = '/openpne/plugins/opDiaryPlugin/web/images/close.png';
      this.resizeDuration = 700;
      this.fadeDuration = 500;
      this.labelImage = "Image";
      this.labelOf = "of";

http://lokeshdhakar.com/projects/lightbox2/からdownloadにて\lightbox2-master\src\imagesのフォルダーに上記設定した保存場所へコピーして下さい。