プライベートモードで閲覧中です。

sugar pot : noobSlide~画像をスライドさせるスクリプト

ほろ苦い夢のかけらのおすそわけ

スポンサーサイト

--年--月--日(--)

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
#
カテゴリ:スポンサー広告

trackback

noobSlide~画像をスライドさせるスクリプト

2008年06月01日(日) コメント:3 トラックバック:0

今日もユーザーフォーラムよりカスタマイズネタを拾ってきました。
ウィジェットの作成方法を教えてください

ウィジェットというか、Javascriptですね。
hassakuさんが紹介してくださっている「PHPSPOT開発日誌」の記事「気持ちよいスライド機能を提供する「noobSlide」」をたよりに、サンプル7のスライドを試みてみました。

こちらのリンクからこのブログを表示してください(そうしないとただ画像を並べただけのページになります)。

noobSlide:http://bittersweetdreams.blog9.fc2.com/?template=silver_ring_nSlid&no=803

Webフリー素材提供:「月とサカナ」

PhotoPhotoPhotoPhotoPhotoPhotoPhoto
Photo Thumb
Photo Thumb
Photo Thumb
Photo Thumb
Photo Thumb
Photo Thumb
Photo Thumb


上記ページだけでは、よく分からなかったので、まず、「noobSlide」なるものについてGoogleで検索してみました。すると、次のようなページがあり、「noobSlide」を動かすためには、mootools.jsが必要らしい、ということが分かりました。

コリス:[JS]画像やパネルをスムーズにスクロール表示する -noobSlide

PHPSPOT開発日誌:気持ちよいスライド機能を提供する「noobSlide」に張られたリンクをクリックすると、サンプルページが開きます。このページの一番下に、downloadリンクがあります。クリックすると、以下のファイル群がダウンロードされました。

class
_class.noobSlide.packed.js
_class.noobSlide.js
_mootols.js
img1.jpg
img2.jpg
img3.jpg
img4.jpg
img5.jpg
img6.jpg
img7.jpg
img8.jpg
sample.html
_web.css
style.css
thumb_invisible.gif
thums_mask.gif

mootools.jsも含まれています。sample.htmlを開いてみると、そのまま「気持ちよいスライド」がなされます。
ということで、次の手順で、カスタマイズを行いました。

(1)_mootools.js、_classnoobSlide.jsをアップロード。
※元のファイル名は_class.noobSlide.jsですが、FC2ブログのサーバにはピリオドやスラッシュを含むファイル名のファイルはアップロードできないため、おそるおそるピリオドを除きました。試しにsample.htmlに読み込んでみたところ、問題なくスライドされたので、そのまま、_classnoobSlde.jsとしました。

(2)thumb_invisible.gif、thumb_mask.gifをアップロード。
<head>~</head>内に以下を書き込みます。

<script type="text/javascript" src="http://blog-imgs-24.fc2.com/b/i/t/bittersweetdreams/_mootools.js"></script>
<script type="text/javascript" src="http://blog-imgs-24.fc2.com/b/i/t/bittersweetdreams/_classnoobSlide.js"></script> 
<script type="text/javascript">
	window.addEvent('domready',function(){
		
		//SAMPLE 7
		var startItem = 3; //or   0   or any
		var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*60-568)+'px').setOpacity(0.8);
		var fxOptions7 = {duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
		var thumbsFx = new Fx.Style(thumbs_mask7,'left',fxOptions7);
		var hs7 = new noobSlide({
			box: $('box7'),
			items: [0,1,2,3,4,5,6,7],
			handles: $ES('span','thumbs_handles7'),
			fxOptions: fxOptions7,
			onWalk: function(currentItem){
				thumbsFx.start(currentItem*60-568);
			},
			startItem: startItem
		});
		hs7.walk(0);

	});</script> 

(3)スタイルシートを追加。
_web.cssとstyle.cssの2つのスタイルシートの中から関連するものを抜き出して、テンプレートのスタイルシートに加えるか、あるいは、別途外部スタイルシートとして読み込むようにします。

今回は、sample7を表示したいと思ったので、その部分を抜き出して、slidestyle.cssという外部スタイルシートを作成してアップロードしました。

<link href="http://blog-imgs-24.fc2.com/b/i/t/bittersweetdreams/slidestyle.css" type="text/css" rel="stylesheet" media="all" />

(4)スライドさせたい画像をアップロード。
今回は、Web用フリー素材(加工可)のサイト「月とサカナ」より、幻想的なCG素材を8枚、ダウンロードして、アップロードしました。

(5)本文に以下のように記述。

<div class="sample">
	<div class="mask6">
		<div id="box7">
			<span><img src="画像1URL" alt="Photo" /></span>
			<span><img src="画像2URL" alt="Photo" /></span>
			<span><img src="画像3URL" alt="Photo" /></span>
			<span><img src="画像4URL" alt="Photo" /></span>
			<span><img src="画像5URL" alt="Photo" /></span>
			<span><img src="画像6URL" alt="Photo" /></span>
			<span><img src="画像7URL" alt="Photo" /></span>
			<span><img src="画像8URL" alt="Photo" /></span>
		</div>
	</div>

	<div id="thumbs7">
		<div class="thumbs">
			<div><img src="画像1URL" alt="Photo Thumb" /></div>
			<div><img src="画像2URL" alt="Photo Thumb" /></div>
			<div><img src="画像3URL" alt="Photo Thumb" /></div>
			<div><img src="画像4URL" alt="Photo Thumb" /></div>
			<div><img src="画像5URL" alt="Photo Thumb" /></div>
			<div><img src="画像6URL" alt="Photo Thumb" /></div>
			<div><img src="画像7URL" alt="Photo Thumb" /></div>
			<div><img src="画像8URL" alt="Photo Thumb" /></div>
		</div>

		<div id="thumbs_mask7"></div>

		<p id="thumbs_handles7">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</p>
	</div>
</div>

参考

  • アップロード時にサムネイルを同時作成する必要はありません。
  • プラグインにスクリプトを置いた場合、スクリプト同士が干渉しあうのか、動きませんでした。上記の手順通りに設置したのに動かない、という場合、プラグインを疑ってみてください(地道に、ひとつひとつ非表示にして確認していきます)。
  • 位置合わせのために若干スタイルシート(slidestyle.css)を手直しする必要があるかもしれません。
  • <p id="thumbs_handles7">~<p>内の<span>~</span>は、画像の数だけないと、うまくスライドしません。
#803
カテゴリ:107 ブログカスタマイズ

trackback

<<リンクサムネイル | iPhone登場>>

コメント(-3件)

-:管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

  • 2008年06月07日(土)21:37:15
sugar:誤ってコメント削除してしまいました。

wU+200Aさん、ごめんなさい!通知メールの内容を再投稿することもできますが、今外ですし、後ほど……今思っていることを試してうまくいってからにさせてください
。もしよろしかったらwU+200Aさんのほうで再度コメントを入れていただけると、(パスワードを設定した場合)後からコメント編集・削除もできます。
ともかく本当に、ごめんなさい。
※お返事は明後日以降になります※

  • 2008年06月07日(土)23:28:09
  • URL
  • 編集
wU+200A:いえいえ

sugarさん
こちらこそお忙しい所すみません。
Javascriptは全くの初心者なので
記述をみても
?・?・?の嵐でして
検索で探してみて
実装方法の記事を書いておられる方がsugarさん
だけでしたので、ついつい急な、お願いをしてしまいました。

私の質問の方は、お手すきの時にでかまいませんので
お暇になりましたら
よろしくお願い致します。

それでは、失礼致します。

  • 2008年06月08日(日)00:36:54
  • URL
  • 編集
コメントの投稿

トラックバック(-0件)

http://bittersweetdreams.blog9.fc2.com/tb.php/803-f820b453

Bookmarked

Blog Battler

ブログバトラー

Twitter

    フリーエリア

    上部の説明

    下部の説明

    Utilities

    Ad

    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。