ホーム  >  Forum  >  その他  >  XOOPSカスタマイズ  >  XOOPS サイトに Lightbox plus を導入しよう

XOOPS サイトに Lightbox plus を導入しよう

前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 .2 .3 .4 .5 | 投稿日時 2007-3-8 0:41 | 最終変更
Photo Site Links  管理人 居住地: 北名古屋市  投稿数: 1503
Lightbox Plus は、Lightbox JSをベースに画像のリサイズなどの機能を追加したスクリプトです。

画像のサムネールをクリックした場合、別画面が開いて表示するのではなく、同じウィンドウ内に画像を表示させるという Lightbox JS の特長はそのままに、ウィンドウサイズよりも大きな画像を表示した場合に自動的にリサイズして表示する機能、マウスホイールで画像の拡大率を変更できる機能などが追加されています。

この「Lightbox Plus」をXOOPSサイトに導入するには、
まず、配布元のサイト「SerendipityNZ Ltd.」 さんから、スクリプトをダウンロードし、

ダウンロードした
js/lightbox.js の末尾
addEvent(window,"load",function() {
  var lightbox = new LightBox({
    loadingimg:'loading.gif',
    expandimg:'expand.gif',
    shrinkimg:'shrink.gif',
    previmg:'prev.gif',
    nextimg:'next.gif',
    effectimg:'zzoop.gif',
    effectpos:{x:-20,y:-20},
    effectclass:'effectable',
    closeimg:'close.gif',
    resizable:true
  });
});

css/lightbox.css
22行目・27行目
#lightboxOverallView {
background-image: url(overlay.png);
}
* html #lightboxOverallView,
* html #overlay {
background-color: #000;
background-image: url(blank.gif);
filter: Alpha(opacity=50);
}
上記の画像ファイルを http://から始まる絶対パスで指定します(朱書き部分を修正)。

−−−−
次に、以下の内容を、利用しているテーマのtheme.htmlに追記します。
<link rel="stylesheet" href="<{$xoops_url}>/lightbox_plus/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="<{$xoops_url}>/lightbox_plus/js/spica.js"></script>
<script type="text/javascript" src="<{$xoops_url}>/lightbox_plus/js/lightbox_plus.js"></script>

※ 朱書き部分は、Lightbox Plus のファイルを置いたディレクトリ名に合わせて修正
※ spica.js を必ず先に記述する必要があります

−−−−
以下は、Xoops 2.0xの場合にのみ修正が必要です。XCLではpreloadをお試しください。

次に、function &xoopsCodeDecodeを次のように修正(朱書き部分を追記)

class/module.textsanitizer.php 147行目あたり
    function &xoopsCodeDecode(&$text, $allowimage = 1)
    {
        $imgCallbackPattern = "/\[img( align=\w+)]([^\"\(\)\?\&'<>]*)\[\/img\]/sU";
        $text = preg_replace_callback($imgCallbackPattern, array($this, '_filterImgUrl'), $text);

        $patterns_img = "/\[url=(['\"]?)(http[s]?:\/\/[^\"'<>]*)\\1]\[img(.*)\[\/img\]\[\/url\]/sU";
        $replacements_img = '<a href="\\2" rel="lightbox">[img\\3[/img]</a>';
        $text = preg_replace($patterns_img, $replacements_img, $text);

        $patterns = array();
        $replacements = array();

−−−−
以上の修正で、XOOPSサイトで Lightbox Plus を利用できるようになります。

--
==================================
Photo Site Links 管理人 Toshi
Camera ISLAND にも遊びに来てね
http://www.cameraisland.com/
==================================

添付ファイル(0) 投票数:92 平均点:5.00
返信する
前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2007-3-8 1:14 | 最終変更
Photo Site Links  管理人 居住地: 北名古屋市  投稿数: 1503
以下は、Xoops 2.0xの場合にのみ修正が必要です。XCLではpreloadをお試しください。

先の投稿は、imgタグで貼りつけた画像では Lightbox Plus を利用できますが、siteimgタグで貼りつけた画像は Lightbox Plus を利用することができません。

siteimgタグで貼りつけた画像も Lightbox Plus を利用して表示させるためには、さらに class/module.textsanitizer.php を修正する必要があります。

    function &xoopsCodeDecode(&$text, $allowimage = 1)
    {
        $imgCallbackPattern = "/\[img( align=\w+)]([^\"\(\)\?\&'<>]*)\[\/img\]/sU";
        $text = preg_replace_callback($imgCallbackPattern, array($this, '_filterImgUrl'), $text);

        $patterns_img = "/\[url=(['\"]?)(http[s]?:\/\/[^\"'<>]*)\\1]\[img(.*)\[\/img\]\[\/url\]/sU";
        $replacements_img = '<a href="\\2" rel="lightbox">[img\\3[/img]</a>';
        $text = preg_replace($patterns_img, $replacements_img, $text);

        $patterns_simg = "/\[siteurl=(['\"]?)([^\"'<>]*)\\1]\[siteimg(.*)\[\/siteimg\]\[\/siteurl\]/sU";
        $replacements_simg = '<a href="'.XOOPS_URL.'/\\2" rel="lightbox">[siteimg\\3[/siteimg]</a>';
        $text = preg_replace($patterns_simg, $replacements_simg, $text);

        $patterns = array();
        $replacements = array();
        if ($allowimage == 1) {
            $patterns[] = "/\[siteimg align=(['\"]?)(left|center|right)\\1]([^\"\(\)\?\&'<>]*)\[\/siteimg\]/sU";
            $replacements[] = '<img src="'.XOOPS_URL.'/\\3" align="\\2" alt="" />';
            $patterns[] = "/\[siteimg]([^\"\(\)\?\&'<>]*)\[\/siteimg\]/sU";
            $replacements[] = '<img src="'.XOOPS_URL.'/\\1" alt="" />';
        }

青字部分が siteimgタグで貼りつけた画像を Lightbox Plus を利用して表示させるためのコード、緑字の部分は XOOPSで siteimgタグを利用するために必要なコードです。

--
==================================
Photo Site Links 管理人 Toshi
Camera ISLAND にも遊びに来てね
http://www.cameraisland.com/
==================================

添付ファイル(0) 投票数:89 平均点:4.16
返信する
前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 .2 | 投稿日時 2007-3-8 1:52
Photo Site Links  管理人 居住地: 北名古屋市  投稿数: 1503
myAlbum-Pの投稿写真は、テンプレートを修正することで、Lightbox Plus を利用して表示できるようになります。

テンプレート myalbum_photo.html 28行目あたり
<a href="<{$photo.ahref_photo}>" target="_blank" onClick="window.open('<{$photo.ahref_photo}>','','width=<{$photo.window_x}>,height=<{$photo.window_y}>');return(false);"><img src="<{$photo.imgsrc_photo}>" border="0" align="center" vspace="3" hspace="7" alt="<{$photo.title}>" title="<{$photo.title}>" <{$photo.width_height}> /></a>

<a href="<{$photo.ahref_photo}>" rel="lightbox"><img src="<{$photo.imgsrc_photo}>" border="0" align="center" vspace="3" hspace="7" alt="<{$photo.title}>" title="<{$photo.title}>" <{$photo.width_height}> /></a>
に修正

--
==================================
Photo Site Links 管理人 Toshi
Camera ISLAND にも遊びに来てね
http://www.cameraisland.com/
==================================

添付ファイル(0) 投票数:85 平均点:4.35
返信する
前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2007-3-8 2:02
Photo Site Links  管理人 居住地: 北名古屋市  投稿数: 1503
YYBBS-0.59改の投稿写真も、テンプレートを修正することで、Lightbox Plus を利用して表示できます。

テンプレート yybbs_item.html 50行目あたり
<a href="<{$xoops_url}><{$load_dir}>/<{$bbs.bbs_id}>-<{$item.serial}>.<{$item.ext}>" target="_blank"><img src="<{$xoops_url}><{$thumb_dir}>/<{$bbs.bbs_id}>-<{$item.serial}>.<{$item.ext}>" alt="" style="float:left; border:none; padding:0 20px 7px 0; width:<{$item.thumb_w}>px; height:<{$item.thumb_h}>px;" /></a>

<a href="<{$xoops_url}><{$load_dir}>/<{$bbs.bbs_id}>-<{$item.serial}>.<{$item.ext}>" rel="lightbox" title="<{$item.title}>"><img src="<{$xoops_url}><{$thumb_dir}>/<{$bbs.bbs_id}>-<{$item.serial}>.<{$item.ext}>" alt="<{$item.title}>" style="float:left; border:none; padding:0 20px 7px 0; width:<{$item.thumb_w}>px; height:<{$item.thumb_h}>px;" /></a>
に修正

--
==================================
Photo Site Links 管理人 Toshi
Camera ISLAND にも遊びに来てね
http://www.cameraisland.com/
==================================

添付ファイル(0) 投票数:88 平均点:4.89
返信する
前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2007-4-29 19:52 | 最終変更
Photo Site Links  管理人 居住地: 北名古屋市  投稿数: 1503
Cube 2.1 で、preload を使って Lightbox Plus を導入しようと、いろいろ試しているところですが、なかなかうまくいきません

次のように、ハックしてしまえば、とりあえず Lightbox Plus で表示できるようになるのですが、、、

Cube 2.1 ではできるだけハックではなくて、preload で実現したくて、いろいろ試してますが、うまくいきましぇん、、ただいま勉強中です

【preloadができましたので、このハックはなかったことに
modules/legacy/kernel/Legacy_TextFilter.class.php の 275行目あたり
    function makeXCodeConvertTable(&$patterns, &$replacements) {
        $patterns[] = "/\[url=(['\"]?)(http[s]?:\/\/[^\"'<>]*)\\1]\[img(.*)\[\/img\]\[\/url\]/sU";
        $replacements[0][] = $replacements[1][] = '<a href="\\2" rel="lightbox">[img\\3[/img]</a>';
        $patterns[] = "/\[siteurl=(['\"]?)([^\"'<>]*)\\1]\[siteimg(.*)\[\/siteimg\]\[\/siteurl\]/sU";
        $replacements[0][] = $replacements[1][] = '<a href="'.XOOPS_URL.'/\\2" rel="lightbox">[siteimg\\3[/siteimg]</a>';
        $patterns[] = "/\[siteurl=(['\"]?)([^\"'<>]*)\\1](.*)\[\/siteurl\]/sU";
        $replacements[0][] = $replacements[1][] = '<a href="'.XOOPS_URL.'/\\2" target="_blank">\\3</a>';
        $patterns[] = "/\[url=(['\"]?)(http[s]?:\/\/[^\"'<>]*)\\1](.*)\[\/url\]/sU";

function makeXCodeConvertTable 内に朱書部分の4行を追記。
※投稿の都合上、[1]を全角にしましたが、実際には半角です。

--
==================================
Photo Site Links 管理人 Toshi
Camera ISLAND にも遊びに来てね
http://www.cameraisland.com/
==================================

添付ファイル(0) 投票数:99 平均点:4.44
返信する
前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2007-5-2 15:31 | 最終変更
Photo Site Links  管理人 居住地: 北名古屋市  投稿数: 1503
XOOPS Cube Legacy 2.1.0 用の preload がやっとできました。

【ダウンロード】 ← クリックしてください

解凍すると "html/preload/" というディレクトリが展開され、このディレクトリの中にlightbox.class.phpという preload があります。

なお、この preload を利用してもすぐに Lightbox Plus で表示できるわけではありません。

lightbox.js などのスクリプトを適切に配置し、利用しているテーマのtheme.html を修正したうえで、preload を導入してください。

--
==================================
Photo Site Links 管理人 Toshi
Camera ISLAND にも遊びに来てね
http://www.cameraisland.com/
==================================

添付ファイル(0) 投票数:92 平均点:5.00
返信する
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2007-5-22 14:51 | 最終変更
Ujiki.oO 
はじめまして、Ujiki.oOと言います。
XOOPS+Lightbox検索でやってきました。なかなかクールですね。
当方も自力で、最小限のクライアントサイドプロセスの負荷となるように、画像を扱う場合のみに、myAlbum-Pの「 photo.php 」のみですが、Lightbox Plus をクライアントサイドプロセスに構築します。
全てのテーマは変更せず、それでもhead内にLightbox環境をサーバーサイドで埋め込みますです。
添付ファイル(0) 投票数:90 平均点:5.00
返信する
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2008-1-17 6:06 | 最終変更
Photo Site Links  管理人 居住地: 北名古屋市  投稿数: 1503
現在ダウンロードできる preload では、グループ名を指定できるようにしていますが、記事を投稿する毎にグループ名を入力するのはちょっと面倒ですね。

Smarty の修正子を使ってモジュールのテンプレートを修正すると、グループ名を自動的に挿入することもできますので、こちらの方が便利かもしれません。

例えば、bulletin 2.0 の場合、bulletin_item.htm の <{$story.text}> を
<{$story.text|replace:"rel=\"lightbox\"":"rel=\"lightbox[`$story.id`]\""}>
に修正

module.textsanitizer.php を修正済、または preload を導入済の場合は、これで bulletin の記事毎にグループ名を自動的に挿入することができます。

なお、preload を導入済の場合は、次のようにすれば、任意のグループ名を入力することができます。

 [url=画像URL lb=グループ名][img align=left]サムネイルURL[/img][/url]*1
または
 [siteurl=画像URL lb=グループ名][siteimg align=left]サムネイルURL[/siteimg][/siteurl]

*1  投稿の都合上全角にしていますが、実際には半角で入力してください。

--
==================================
Photo Site Links 管理人 Toshi
Camera ISLAND にも遊びに来てね
http://www.cameraisland.com/
==================================

添付ファイル(0) 投票数:1 平均点:10.00
返信する
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2008-1-21 7:08 | 最終変更
Photo Site Links  管理人 居住地: 北名古屋市  投稿数: 1503
Lightbox 用の preload におまけとして、Lightbox のビデオ版「Videobox」用のタグを BBCodeで入力できる Videobox.class.php を同梱しました。

「Videobox」は、Youtube、Metacafe、Google Video、iFilm などの動画を Lightbox風に観覧できるスクリプトです。

Videobox.class.php をサイトプリロードディレクトリに入れると、Videobox で表示するのに必要なタグを BBCode で入力できるようになります。

【使い方】*2*3
(1) 基本的な使い方
 [videobox=動画URL]テキスト[/videobox]・・・(テキストリンクにする場合)
 [videobox=動画URL][img=サムネイルURL[/img][/videobox]・・・(サムネイル画像にリンクにする場合)

(2) タイトルを入力する場合
 [videobox=動画URL title=タイトル]テキスト[/videobox]・・・(テキストリンクにする場合)
 [videobox=動画URL title=タイトル][img=サムネイルURL[/img][/videobox]・・・(サムネイル画像にリンクにする場合)

(3) タイトルと表示サイズを入力する場合
 [videobox=動画URL title=タイトル w=横幅(ピクセル) h=縦幅(ピクセル)]テキスト[/videobox]・・・(テキストリンクにする場合)
 [videobox=動画URL title=タイトル w=横幅(ピクセル) h=縦幅(ピクセル)][img=サムネイルURL[/img][/videobox]・・・(サムネイル画像にリンクにする場合)

*2  投稿の都合上全角にしていますが、実際には半角で入力してください。
*3  表示サイズのみの入力には対応していません。また、グループ名とタイトルの文中に空白を含めないでください。空白があるとうまく動作しません。

なお、この preload を利用してもすぐに Videobox で表示できるわけではありません。

videobox.js などのスクリプトを適切に配置し、利用しているテーマの theme.html を修正したうえで、preload を導入してください。

【参考記事】
Videobox: Lightbox for videos
http://videobox-lb.sourceforge.net/

【Lightbox と Videobox の併用について】
Lightbox と Videobox を同時に使おうとすると、うまく動かない場合があるようです。

その場合は、$cancel_module を利用してモジュールによって使い分けるか、Slimbox をお試しください。
http://www.digitalia.be/software/slimbox
添付ファイル(0) 投票数:0 平均点:0.00
返信する
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2008-2-1 19:48 | 最終変更
Photo Site Links  管理人 居住地: 北名古屋市  投稿数: 1503
「Lightbox & Videobox preload for XOOPS Cube Legacy 2.1」に、theme.html の修正をしなくても、簡単に Lightbox を導入できるようにする preload を同梱するようにしました。

また、Videobox、GreyBox、Highslide、Lightview、Thickbox 用にも、同様の preload を同梱しています。

この preload は、次の所定のディレクトリに、スクリプトなどのファイルが配置されていることを前提に動作します。

「Lightbox & Videobox preload for XOOPS Cube Legacy 2.1」でのデフォルトのディレクトリ

(1) Lightboxset.class.php - Lightbox 2.0 用
  html/javascript/lightbox/js 内にスクリプト
  html/javascript/lightbox/css 内に lightbox.css
  html/javascript/lightbox/images 内に 画像ファイル
 
(2) Liteboxset.class.php - Litebox 用
  html/javascript/litebox/js 内に litebox-1.0.js、prototype.lite.js、moo.fx.js
  html/javascript/litebox/css 内に lightbox.css
  html/javascript/litebox/images 内に 画像ファイル
  
(3) Lightbox_plusset.class.php - Lightbox plus 用
  html/javascript/lightbox_plus/js 内にスクリプト
  html/javascript/lightbox_plus/css 内に lightbox.css
  html/javascript/lightbox_plus/images 内に 画像ファイル
  
(4) Slimboxset.class.php - Slimbox 用
  html/javascript/slimbox/js 内に slimbox.js、mootools.js
  html/javascript/slimbox/css 内に slimbox.css と画像ファイル

(5) Videoboxset.class.php - Videobox 用
  html/javascript/videobox/js 内にスクリプト
  html/javascript/videobox/css 内に videobox.css と画像ファイル

別のディレクトリにスクリプトを置きたい場合は、preload の 20行目あたり

$jspath = 'javascript/lightbox';

を修正してください。

 修正例 XOOPS_ROOT_PATH/sample/lightbox/ に置く場合、sample/lightbox と記入
 ※ XOOPS_ROOT_PATH/ の部分と最後の / は記入しないでください。
 ※ なお、ファイルの配置は変更しないでください。
 
【アサインを無効にするモジュールの設定】
preload の 24行目あたり

$cancel_module = "";

で、アサインを無効にするモジュールを設定することができます。

アサインを無効にするモジュールを設定する場合は、"|"でモジュールのディレクトリを区切って記入してください。

 設定例 $cancel_module = "newbb|news";
 
【トップページへのアサインを無効にする場合の設定】
preload の 27行目

$cancel_top = "1";

とすると、トップページへのアサインを無効にすることができます。

【使用上の注意事項】
この preload は、theme.html に <{$xoops_module_header}> が記述されていることを前提に動作します。

たいていの theme.html には <{$xoops_module_header}> が記述されているかと思いますが、もし無ければ <head>内に <{$xoops_module_header}> を記述したうえでお使いください。

この 3つの preload を使用しない場合は、lightbox.js などのスクリプトを適切に配置し、利用しているテーマの theme.html を修正したうえで、preload を導入してください。
添付ファイル(0) 投票数:0 平均点:0.00
返信する
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2008-11-10 14:30
優作 
はじめまして、
貴サイトを参考にさせていただきながら、
サイトのlightboxの設置をしようとしたのですが、
40時間ほど試行錯誤して、未だに設置できておりません。
お力添え頂ければ幸いです。


環境は以下のとおりです。
CORESERVER
メインドメイン:www.example.com
サブドメイン:www.test.com

XOOPS Cube 2.1.3
myalbum2.88
lightbox2.04



デイレクトリ構造
root/xoops_trust_path
/public_html/www.test.com
/xoops/modules
/themes
/lightbox2.04
/uploads
/.....


テーマはBCOOLさんのchampagne_goldfを使わせて頂いておりまして、
ヘッダに次のように追記しています。
    <link rel="stylesheet" type="text/css" media="screen,tv" href="<{$xoops_themecss}>" />
    <link rel="stylesheet" type="text/css" media="print" href="<{$xoops_imageurl}>css/print.css" />
追記⇒<link rel="stylesheet" href="<{$xoops_url}>/lightbox2.04/css/lightbox.css" type="text/css" media="screen" />
    <!-- RMV: added module header -->
    <{$xoops_module_header}>
    <{$xoops_block_header}>
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
追記⇒<script type="text/javascript" src="<{$xoops_url}>/lightbox2.04/js/prototype.js"></script>
追記⇒<script type="text/javascript" src="<{$xoops_url}>/lightbox2.04/js/scriptaculous.js?load=effects"></script>
追記⇒<script type="text/javascript" src="<{$xoops_url}>/lightbox2.04/js/lightbox.js"></script>
    <script type="text/javascript">
    <!--
    <{$xoops_js}>
    //-->
    </script>
    </head>


まずは、手入力で動作確認しようと、
pico,d3blog,d3forum,テーマに直接,次のように数種類書いてみましたが、
lightboxが立ち上がらず、IEの画面で表示されるだけでした。

<a href="<{$xoops_url}>/uploads/photos/8.jpg" title="ttt" rel="lightbox[]" ><img src="<{$xoops_url}>/uploads/thumbs/8.jpg" width="100" height="40" alt="" /></a>
<a href="<{$xoops_url}>/uploads/photos/8.jpg" title="ttt" rel="lightbox" ><img src="<{$xoops_url}>/uploads/thumbs/8.jpg" width="100" height="40" alt="" /></a>
<a href="<{$xoops_url}>/uploads/photos/8.jpg" rel="lightbox" >テスト</a>
<a href="<{$xoops_url}>/uploads/photos/8.jpg" ><img src="<{$xoops_url}>/uploads/thumbs/8.jpg" width="100" height="40" alt="" /></a>


CORESERVERの問題かな?とは思うのですが、
ネット上で検索して、色々とトライしてみたのですが、どうにも分かりません。

お力添え頂きたく、よろしくお願いいたします。

優作
添付ファイル(0) 投票数:0 平均点:0.00
返信する
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2008-11-15 16:24
Photo Site Links  管理人 居住地: 北名古屋市  投稿数: 1503
XUGJ とマルチポストで、既に fabi さんのレスが付いてますから、解決済にしておきますよ。

しかし、fabi さんのレスで解決したかどうかぐらい、報告すればいいと思うけど。
添付ファイル(0) 投票数:0 平均点:0.00
返信する

このトピックに投稿する

題名
ゲスト名   :
投稿本文
url email imgsrc image code quote
サンプル
bold italic underline linethrough   

 [もっと...]

  条件検索へ


トラックバック
トラックバックURL
http://www.photositelinks.com/modules/tbAny/tb.php/1359
検索






























In + Out ランキング
最近のトラックバック
https://healthtipsblogweb.wordpress.com/2017/05/17/garcinia-cambogia-plus-review-does-this-dieta... 
by Https://healthtipsblogweb.wordpress.com/2017/05/17/garcinia-cambogia-plus-review-does-this-dietary-supplement-work/
https://healthtipsblogweb.wordpress.com/2017/05/17/garcinia-cambogia-plus-review-does-this-dieta... 
by Https://healthtipsblogweb.wordpress.com/2017/05/17/garcinia-cambogia-plus-review-does-this-dietary-supplement-work/