ガジェット

世界時計を読み込み中

為替レート



イメージチェンジャ

jQueryの便利なプラグインを簡単に設定可能にするインターフェース集です。 jQueryはもちろん、プラグイン、javascriptの知識も一切必要有りません。 難しい部分はすべてインターフェースが行います。 メニューエディタは、別途契約が必要な有料オプションです。 お問い合わせは、システムを導入された販売店にお願いいたします。
※本システムはjQueryやjQuery用プラグインを販売するものではありません。 無料で配布されているこれらオープンソースのフリーソフトをユーザに代わって設定するインターフェースです。 フリーソフトの著作権はjQuery及び、それぞれのプラグイン配布サイトにあります。
イメージチェンジャ(ギャラリー)
●k3dCarousel


●orbit
ID 自動的に割り振られる作成中のオブジェクトのIDです。
タイトル イメージチェンジャは複数作成可能ですので、オブジェクトを識別するためのタイトルを付けておきます。
タイプ イメージチェンジャのタイプを「k3dCarousel」、「orbit」から選択します。
項目設定 イメージチェンジャは無制限に作成可能ですが、1つのイメージチェンジャに挿入可能な画像は最大20枚です。
  • 一覧画像
    スライドさせる画像
  • 拡大画像
    k3dCarouselで、スライド画像をクリックしたとき拡大表示する画像
  • リンク先
    orbitで、スライド画像をクリックしたときジャンプするページのアドレス
  • 画像の説明
    k3dCarouselで、拡大画像に表示する簡単な説明

表示順は行番号をドラッグして自由に移動することができますが、空行を作成することはできません。 空行以降は全て無効で、削除されます。
これでコンテナオブジェクトの作成は完了です。 それでは実際にページに挿入してみましょう。 コンテナもjQueryのプラグインですから、jQueryとプラグインのjavascriptをページのヘッダー部でインクルードしなければなりません。
■k3dCarousel 
									
									<link type="text/css" href="/jquery/colorbox/example1/colorbox.css" rel="stylesheet" />
									<script type="text/javascript" src="/jquery/js/jquery-1.6.4.min.js"></script>
									<script type="text/javascript" src="/jquery/jquery.k3dCarousel.js"></script>
									<script type="text/javascript" src="/jquery/colorbox/colorbox/jquery.colorbox-min.js"></script>
									<script type="text/javascript" src="/trycms/system.js"></script>
インクルードできれば、今度は実際にオブジェクトを挿入する位置にAjaxを記述します。 
									
									<div id="Gallery">ここにオブジェクトを挿入</div>
									<script type="text/javascript">
										getAjaxText('/trycms/jquery.php?cmd=imagechanger&ID=PEDR7YRK4&ajax=1', 'Gallery', gallery_initialize);
										function gallery_initialize() {
											$(function(){ $('#PEDR7YRK4').k3dCarousel(); });
										}
									</script>
■orbit 
									
									<link type="text/css" href="/jquery/orbit/orbit.css" rel="stylesheet" />
									<script type="text/javascript" src="/jquery/js/jquery-1.6.4.min.js"></script>
									<script type="text/javascript" src="/jquery/orbit/jquery.orbit.js"></script>
									<script type="text/javascript" src="/trycms/system.js"></script>
インクルードできれば、今度は実際にオブジェクトを挿入する位置にAjaxを記述します。 
									
									<div id="Gallery">ここにオブジェクトを挿入</div>
									<script type="text/javascript">
										getAjaxText('/trycms/jquery.php?cmd=imagechanger&ID=T47AN1SK4&ajax=1', 'Gallery', gallery_initialize);
										function gallery_initialize() {
											$(function(){
												$('#T47AN1SK4').orbit({
													animation: 'horizontal-slide',
													animationSpeed: 1000,
													directionalNav: false,
													captions: true,
													captionAnimationSpeed: 800,
													timer: true
												});
											});
										}
									</script>
IDの部分が作成したコンテナのIDになります。

コメント

Q3:メールアドレス ※