LOGIN ID Password Auto Login Register Now! Lost Password?
XUGJ Forum

XCL2.2でJQuery版Lightboxを組み込むPreload

  • このフォーラムに新しいトピックを立てることはできません
  • このフォーラムではゲスト投稿が禁止されています

投稿ツリー


前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2010/11/10 16:00
moegiiro  2nd Class 居住地: 2006/05から  投稿数: 27
kilicaさん、皆さん、こんにちは。

先月行われたRYUSセミナーで、kilicaさんがXCL2.2ならJQuery組込用Preloadも簡単に作れます。と説明され、ウチの別サイトに実際に組込んでみました(^^)

まず、そもそもLightboxってなに?という方はこちら
もともとprototype.jsで作られたモノをJQueryに移植?したものですが、最新のバージョン0.5でグループ化の仕様が変更されてしまい、使い勝手が悪くなってしまったのですが、幸いprototype版と同じ方法でグループ化する手段を説明されているサイトが見つかったので、それらもあわせて、設置方法を記します。

1)こちらのサイトからJQuery版Lightboxをダウンロード
2)ファイルを html/common/js下に展開する
3)html/common/js/jquery-lightbox-0.5/js/jquery.lightbox-0.5.jsをエディターで開く
4)30行目からのコードを以下のように書きかえる
imageLoading: 'http://example.jp/common/js/jquery-lightbox-0.5/images/lightbox-ico-loading.gif',
imageBtnPrev: 'http://example.jp/common/js/jquery-lightbox-0.5/images/lightbox-btn-prev.gif',
imageBtnNext: 'http://example.jp/common/js/jquery-lightbox-0.5/images/lightbox-btn-next.gif',
imageBtnClose:'http://example.jp/common/js/jquery-lightbox-0.5/images/lightbox-btn-close.gif',
imageBlank:   'http://example.jp/common/js/jquery-lightbox-0.5/images/lightbox-blank.gif',
※赤字部分は適宜変えてください。また実際のコードから余白とコメントは削除しています。
5)必要に応じて、他のパラメーターを変更する
6)こちらのサイトを参考に、79〜82行目を以下のコードに書きかえる (prototype版と同じ動作にする)
    // Add an Array (as many as we have that match the objClicked 'rel' attr), with href and title atributes, inside the Array that storage the images references
    for ( var i = 0; i < jQueryMatchedObj.length; i++ ) {
        if(jQueryMatchedObj[i].getAttribute('rel')==objClicked.getAttribute('rel')) {
            settings.imageArray.push(new Array(jQueryMatchedObj[i].getAttribute('href'),jQueryMatchedObj[i].getAttribute('title')));
        }
    }
7)ファイルを保存して閉じる
8)エディターで新規ページを作る
9)以下のコードを張り付ける
<?php
	if (!defined('XOOPS_ROOT_PATH')) exit();
	class jQuery_lightbox extends XCube_ActionFilter
	{
		public function preBlockFilter() {
			$this->mRoot->mDelegateManager->add('Site.JQuery.AddFunction',array(&$this, 'addScript'));
		}
		public function addScript(&$jQuery) {
			$jQuery->addStylesheet('/common/js/jquery-lightbox-0.5/css/jquery.lightbox-0.5.css'); // media="screen"
			$jQuery->addLibrary('/common/js/jquery-lightbox-0.5/js/jquery.lightbox-0.5.js');
			$jQuery->addScript('$(function(){$("a[rel^=lightbox]").lightBox();});');
		}
	}
?>
10)ファイル名:jQuery_lightbox.class.phpとして html/preload/に保存する
以上で設置は完了しました。

では、実際に動作確認をしてみましょう。
picoやd3blogで、サンプル画像を試してみましょう。
<a href="http://example.jp/common/js/jquery-lightbox-0.5/photos/image1.jpg" title="1枚目" rel="lightbox[01]">
<img src="http://example.jp/common/js/jquery-lightbox-0.5/photos/thumb_image1.jpg" alt="" />
</a>
<a href="http://example.jp/common/js/jquery-lightbox-0.5/photos/image2.jpg" title="2枚目" rel="lightbox[01]">
<img src="http://example.jp/common/js/jquery-lightbox-0.5/photos/thumb_image2.jpg" alt="" />
</a>
※赤字部分は適宜変えてください。
うまくできたでしょうか??

実際にウチのサイトではこんな感じ (去年の記事です。季節柄。。)
(サイトはまだ構築中です。宣伝乙。。。)

kilicaさん、便利機能をありがとうございます(^^)/


PS.
$jQuery->addStylesheet()でmediaを指定できないんですね。ちょっと残念。。
html/modules/legacy/class/Legacy_HeaderScript.class.php をイジればいいのかな?

PS.2
Lightboxのバージョンが0.5から上がったら、動かなくなると思われます。。。
投票数:1 平均点:10.00
前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2010/11/11 17:14
Marijuana  Ensign 居住地: 明後日から  投稿数: 272
以下、全く動作確認してませんが、

9)の一部を
$jQuery->addScript('$(function(){$("a[rel^=lightbox]").lightBox({
imageLoading: '.XOOPS_URL.'"/common/js/jquery-lightbox-0.5/images/lightbox-ico-loading.gif",
imageBtnPrev: "'.XOOPS_URL.'/common/js/jquery-lightbox-0.5/images/lightbox-btn-prev.gif",
imageBtnNext: "'.XOOPS_URL.'/common/js/jquery-lightbox-0.5/images/lightbox-btn-next.gif",
imageBtnClose: "'.XOOPS_URL.'/common/js/jquery-lightbox-0.5/images/lightbox-btn-close.gif",
imageBlank: "'.XOOPS_URL.'/common/js/jquery-lightbox-0.5/images/lightbox-blank.gif"
});});');
こんな感じにすると、4)は不要になって、5)もこの部分に書けると思います。
これならサイト毎に書き換える必要もなくなるんじゃないかと
投票数:1 平均点:10.00
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2010/11/11 23:30
moegiiro  2nd Class 居住地: 2006/05から  投稿数: 27
Marijuanaさん
アドバイスありがとうございます!

いただいたコードで試してみたところ、、、
最初は動かなかったのですが、imageLoading:行のダブルクォートの位置が以降の行と違うので
同じ位置に変更したところ、しっかりと動作しました。
これなら 4) 5) が不要になって、楽チンです(^^)
どうもありがとうございました。

ウチでは↓としてみました。
$jQuery->addScript('$(function(){$("a[rel^=lightbox]").lightBox({
overlayOpacity      : 0.8,
containerResizeSpeed: 1000,
txtImage            : "",
txtOf               : "/",
imageLoading        : "'.XOOPS_URL.'/common/js/jquery-lightbox-0.5/images/lightbox-ico-loading.gif",
imageBtnPrev        : "'.XOOPS_URL.'/common/js/jquery-lightbox-0.5/images/lightbox-btn-prev.gif",
imageBtnNext        : "'.XOOPS_URL.'/common/js/jquery-lightbox-0.5/images/lightbox-btn-next.gif",
imageBtnClose       : "'.XOOPS_URL.'/common/js/jquery-lightbox-0.5/images/lightbox-btn-close.gif",
imageBlank          : "'.XOOPS_URL.'/common/js/jquery-lightbox-0.5/images/lightbox-blank.gif"
});});');

// 今月のRYUSセミナーでは、よろしくお願いいたします!(何を??)
投票数:1 平均点:10.00
  条件検索へ

Back to Page Top
MainMenu
Manuals
Search
XOOPS Official & Dev.
XOOPS Communities