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

ぐるぐる回る画像ブロック

投稿ツリー


このトピックの投稿一覧へ

domifara

なし ぐるぐる回る画像ブロック

msg# 1
depth:
0
前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2011/9/3 18:45 | 最終変更
domifara  Ensign   投稿数: 300
テストで、
Webphoto のブロックとGnavi D3のブロックより
ぐるぐる回る画像ブロックを作ってみたけど、回るだけならつまらいので

没ネタにしたブロック集です。
デモ
私のホームページのデモページの上にあるブロック

ほしい人(試したい人)は、拾っていってみてください。
ブロックだけのモジュール名(myblocks)にしてあります。

XCL2.2専用の書き方しているところがあるので
XCL2.2専用
ダウンロード

xoops_mod_myblocks.zip


モジュールに含まれているのは、
1.オンラインブロック改造版(私用で使っている)
・管理者とブロックにオプション登録されているIPの人にだけ表示
・ブロックに現在オンライン中のIP逆引き名でリスト(いっぱいだと見ずらい)
2.ぐるぐる回る画像ブロック Webphotoの最新ブロック画像より
3.ぐるぐる回る画像ブロック Webphotoのピックアップ画像より
4.ぐるぐる回る画像ブロック Gnaviの最新ブロック画像より
5.ぐるぐる回る画像ブロック Gnaviのピックアップ画像より

テストで作っただけなので
ぐるぐる回る画像ブロックのオプション指定の表示は適当な英語表示です。

実際には、
smartyプラグイン.xoops_cube_block
を変更したもので、元ブロックからデータを取得してのブロックパラメータを再指定しているだけなので
どの項目が、何に当たるかは、Webphoto,Gnavi元ブロックを参照してください。

お試し方法
・ルート/common/の中にjs類を置きます。
 (パックされているディレクトリ位置)
・モジュール名(myblocks)「ブロック集」をインストールします

かならず、最初に使うブロックのオプションを編集・更新してください(最初は何も指定していない状態でインストールされるため)。
webphotoやGnaviD3などを別名でモジュールを使っている場合
最初はそのモジュールディレクトリ名だけ指定して、
いったんブロックを更新します。そうすると2回目の表示の時は初期指定値を取ってくるはず(こないかも、その時は?)。

--------------------------------
[参考]
ぐるぐる回る画像は、jQueryプラグインで、
Cloud Carousel - A 3d Carousel in Javascript
配布元
http://www.professorcloud.com/mainsite/carousel.htm
(配布元のサンプルの様にするには、背景とか画像とかさらに作りこみが必要)

jQueryプラグインのオプション
テンプレートでいろいろカスタマイズ出来るように
jQueryの読み込みもテンプレートからしています。(XCL2.2用)

テンプレートはこんな感じ
<{php}>
//jsの読み込み用
	$block = $this->get_template_vars('block');
	$block_md5 = $block['md5'];//プロック複製用区別のキー
	// javascript placed between <head></head>
	$root = XCube_Root::getSingleton();
	$jQuery = $root->mContext->getAttribute('headerScript');
	$jQuery->addLibrary('/common/cloud-carousel/cloud-carousel.1.0.5.min.js');
	$jQuery->addLibrary('/common/jquery-mousewheel/jquery.mousewheel.min.js');

	//http://www.professorcloud.com/mainsite/carousel-integration.htm
	$head_script = <<< HTML
jQuery(document).ready(function($){
	$("#my$block_md5").CloudCarousel({
		minScale: 0.25,
		xPos: 320,//x位置divの真ん中辺に
		yPos: 30,//y位置のスタート位置
		bringToFront:true,//クリックした画像を前にする(aタグで囲んでいると無効)
		altBox: $("#alt-text$block_md5"),//altの表示用
		titleBox: $("#title-text$block_md5"),//titleの表示用
		mouseWheel:true,//マウスホイールで回すか指定
		autoRotate:true,//自動で回すかの指定
		autoRotateDelay: 6000 //自動で回す間隔ミリsec
	});
});
HTML;
	$jQuery->addScript($head_script);

<{/php}>
<{* 表示外枠用*}>
<div  style="width:640px; height:auto;background-color:transparent;margin: 0 auto;padding: 0 ;">
<{* 表示用 ここのid名でプラグインが動く
DIVコンテナーのサイズの指定が必要なので大きな画像を表示したい場合
サイズの幅、高さの調整が必要
*}>
<div id = "my<{$block.md5}>" style="width:640px; height:180px;background-color:transparent;overflow:scroll;margin: 0 auto;padding: 0 ;">

<{foreach item=photo key=count from=$block.photo name=photo_list}>
<{if empty($photo.img_photo_width) }>
	<{if $block.cfg_use_pathinfo }>
	<a href="<{$xoops_url}>/modules/<{$block.dirname}>/index.php/photo/<{$photo.photo_id}>/">
	<{else}>
	<a href="<{$xoops_url}>/modules/<{$block.dirname}>/index.php?fct=photo&amp;photo_id=<{$photo.photo_id}>">
	<{/if}>
<{else}>
<a href="<{$photo.img_photo_src_s}>" class="pretty" rel="myblocks[gallery<{$block.md5}>]" >
<{/if}>
<img src="<{$photo.img_thumb_src_s}>" title="[<{$photo.cat_title_s}>] <{$photo.title_s}>"
<{if $photo.item_description == "" }>
 alt="type:<{$photo.item_ext}> &nbsp&nbsp size(width x height):(<{$photo.img_photo_width}>x<{$photo.img_photo_height}>) &nbsp&nbsp Create:<{"Y/m/d"|date:$photo.item_time_create}> &nbsp&nbsp Update:<{"Y/m/d"|date:$photo.item_time_update}>"
<{else}>
 alt="<{$photo.description_disp|regex_replace:'/[\r\t\n]/isx':''|strip_tags|escape|mb_truncate:300}>"
<{/if}>
 class="cloudcarousel" />
</a>

<{/foreach}>
</div>
	<p id="title-text<{$block.md5}>" align="center"></p>
</div>
	<p id="alt-text<{$block.md5}>"></p>
jQueryプラグインのオプションの指定は、
http://www.professorcloud.com/mainsite/carousel-integration.htm
に書かれています。

テンプレートを見ればわかると思いますが、
クリックしたときに aタグで元画像(大きい画像)を表示するのは
webphotoもpopboxを使わずに
[BBCodeでもXCL2.2でJQuery版prettyPhotoでLightbox風]
http://www.xugj.org/modules/d3forum/index.php?topic_id=1145
のをpreloadを併用して使ってます。
(jQueryプラグインがwebphotoのpopboxとの相性が悪かったため
表示が消えてしまうので・・)

上記preloadの最新版は
BBCodeでもXCL2.2でJQuery版prettyPhotoでLightbox風

preloadに頼らずに
aタグのリンク先をwebphotoのページにして飛ばす方か?
aタグを書かずにするか?(回るだけ)
好きに変えてください
投票数:2 平均点:10.00

  条件検索へ


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