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

BBCodeでもXCL2.2でJQuery版prettyPhotoでLightbox風

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

投稿ツリー


前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 .2 | 投稿日時 2011/7/27 2:24 | 最終変更
domifara  Ensign   投稿数: 300
以前のスレッド
「XCL2.2でJQuery版Lightboxを組み込むPreload」
http://www.xugj.org/modules/d3forum/index.php?topic_id=1073
が、あるのは知っていたのですが
組み込むのが面倒で・・それにHTM許可専用で入力時用で
BBCodeには対応できないし

とりあえずXCL2.2なら
初めからに入っているprettyPhoto用に
(prettyPhotoは新しくするのがお勧め)
preloadを作成してみました。

BBCode用に考えました。
汎用ではないのですが・・以下にそれは説明

下記のpreloadの
ダウンロードはこちら
jQuery_Pretty_preload.zip 
XOOPS_ROOT_PATH/preload の中に入れるだけです
画像の統合管理をすでにしている方は
お試しください。


myalbum-Pやwebphotoでイメージ統合している人は
サムネイル挿入として
[siteurl=uploads/webphoto/photos/s00002s4d43dfb682572.jpg]
[siteimg align=right]uploads/webphoto/thumbs/o00002o4d43dfb6ab5d2.jpg[/siteimg]
[/siteurl]
siteurlかurlのBBcodeで挟んだ
サムネイル表示の挿入が可能となっている人いるはずです。

そこで、BBCode -->HTML サニタイズの現状どうなっているかというと
XCL2.2では、XCL2.1まで異なります。
[url= のBBCodeとか [siteurl= の BBCodeとか
が、
XCL2.1までは
HTML化するときに、
 target="_blank" の指定で画像をクリックすると別ページとして開く指定でしたが

XCL2.2からは、
HTML化するときに、
rel="external" の追加のみの変更になりました。

XCL2.1と同様に別ページをとして開くには、
extras/extra_preload ディレクトリのjQuery_ExternalLink.class.php
をpreloadに入れれば2.1と同様に動くという変更になっています。

この、別ページを開くというのが今風でないので

prettyPhotoでLightbox風にしてみようと


WARP_xcl22ではそれなりに動いたのですが?

preload
jQuery_Pretty.class.php
改定第2版
改定第3版
<?php
/**
 * @file jQuery_Pretty.class.php
 * @package For legacy Cube Legacy 2.2
 * @version $Id: jQuery_Pretty.class.php ver0.01 2011/07/27  00:40:00 domifara  $
 */

if (!defined('XOOPS_ROOT_PATH')) exit();

class jQuery_Pretty extends XCube_ActionFilter
{
	public function preBlockFilter()
	{
		$this->mRoot->mDelegateManager->add('Site.JQuery.AddFunction',array(&$this, 'addScript'));
	}

	public function addScript(&$jQuery)
	{
		$jQuery->addLibrary('/common/prettyphoto/js/jquery.prettyPhoto.js', true);
		$jQuery->addStylesheet('/common/prettyphoto/css/prettyPhoto.css', true);
		$jQuery->addScript("
jQuery(document).ready(function($){
	//The img element has a child element
	$(\"img\").closest(\"a[rel^='external']\").each(function(i, elem){
		if (typeof elem != 'undefined'){
			if (typeof $(elem).attr('rel') != 'undefined'){
				if (typeof $(elem).attr('href') != 'undefined'){
					var itemSrc = $(elem).attr('href');
					if (typeof itemSrc != 'undefined' && itemSrc != ''){
						if (pretty_getFileType(itemSrc) != 'link'){
							//add a class
							$(elem).addClass('pretty');
							$(elem).attr({rel:'pretty[gallery]'});
						}
					}
				}
			}
		}
	});

	//pettyPhoto init
	$(\"a.pretty\").prettyPhoto({
		overlay_gallery: false,
		theme: 'facebook'
	});
	function pretty_getFileType(itemSrc){
		if (itemSrc.match(/youtube\.com\/watch/i)) {
			return 'youtube';
		}else if (itemSrc.match(/vimeo\.com/i)) {
			return 'vimeo';
		}else if(itemSrc.match(/\b.mov\b/i)){
			return 'quicktime';
		}else if(itemSrc.match(/\b.swf\b/i)){
			return 'flash';
		}else if(itemSrc.match(/\biframe=true\b/i)){
			return 'iframe';
//		}else if(itemSrc.match(/\bajax=true\b/i)){
//			return 'ajax';
//		}else if(itemSrc.match(/\bcustom=true\b/i)){
//			return 'custom';
//		}else if(itemSrc.substr(0,1) == '#'){
//			return 'inline';
		}else if(itemSrc.match(/\b.jpeg\b/i)){
			return 'image';
		}else if(itemSrc.match(/\b.jpg\b/i)){
			return 'image';
		}else if(itemSrc.match(/\b.png\b/i)){
			return 'image';
		}else if(itemSrc.match(/\b.gif\b/i)){
			return 'image';
		}else{
			return 'link';
		};
	};
});
");

	}
//class END
}
?>
要するに、
img要素をもつ,rel="external"をもっているa要素に
 prettyというclassを自動で追加してしまおうというもので

a要素のhrefがイメージでないとエラーになるだろうという手抜きなんですが
第2版で普通にジャンプするようにしたはずです


[url= のBBCodeとか [siteurl= の BBCodeとか
からの、HTMLは
 rel="external" をもっているが
イメージを挟んでいないと対象とならないし

他からのa要素ものはrel="external"要素名ではないはず?なので
(「XCL2.2でJQuery版Lightboxを組み込むPreloadともかぶらないはず?)
他の機能のものとかぶりにくいので、それなりに使えそうです。

やっぱ、まずいですよね
やっぱ、リンク先がイメージかどうか判定いれてから
投稿し直します。


第2版で判定をいれてみました。
第3版で1行追加 rel='pretty[gallery]'でページ内グループ化してみました


お試しください。

追記:
上記のJS部がだらだら長くてサイトにソース表示されるのが、
気持ち悪いと思った方は
JSを圧縮パックして別にした(最新のprettyPhoto JS込み)
preload版
ダウンロードはこちら
jQuery_Pretty_preload_packed.zip 

まず、js類を/common/ へ 最新をいれてください。
あとは
上記のJS部記述を抜いたpreloadを
XOOPS_ROOT_PATH/preload の中に入れるだけで、やっていることは同じです。
投票数:1 平均点:10.00
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2011/7/31 1:58
domifara  Ensign   投稿数: 300
ページurlに /#!pretty[gallery]/1/
とページ名が変わるのが、prettyPhotoは標準なので
ブラウザーの戻るボタンを押したときに、
画像に戻るのがうざい感じなので
オプションの追加
deeplinking: false,

第4版
<?php
/**
 * @file jQuery_Pretty.class.php
 * @package For legacy Cube Legacy 2.2
 * @version $Id: jQuery_Pretty.class.php ver0.01 2011/07/27  00:40:00 domifara  $
 */

if (!defined('XOOPS_ROOT_PATH')) exit();

class jQuery_Pretty extends XCube_ActionFilter
{
	public function preBlockFilter()
	{
		$this->mRoot->mDelegateManager->add('Site.JQuery.AddFunction',array(&$this, 'addScript'));
	}

	public function addScript(&$jQuery)
	{
		$jQuery->addLibrary('/common/prettyphoto/js/jquery.prettyPhoto.js', true);
		$jQuery->addStylesheet('/common/prettyphoto/css/prettyPhoto.css', true);
		$jQuery->addScript("
jQuery(document).ready(function($){
	//The img element has a child element
	$(\"img\").closest(\"a[rel^='external']\").each(function(i, elem){
		if (typeof elem != 'undefined'){
			if (typeof $(elem).attr('rel') != 'undefined'){
				if (typeof $(elem).attr('href') != 'undefined'){
					var itemSrc = $(elem).attr('href');
					if (typeof itemSrc != 'undefined' && itemSrc != ''){
						if (pretty_getFileType(itemSrc) != 'link'){
							//add a class
							$(elem).addClass('pretty');
							$(elem).attr({rel:'pretty[gallery]'});
						}
					}
				}
			}
		}
	});

	//pettyPhoto init
	$(\"a.pretty\").prettyPhoto({
		deeplinking: false,
		overlay_gallery: false,
		theme: 'facebook'
	});
	function pretty_getFileType(itemSrc){
		if (itemSrc.match(/youtube\.com\/watch/i)) {
			return 'youtube';
		}else if (itemSrc.match(/vimeo\.com/i)) {
			return 'vimeo';
		}else if(itemSrc.match(/\b.mov\b/i)){
			return 'quicktime';
		}else if(itemSrc.match(/\b.swf\b/i)){
			return 'flash';
		}else if(itemSrc.match(/\biframe=true\b/i)){
			return 'iframe';
//		}else if(itemSrc.match(/\bajax=true\b/i)){
//			return 'ajax';
//		}else if(itemSrc.match(/\bcustom=true\b/i)){
//			return 'custom';
//		}else if(itemSrc.substr(0,1) == '#'){
//			return 'inline';
		}else if(itemSrc.match(/\b.jpeg\b/i)){
			return 'image';
		}else if(itemSrc.match(/\b.jpg\b/i)){
			return 'image';
		}else if(itemSrc.match(/\b.png\b/i)){
			return 'image';
		}else if(itemSrc.match(/\b.gif\b/i)){
			return 'image';
		}else{
			return 'link';
		};
	};
});
");

	}
//class END
}
?>
投票数:0 平均点:0.00
前の投稿 - 次の投稿 | 親投稿 - 子投稿なし | 投稿日時 2011/8/2 22:06
marine  Lieutenant   投稿数: 464
domifaraさん、どもです。

なかなか追いついておりませんで、すいません。
prettyPhotoは私もお気に入りなので、利用させていただきたいと思います。
投票数:1 平均点:10.00
  条件検索へ

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