Warning: Constants may only evaluate to scalar values in /home/partner/public_html/open/wp-content/plugins/file-manager-advanced/constants.php on line 13

Warning: Constants may only evaluate to scalar values in /home/partner/public_html/open/wp-content/plugins/file-manager-advanced/constants.php on line 25
OpenPNE3 画像表示にlightbox | Open Life Diary

OpenPNE3 画像表示に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のフォルダーに上記設定した保存場所へコピーして下さい。

スポンサーリンク
広告
広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
広告