うさできのmikaさんの投稿を読みながら、もう少し手軽にできるようになるといいなーと思って、XOOPS Cubeで簡単にスライドショーを作れるプリロードを作ってみました。急いで作ったので、結構テキトーです。なにか問題があったら教えてください。

ちなみに、どんなスライドショーができるかは、うさできのトップページを見てみてください。

インストール方法

ダウンロードした JquerySlideShow.class.php を/preloadフォルダにアップロードするだけです。

ちなみに、このファイルだけでは動作しません。jquery.jsが必要です。XCL2.2ならデフォルトで入ってます。XCL2.1の人でよく分からない人はJquery.class.phpを/preloadフォルダに入れといてください。

使い方

基本的にテーマのすきなところにタグを埋め込めこんで使います。編集するテーマのファイはたぶん/themes/あなたのテーマ/theme.htmlです。埋め込み方は下の説明を御覧ください。

[基本編] テーマで使う

画像の大きさを指定して、画像のURLを1行ずつ列挙するだけ

<{slideshow width=680 height=80}>
http://example.com/path/to/image1.png
http://example.com/path/to/image2.png
http://example.com/path/to/image3.png
<{/slideshow}>

[発展編] 画像のリンク先を指定する

画像のURLの次に、半角スペースを挟んでリンク先のURLを指定すると、画像にリンクがつきます。

<{slideshow width=680 height=80}>
http://example.com/path/to/image1.png http://example.com/page1.html
http://example.com/path/to/image2.png http://example.com/page2.html
http://example.com/path/to/image3.png http://example.com/page3.html
<{/slideshow}>

[応用編] 画像のURLに<{$xoops_url}>を使う

画像のURLに<{$xoops_url}>を使うと、サイトのURLが変わったときに、URLを書き換える必要がないので便利です

<{slideshow width=680 height=80}>
<{$xoops_url}>/uploads/myalbum/1.png <{$xoops_url}>/modules/pico/index.php?content_id=1
<{$xoops_url}>/uploads/myalbum/2.png <{$xoops_url}>/modules/pico/index.php?content_id=2
<{$xoops_url}>/uploads/myalbum/3.png <{$xoops_url}>/modules/pico/index.php?content_id=3
<{/slideshow}>

[応用編] カスタムブロックで使う

カスタムブロックの「コンテンツ」に次のようなコードを埋め込みます。 カスタムブロックの「タイプ」は「PHPスクリプト」を指定します。

$params = array(
  'width' => 680, // 幅指定
  'height' => 80, // 縦指定
);
$images ="
http://example.com/path/to/image1.png
http://example.com/path/to/image2.png
http://example.com/path/to/image3.png
";
JquerySlideShow::renderSlideShow($params, $images);

次のプラグインは、単に文字色を赤くするだけのものです。mypluginがプラグイン名です。$(this).css('color', 'red');の部分以外がプラグインの骨組みとなり、この部分だけ差し替えれば、全く別のプラグインを作ることができます。

(function($){
	$.fn.myplugin = function() {
		return this.each(function() {
			$(this).css('color', 'red');
		});
	};
})(jQuery);

このプラグインの動作デモ

if ( $('#myDiv').length )
  $('#myDiv').show();

lengthであるかどうかがわかるらしい。

んでやってみたけど、できねぇー。

FireBugに"$('#myDiv') is null"って怒られるし。

複数の英語サイトを回ってみたけど、

if ( $('#myDiv') ) だといつもtureが返るからだめで、
if ( $('#myDiv').length ) が正しいと言うんだけれど、エラー出るし。

結局行き着いた答えはこれだった。

if ( $('#myDiv') != null )

まいったまいった。