TOPページ / 特集記事SlideShowページ

 

POPS-SLIDESHOW-01 DEMO


[[ このスクリプトは jquery-1.6.4 を使用しています ]]


POPS-SLIDESHOW-01 新規サンプル DEMO (pops-slideshow01.js) / 800x400

 

||
  • 1
  • 2
  • 3
  • 4
  • 5

下のような画像5枚が順次、AUTOで表示されます。最終画像に行きますと最初の画像に戻ります。


[[ AUTO ]] PAGER の部分はUSERが作成する。

pops-transition01のfade機能の一部だけを使用したものです。

 

スクリプトの特徴


  1. POPS-TRANSITIONのエフェクト機能などは単純にしています。
  2. 画像の大きさは自由です。
  3. SCALE.FADEエフェクトを実現します。10種類ほどあります。
  4. 簡単に画像の大きさ設定(CSS変更)が出来るようにしました。
  5. 時間制御を2種類(setTimeout)設定して、より使いやすくしました。
  6. 多少のアニメ設定速度の変更は可能です。
  7. 番号付きまたはサムネール付きのページャー設定可能です。

  1. ページャーの形式は、pops-transition01などの他のものと同じですが、少し単純にしています。
  2. タイマーの形式(setTimeout)に変更。(一般的なものです)
  3. テキスト保存形式を UTF-8(UTF-8N) にしましたので注意ください。

対応ブラウザ(検証済みブラウザ)


・対応ブラウザ IE6+ Safari(4.以上)+ Firefox(3.5以上)+ Chrome(5.以上)+ Opera(10.以上)+


 

DOWNLOAD ZIP に含まれる内容


  1. サンプルには、jquery-1.6.4.min.js が内包されています。
  2. 該当の、JS CSS 一式。
  3. 該当の、サンプル画像など、一式。
  4. サンプルDEMO html。

【重要】、jQuery以外、全てUTF-8のテキストですので、使用環境に応じて適切に書き換えてください。


jquery.com より最新の jquery を DOWNLOAD する。

http://jquery.com/

 

 

設置方法


JS.CSS.HTML記述概略


基本読み込みとJSの実行(JS.CSS)
<link rel="stylesheet" href="css/pops-slideshow01.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js" /></script>
<script type="text/javascript" src="js/pops-slideshow01.js" /></script>
<script type="text/javascript">
	$(function(){
		$(document).pops_slideshow();
	});
</script>
 
画像収容部分(HTML)
<div id="pops_slideshow">
	<div id="slideshow_box">
		<div id="slideshow_base">
			<div id="show_imgholder"><img src="images/photo_t91.jpg" width="800" height="400" /></div>
			<div id="show_base_top"><img /></div>
			<div id="show_loading"></div><div id="show_count_data"></div>
		</div>
	</div>
</div>

ページャーの必要な場合(HTML-MENU)
<div id="show_thumb_box_wrap">
<div id="show_start_btn" title="AUTO ON/OFF">||</div>
<div id="show_thumb_box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul><span class="clear" />
</div>
</div>

----------------------------------------------

事前にJSに画像のデータおよび画像までのパスを記載しておく
preloaddata:'photo_t91.jpg,photo_t92.jpg,photo_t93.jpg,photo_t94.jpg,photo_t95.jpg'
path:'images/'

またはJS実行時に送り込んでも良い
<script type="text/javascript">
	$(function(){
		$(document).pops_slideshow({
			preloaddata:'photo_t91.jpg,photo_t92.jpg,photo_t93.jpg,photo_t94.jpg,photo_t95.jpg',
			path:'images/'
		});
	});
</script>


上記のとうり設置方法は、標準のjQueryプラグインの設定であるので経験済みの方なら簡単である。
最初の画像、1枚のみHTMLで表示し、画像はJSに画像データとして登録します。

1ページ当たり、1設定の使用になります。複数個は設定できません。表示するページが違えば設定を変更して使用できます。


以上、簡略説明でした。
詳細の説明が知りたい場合は、ご面倒でも下の説明などをお読みください。

 


 

 

[ 1 ] HTML設定


jQuery共通のプラグインの設置方法ですから、ほとんど他と変わりません。以下詳細を記す。

★次のように本体HTMLに、画像表示の基礎となるHTML構造を挿入して使用します。

画像を表示する場所に次のHTMLを挿入します。


1-1 HTML構造を作る

DEMOでの設定例 ( 800x400画像、5枚使用)

標準のHTMLの使用例です。但し画像は全て先に読み出しておく操作(プリロード)がおこなわれます。一般に画像数が少ない場合です。
最初の画像のみ、HTMLに埋め込み、大きさを設定します。
必要があればページャー部分のHTMLをかきます。


標準構成の例 (画像の大きさ 800x400 とする)


show_start_btn

<div id="pops_slideshow">
	<div id="slideshow_box">
		<div id="slideshow_base">
			<div id="show_imgholder"><img src="images/photo_t91.jpg" width="800" height="400" /></div>
			<div id="show_base_top"><img /></div>
			<div id="show_loading"></div><div id="show_count_data"></div>
		</div>
	</div>
</div>
<div id="show_thumb_box_wrap">
<div id="show_start_btn" title="AUTO ON/OFF">||</div>
<div id="show_thumb_box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul><span class="clear" />
</div>
</div>


ページャーを必要としない場合はthumb_box_wrapのメニュー構成部分は要りません。

ページャー <li></li>部分を自動で書き出すことも可能です。

現在ページャーは画像部分の下に分離されて配置されていますが、<div id="pops_slideshow"></div>に収納可能ですからデザインなど自由にできます。

1-2 最初に表示する画像の設定

最初に表示する画像のURLなどを書き入れます。その他の画像はJSで一括プリロードします。(プリロードしなくとも使用できます。その都度LOADするだけです。この場合時間がかるだけです。)
プリロード画像は、JSの初期設定、またはHTMLからJS実行時に、受け渡しのデータとして記入します。


★ img src="画像のURL" width="画像の幅" height="画像の高さ" 、重要です。




<div id="transition_base"><div id="imgholder"><img src="画像のURL" width="画像の幅" height="画像の高さ" /></div>

 
表示する画像情報をHTMLに記入します、継続する画像の幅高さは同じ大きさです。
原則、使用する画像と同じ幅と高さを記入ください
 

JSへの画像データの登録。画像までのパスもお忘れなく。


preloaddata:'photo_t91.jpg,photo_t92.jpg,photo_t93.jpg,photo_t94.jpg,photo_t95.jpg',
path:'images/'

ページャーに「サムネール画像」を使用する場合


<li><img src="images/photo_t91ss.jpg" width="40" height="20" /></li>
<li><img src="images/photo_t92ss.jpg" width="40" height="20" /></li>
<li><img src="images/photo_t93ss.jpg" width="40" height="20" /></li>
<li><img src="images/photo_t94ss.jpg" width="40" height="20" /></li>
<li><img src="images/photo_t95ss.jpg" width="40" height="20" /></li>
 

「サムネール画像」を挿入できるようにHTMLを書き換えます。

単純化しているためJSで自動で「サムネール画像」を挿入する機能はありません。
「サムネール画像」使用の場合は、CSSの大きさなどを考慮し、使用者がCSSを直接変更ください。


1-3 番号を自動生成させる場合

HTMLの番号部分 <li></li> をかかないで構成します。


<div id="show_thumb_box">
<ul>
</ul><span class="clear" />
</div>
 

JSの設定で自動生成すればよい。HTMLを変更したく無い場合または、画像枚数が多い場合には便利です。


1-4 ページャー番号部分を使用しない場合

HTMLの番号部分をかかないで構成します。


<div id="show_thumb_box_wrap">
	<div id="show_start_btn" title="AUTO ON/OFF">||</div>
</div>
 

原則、「入切ボタン」(停止、再スタートボタン)は書き込みます。JSの初期設定を、表「初期設定資料 2」に従い変更ください。

 

[ 2 ] CSS 読み込み設定


★次のようににHTML head に記入して読み出す。

jQuery動作には、先にCSSを読み込むことが前提となっています。


pops-slideshow01.css



<link rel="stylesheet" href="css/pops-slideshow01.css" type="text/css" media="all" />
 

 

[ 3 ] JS CSS の変更設定


・初期段階では、800x400 画像の大きさになっていますので、使用する大きさ(wtdth height)に変更します。

  1. pops-slideshow01.css の「画像サイズ」に該当する部分を、使用する画像サイズとあわせます。
  2. JSの初期設定、画像サイズをともに変更ください。JS実行時の受け渡しデータに記入しても同じです。
  3. JSでのCSS変更機能で、自動で画像サイズ部分変更が可能です。(auto_edit_use:'use' 設定の場合)
  4. jQueryは バージョンjquery-1.4.2 以上であれば動作します。

★変更部分は画像サイズに該当する部分だけです。その他はサイズ以外変更しないでください。( [ 2 ] 外側BOXの機能、参照 )


用意する背景画像 など

項 目 1. 背景画像 2. 3. 備考
1. 使用する画像 JPG. PNG. GIF 画像 大きさは自由 使用者が用意する 通常の長方形がきれいです
2. LOADING画像 loading.gif --- 付属画像 取替え可能

 

[ 4 ] JS 読み込み設定


★jQuery-1.4.2以上が必要です。
また、jQueryプラグイン動作には、先にjQueryを読み込むことが前提となっています。


jquery-1.4.2.min.js pops-slideshow01.js



<script type="text/javascript" src="js/jquery-1.4.2.min.js" /></script>
<script type="text/javascript" src="js/pops-slideshow01.js" /></script>
 

★注意、タイプ違いのJSでも、JS構造、CSS設定がほとんど共通なため、1ページ当たり、1つのJSのみの使用になります。

 

[ 5 ] JS pops_slideshow()の実行


HTML head 部、または、hooter 部以降で実行させます。


  1. pops_slideshow()の実行は必ず必要です。
  2. pops_slideshow({引数プロパテイ値})を引き渡せます。
  3. ページ毎に変更値を渡し、別仕様で実行できます。
  4. 1つのCSSを利用して、ページ毎にCSSをも自動で変更可能です。(auto_edit_use:'use' 設定時)
  5. 1ページ当たり、1つのJS実行です、複数は利用できません。


★通常の実行。
何も引数を渡しませんので、JSの初期設定が実行されます。
 
<script type="text/javascript">
$(function(){
	$(document).pops_slideshow();
});
</script>
 
---------------------------------------------------------
★初期値を一部変更して実行。
引数を渡しますので、記入したものは、JSの初期設定に上書きされます。
通常はJS側の初期設定を書き換えるのが通常です。引数を渡しで変更するのは途中変更がある場合です。
値は { } の中に書く形で受け渡します。
 
<script type="text/javascript">
$(function(){
	$(document).pops_slideshow({
		imageWidth:600,
		imageHeight:300,
		preloaddata:'photo1.jpg,photo2.jpg,photo3.jpg,photo4.jpg,photo5.jpg',
		path:'http//:xxx.com/images/'
	});
});
</script>
 
---------------------------------------------------------
★初期値を変更して実行。
変更した部分が反映されます。
 
<script type="text/javascript">
$(function(){
	$(document).pops_slideshow({
		imageWidth:600,
		imageHeight:300,
		speed:600,
		cycle_time:8000,
		first_time:5000,
		auto_use:'use',
		loading_use:'use',
		pager_box_use:'use',
		pager_li_make: '',
		autobtn_use:'use',
		lading_use:'use',
		auto_edit_use:'use',
		preload_use:'use',//use
		preloaddata:'photo_t91.jpg,photo_t92.jpg,photo_t93.jpg,photo_t94.jpg,photo_t95.jpg',
		path:'images/'
	});
});
</script>
 
auto_edit_use:'use' 設定をしておくと大きさが変わった場合CSSの該当部分をJSで修正します
ので少し便利です
 
---------------------------------------------------------
★ path を設定しないで、パス付きの preloaddata を縦に書く。
見やすいので、書き間違いを防げる
 
<script type="text/javascript">
$(function(){
	$(document).pops_slideshow({
		imageWidth:600,
		imageHeight:300,
		preload_use:'use',
		preloaddata:'
			http://www.xxx.com/images/photo_t11.jpg,
			http://www.xxx.com/images/photo_t12.jpg,
			http://www.xxx.com/images/photo_t13.jpg,
			http://www.xxx.com/images/photo_t14.jpg,
			http://www.xxx.com/images/photo_t15.jpg',
		path:''
	});
});
</script>
 
上の例では path:'' にして、画像全てに http://www.xxx.com/images/ をつけた
[ , ]の付ける場所に注意
 
---------------------------------------------------------
★CSSの自動変更機能
auto_edit_use:'use' を設定して
HTML側より「変更値」を引き渡せば、CSSの書き換えなしに実行できます
 
CSSにはページで使用する「大体の幅高さ」を書いておきます
引き渡し設定値に応じCSSの幅高さを自動変更します
 
 
<script type="text/javascript">
$(function(){
	$(document).pops_slideshow({
 
		変更を記入
		同じ値の部分は引き渡さなくとも良い、省略可能
 
		auto_edit_use:'use',
 
		変更を記入
 
		preload_use:'use',
		preloaddata:'photo_t11.jpg,photo_t12.jpg,photo_t13.jpg,photo_t14.jpg,photo_t15.jpg',
		path:'home/images/'
	});
});
</script>
 
但し最初は読み込んだCSSの大きさでレンダリングされる場合があり、JSの処理途上で
設定値に修正されますので、見た目が悪い場合もあります。
 
---------------------------------------------------------
★引数渡しの書式
{プロパテイ1:値1,プロパテイ2:値2,プロパテイ3:値3}
 
のように変更をすることができます。複数の「引数を渡し」は , で区切ります。
但し最後に「 , 」をつけませんので注意ください。
 
★画像パスの変更
path:'images/'
path:'http//:xxx.com/images/'
等と、実行するHTMLを基点としてのパスを記入します。判らない場合はhttp//:での絶対パスを記入ください。
 

 

[ 6 ] JSでの初期値の書き換え変更


JS 初期値は次のようになっています、下記の説明資料、[ 設定のまとめ表 1 ] などを参考にして書き換えが可能です。



★DOWNLOAしたJSの初期設定例
 
---前後略す---

var o = $.extend({
	imageWidth:800,
	imageHeight:400,
	speed:1000,
	cycle_time:6000,
	first_time:2000,
	auto_use:'use',
	loading_use:'use',
	pager_box_use:'use',
	pager_li_make: '',
	autobtn_use:'use',
	lading_use:'use',
	auto_edit_use:'use',
	preload_use:'use',
	preloaddata:'photo_t91.jpg,photo_t92.jpg,photo_t93.jpg,photo_t94.jpg,photo_t95.jpg',
	path:'images/'
}, o || {});

---前後略す---
 
大きさなどが一定の場合は、JS側の初期設定値を書き換えたほうが便利です。
 
---------------------------------------------------------
★JS側の初期設定値を書いているので実行の場合はHTMLを
 
<script type="text/javascript">
$(function(){
	$(document).pops_slideshow();
});
</script>
 
だけでよいことになる。
 
---------------------------------------------------------
★設定の基準
use の場合は use を記入、反対の場合は適当な文字 no 、または入れない ''。
 
1. 数値型 そのまま記入
2. 文字型 '' または "" でくくる
3. 複数型 preloaddataのように データを , で区切る
 

★ imageWidth、imageHeight、重要です。



	imageWidth:800,
	imageHeight:200,

 
原則、使用する画像と同じ幅と高さを記入ください
 

JS実行命令の中に書く場合


$(function(){
	$(document).pops_slideshow({
		imageWidth:400,
		imageHeight:200,
		preload_use:'use',
		preloaddata:'photo_t11.jpg,photo_t12.jpg,photo_t13.jpg,photo_t14.jpg,photo_t15.jpg',
		path:'home/images/'
	});
});
等と変更する部分のみ書き入れる
 
注意、pops-slideshow({変更のプロパテイ}); と中に {} があることに気をつけてください
 

★HTMLにJS実行命令を書けない場合は、JSの最後部分に上書きし、1つにまとめても良い。


$(document).pops_slideshow();を書けない場合、下のようにする。
pops-transition JSの部分
 
(function($){
	jQuery.fn.pops_slideshow = function(o) {
 
		内部スクリプトは略する
 
	};
})(jQuery);
 
この後にJS実行命令を書き、JSを上書き保存する
 
$(function(){
	$(document).pops_slideshow();
});
 

★HTMLの HEAD にJS読み込みまたは、実行命令を書けない場合は、文法違反ではありますが BODY または任意の場所に書いても機能します。 どの部分に記述するかなどは、テスト確認してからにしてください。


 

[ 7 ] 以上をまとめて書けば


次のようになる。(UTF-8)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>POPS-SLIDESHOW-01</title>
<link rel="stylesheet" href="css/xxxx.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/pops-slideshow01.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js" /></script>
<script type="text/javascript" src="js/pops-slideshow01.js" /></script>
<script type="text/javascript">
	$(function(){
		$(document).pops_slideshow();
	});
</script>
<head>
<body>
 
<main>

<div id="pops_slideshow">
	<div id="slideshow_box">
		<div id="slideshow_base">
			<div id="show_imgholder"><img src="images/photo_t91.jpg" width="800" height="400" /></div>
			<div id="show_base_top"><img /></div>
			<div id="show_loading"></div><div id="show_count_data"></div>
		</div>
	</div>
</div>
<div id="show_thumb_box_wrap">
<div id="show_start_btn" title="AUTO ON/OFF">||</div>
<div id="show_thumb_box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul><span class="clear" />
</div>
</div>

</main>
</body>
</html>
 

clearクラス設定の部分


単なるclear:bothの処理です
<span class="clear" />
 
問題があるなら
<div class="clear"></div>
をどこかに挿入、または使用者が個別に対応する
 

clear:both を実行していますが、問題がある場合は書き換えるか、他の場所に移動ください。


・以上で通常動作しますが、旨く行かない場合は、JS CSS 画像パス など確認ください。
・DOCTYPE が変わってもほとんどCSSは position:absolute で書かれていますので大丈夫とおもいます。狂う場合は使用者がCSSを変更ください。(#slideshow_box のCSSを変更すれば直るはず)
・position:absoluteの影響で他のサイド部分などが「カラム落ち」するなどの影響がでる場合は #pops_slideshow 全体を空の <div></div> の中に入れると正常になる場合が多いです。

 

スクリプトの改造など

使用者に不都合があれば、これらの改造などは自由です。JS、CSS名を変えたりは簡単ですが、
但し、エフェクト表示部分などは良く解析しないと、旨く表示しなくなる恐れがあります。ページャー、入り切りボタンなどの改造は、比較的簡単とおもわれますが、これら全て、使用者の責任で行ってください。

どのように改造したいかなどご要望を、ご連絡いただければ、改造例などサイトUPします。

 

 

スクリプトの設定資料


標準設定参考図(PAGERのあるタイプ)

★ 初期 CSS 設定では、BOX各部にボーダー設定はありません。必要な場合は、使用者がCSSの変更をしてください。
標準ではPAGERを分離していますが、中に入れる事も可能です。その場合のCSS変更などは使用者が行ってください。


標準サイクルタイム参考図

★ サイクルタイムは一定でも、画像処理、画像の表示している時間は一定ではありません。実際画像表示は短かったり長かったり不定です。

当初HTMLに挿入された画像が表示されます。first_time は最初の画像処理実行(2枚目表示)までの時間です。


JSの初期設定です。使用条件などを考慮して各自変更してください。2種の方法があります。
1. JS の初期設定を直接書き換える。(上の [ 6 ] JSでの初期値の書き換え変更参照)
2. JS pops_slideshow() 実行時に初期設定を変更する。(上の [ 5 ] JS pops_slideshow()の実行参照)
3. 単純な使用目的のため、初期設定など最小限にしました。


初期設定資料 1

資料、[ 設定のまとめ表 1 ]

項 目 1. 変数名 2. 初期値 3. 設定 備考
1.画像の大きさ(W) imageWidth 800 寸法は自由 重要、必ず記入ください
2.画像の大きさ(H) imageHeight 400 寸法は自由 重要、必ず記入ください
3.アニメ速度 speed 800 自由 400-1000
4.サイクルタイム cycle_time 6000 自由(自動設定あり) 5000以上
5.初期タイム first_time 2000 自由 1000以上
6.オート表示機能 auto_use use use/stop 基本的にはオート
7.フェード設定 --- --- --- 削除
8.ページャーの利用 pager_box_use use/all-none/number-none 自由 基本的には使用
9.ページャーの要素の自動生成 pager_li_make - make 番号のみ
10.オート入切ボタン autobtn_use use 自由 ボタンが無いと再スタートできない
11.loading画像を使用する loading_use use 自由 場合により使用しない
12.自動でCSSを修正 auto_edit_use use 自由 必要部分のW Hを修正
13.プリロードを実行する preload_use use (use) 標準、プリロード実行
14.プリロード画像 preloaddata photo_t91.jpg,....... 使用画像を 重要、必ず設定ください
15.画像までのパス path images/ フォルダまでのパス 重要、必ず設定ください
-------- - - - -

use 設定部分は使用するなら use または指定文字、使用しないなら何も書かない。例 ''
サイクルタイムは指定できます。最低値として5000 を入力ください。(5000以下は、5000に修正されます)

 

下記の説明表などを参考にして書き換えが可能です。


  1. imageWidth: 画像サイズ、横幅、または表示サイズ。
  2. imageHeight: 画像サイズ、高さ、または表示サイズ。参考、[ 9 ] 画像サイズをかえないで表示サイズだけ変更したい
  3. speed: 標準 800 です。400-1000 位が最適です。アニメしている時間の長さですが、設定値は使用者の自由です。基本的に画像サイズが小さい場合は speedを小さく、画像サイズが大きい場合は speedを大きくします。
    fadeを伴う場合、speedが大きいとマシンに対しての負荷が大きくなりますのでその辺は調整します。
    このサンプルでは、800x400と比較的大きな画像を使用しているため 1000 を設定しています。
  4. cycle_time: 標準 6000 です。注意、画像処理により画像表示時間は異なります。
  5. first_time: 標準 2000 です。環境にもよりますが、体外のものは1枚目の画像を見る時間も無く2枚目に移行してしまうのが実情ですので、それを回避するために設定しました。
  6. auto_use: 標準 use なしに設定しても自動になります。最初停止状態からはじめたい場合stopを設定します。
  7. fade_use: 注意、全てfadeしますので、設定は削除しました。
  8. pager_box_use: 標準 use です。pagerboxなど使用しない場合はall-noneを設定します。ページャー類のHTMLは不要です。pager番号部分のみ使用しない場合はnumber-noneを設定します。
  9. pager_li_make: 標準なし。通常は使用者がHTMLに記載しますが、make で li 部分のみ番号付きで自動生成されます。
  10. autobtn_use: 標準 use 。「入り切り」のボタンになります。これが無いと再スタートは出来ませんので注意ください。
    (「番号ボタン」を押した場合、自動は解除になります。マニュアル操作だけになりますので、再スタートさせるにはどうしても「入り切りのボタン」が必要になります。簡単なエフェクトと違い、スライスエフェクトの時間がかかりますので、JSの内部処理の関係でむやみに「番号ボタン」を押した場合のエラーを回避するための処置です。「再スタート」させた場合は最初サイクルタイムがあたえられます。処理の途中でボタンを操作してもアニメが終了するまで機能しません。)
  11. loading_use: Loading 画像は無くとも、使用に差し支えありませんので、非表示にすることも可能です。
    ただ、画像のLOAD(取得)に失敗した場合に、「Loading画像」が消えませんので視覚的に「LOAD状況」を知ることができます。
    ( Loading 画像は好みのものと取替えられます。CSSはそのままで中央表示になります )
  12. auto_edit_use: 編集機能 auto_edit_use は画面の大きさなど簡単な部分を自動で修正します。(主に幅、高さのみ変更)、設定なしの場合はCSSで直接書き換えます。詳細は下の説明参照。
    CSSの変更は基本的には、幅と高さだけの変更ですから、簡単ですが、、。
  13. preload_use: プリロードを使用するは、原則 use です。先に読み込みしていない場合でも画像の表示にはLOAD処理をしていますので時間がかかるだけの違いです。
  14. preloaddata: は「表示する画像」を書き込んでください。画像の大きさは一定です。(JSに直接記入も可能)
  15. path: プリロード画像へのパスを記入します。判らない場合は http:// で始まる絶対パスを記入ください。

※ 初期設定は「AUTO表示」になっています。画像が切り替わらない場合は、画像データの名前、パスを確認ください。
※ 画像 preload により、表示するしないにしろ、標準では「AUTO表示」のため、常に画像が読み込まれますので、画像数は 3-10 位を想定しています。
※ 画像数はいくらでも増やせますが、画像数が多ければ、サーバー転送量が増えます。その辺は使用者が判断ください。
画像の preload をしなくともその時点で「LOAD」して表示しますが、LOADに問題がある場合は「LOADING画像」だけが回転して、画像の表示に進みません。画像のパスなどを確認ください。
※ 原則、画像の preload を設定するのが間違いのない方法です。


JS に問題がある場合は、HTML に書き込んだ画像だけを表示して、JSは停止します。
設定に問題がある場合は、正常に表示されません。

 

PAGERと設定の関係


初期設定資料 2

資料、[ 設定のまとめ表 2 ]

項 目 1. 自動表示 2. 入切ボタンの使用 3. 番号ボタン自動生成 4.PAGER BOX使用 備考
設定変数名 auto_use autobtn_use pager_li_make pager_box_use -
- - - - - -
PAGER不使用
全体を非表示
use 設定しない 設定しない all-none
(番号自動生成なし)
#thumb_box_wrap部分非表示
HTMLを書かない
PAGER不使用
番号を非表示
use use 設定しない 番号自動生成なし ul部分非表示
HTMLを書かない
- - - - - -
PAGERを使用 1 use use make use 番号自動生成
PAGERを使用 2 use use 設定しない use 番号を手書きで書く
最初自動にしない stop use 自由 use 入切ボタンでスタート
番号だけの自動 use use 自由 use 自動は解除にならない
番号だけのマニュアル操作
簡易アルバム向き
stop 設定しない 自由 use 入切ボタンがないので自動に戻れない
サムネール使用 use use thumb use 自動生成でなければHTMLを書く
-------- - - - - -

pager_box_use: use 設定以外は番号およびサムネールは自動生成されません。HTML手書きの場合でもuse設定にしてください。

常にJSのなかでは、「自動表示」で処理されています、「設定無し」にしても自動になります。

「番号ボタン」を押すと自動表示は解除される。「入切ボタン」が無いと自動表示に戻れない。このことを基本に考えればよい。

番号の自動生成の場合は手書きでHTML部分 <li></li> を書かないでください。

 

アルバムとして使用する場合


アルバムとして使用する場合もあることでしょう。アルバムの場合は比較的画像枚数が多いと推定されます。また自動表示でも困ることでしょう。
そこで、、
1. 余計な画像を先き読み出ししないように、画像のプリロード機能、preload_use:'' useを解除する。
2. 「番号だけのマニュアル操作」になるように、ページャーボタン類を設定する。上の表、[ 設定のまとめ表 2 ]PAGERと設定の関係参照
3. 番号は多くなるので自動で作るように基本HTMLのみを書き、pager_li_make:'make' と make の設定にすれば手間が省ける。
4. 画像の大きさは全て同一サイズのみになります、preloaddata:'画像名,画像名,..................画像名' と登録します。
5. サムネール画像を使用するなら、画像準備が面倒ですが、その設定をHTMLに使用者が直接書き込めばよいわけです。
6. サムネール画像がおおくて収まりきらない場合などは、CSSでレイアウト調整します。

これで簡単なアルバム機能になりました。1枚ずつ見ることができます。

 

エフェクトタイプの大まかな種類について


大まかに2種類のタイプがあります。呼称は適当な名前です。



クロスフエードすることを前提にしていますので、全てフエードします。設定などは無視され機能しません。

エフェクトはFLASH.DHTMLなどと違い多くあるものではありません、処理の都合で大まかに2種類に分類しています。
組み合わせなどがありますので10種類以上のフエードエフェクトがあります。
スライス系と違って、動作がそんなに重くありませんから個人の好みに合わせてください。

 

DOWNLOAD したJSを書き換えて状態を知る


DOWNLOAD したJSの初期設定部分を書き換えて、HTMLを表示して見ましょう。違いを知ることができます。
設定などをかえてみてください。(pops-slideshow は単純ですので、設定項目は少ないです)


アニメごとの設定状況を確認する


アニメごとの設定状況を「テキスト表示」するように設定してみる。( JS先頭部分に記載、var show_text_use = 'use' にする。)

表示は単純ですから、説明は省略します。


そのときの状況が表示されます。これはローカルで確認する場合です。実際にサイトアップするときは解除してください。
「動きの名称」は番号ではわかり難いので、説明用に使用しているものです。(複合的な組み合わせですので、名称のとうり動かない場合もあります)
私はこれでデバックしています。

 

大まかな出現確率の設定


タイプ別 (move puff) にその出現の確率を調整できます。
JSの上方に var random_nm = ['puff','move','move','move']とあります。
上記の設定では、moveは3/4の確率。puffは1/4の確率。となる訳です。
これで出現の確率を調整しています。多ければ出現率が高く、タイプの名前が無ければ使用されません。

但し、単純なクロスフェードが 50% 近く出現するようになっています。

 

PUFF(画像拡大フェード)の倍率とアニメタイムの延長


PUFF(画像拡大フェード)の倍率とアニメタイムの延長を変更できます。JS、puff_image = function () {}、300行前後に次ぎの設定があります。
1. 画像拡大の倍率 var scale_rate = 1.35; 画像の1.35倍まで拡大しています。(1.2-1.5前後が良い、好みです)。
2. アニメタイムの延長 var fade_time = Math.floor(o.speed * 1.25); 設定のスピードより1.25倍にしています。(好みです)
好みにより書き換え自由です。

 

ページャー部のレイアウトおよびCSSの変更について


レイアウトおよびCSSの変更は使用者の自由です。その場合 auto_edit_use を解除して、使用者がCSSで全て設定ください。

入り切りボタンは、#show_start_btn であれば判別します。

番号部分は、#thumb_box であれば判別します。JS側で番号部分アクテイブの場合 show_pgr_actived クラス、ホーバーの場合 show_pgr_hoverd クラスがあたえられます。

ページャー部のクロスブラウザ中央あわせは少々面倒ですから注意ください。

以上の点、留意して設計します。

 

ページャー部のレイアウトおよびCSSの変更について


レイアウトおよびCSSの変更は使用者の自由です。その場合 auto_edit_use を解除して、使用者がCSSで全て設定ください。

入り切りボタンは、#show_start_btn であれば判別します。

番号部分は、#thumb_box であれば判別します。JS側で番号部分アクテイブの場合 show_pgr_actived クラス、ホーバーの場合 show_pgr_hoverd クラスがあたえられます。

ページャー部のクロスブラウザ中央あわせは少々面倒ですから注意ください。

以上の点、留意して設計します。


場合により、actived hoverd のクラス名が違うことがあります。使用者の都合で、クラス名が勝ちあうなど不都合があれば、JS CSS の中を検索して変更されても結構です。

ページャーにサムネールを入れた場合の簡単なCSS例です。


40x20の大きさのサムネールを配置したとする

HTML


<div id="show_thumb_box_wrap">
	<div id="show_start_btn" title="AUTO ON/OFF">||</div>
		<div id="show_thumb_box">
		<ul>
			<li><img src="images/photo_t91ss.jpg" width="40" height="20" /></li>
			<li><img src="images/photo_t92ss.jpg" width="40" height="20" /></li>
			<li><img src="images/photo_t93ss.jpg" width="40" height="20" /></li>
			<li><img src="images/photo_t94ss.jpg" width="40" height="20" /></li>
			<li><img src="images/photo_t95ss.jpg" width="40" height="20" /></li>
		</ul><span class="clear" />
		</div>
</div>
 

CSS


wrapの高さ変更
#show_thumb_box_wrap {
	height:30px;
}
 
番号部分をサムネールの大きさにして少し変更
/*40x20 thumb*/
#show_thumb_box_wrap #show_thumb_box ul li {
	display:inline;
	list-style:none;
	width:40px;
	height:20px;
	margin:0 0 0 2px;
	border:1px #000000 solid;
	background-color:#000000;
	overflow:hidden;
	cursor: pointer;
	float:left;
}
#show_thumb_box_wrap #show_thumb_box ul .show_pgr_actived {
border-top:1px #FF0000 solid;
}
#show_thumb_box_wrap #show_thumb_box ul .show_pgr_hoverd {
border-top:1px #FFFFFF solid;
}
 

変更などは使用者の自由です。


ボタン類を中央に配置する。


クロスブラウザにするには、「入切ボタン」を含む構造ですので、少し面倒です。

#show_thumb_box_wrap に text-align:center; 設定。

#show_thumb_box の幅を計算して width:XXXpx; 設定。(幅は「入切ボタン」、マージンを考慮して決める)

#show_thumb_box_wrap に margin:0 auto; 設定して中央に表示させる。

text-align:centerのみではなりません。


 

サイトアップ前の、ローカルでのテストについて


サイトアップ前にローカルでテストされることを推奨します。
簡単な方法は、このサンプルのJSの設定を変更してみてください。おおよその見当は付くとおもいます。


 

FLASHなどの影響を抑える


FLASHなどは動作にパワーが必要ですから、それの影響を受けることが原因です。
なるべくFLASHなどと同一ページ内で使用しないでください。動作に影響がなければその限りではありません。


 

画像の大きさ修正について


「画像サイズをかえないで表示サイズだけ変更したい」


ページに対して画像寸法が合わない場合、別画像をサイトUPしなくとも、簡単に表示画像サイズの変更ができます。
1. JSの画像サイズ設定を変更ください。
2. JSの先頭、var imagesizu_fit = 'fit' にします。 3. HTMLの一枚目画像の width="xxxx" height="xxxx" を変更します。


 

サンプル HTML JS CSS の文字コードについて


以前は「日本語文字コード」で書いていましたが、新たなサイトに移行してから全て「UTF-8」(UTF-8N)で記載します。


  1. 資料の HTML JS CSS は全て「UTF-8」文字コード。
  2. jQueryは本家よりダウンロードしたときのままです。

 


 

 

ライセンス (GPL)


Scriptの応用、再頒布などについて

  1. jQuery自体が、「GPLライセンス」ですので、それに順次ます。
  2. 掲載されたScriptの応用、書き換え、再頒布などについては、当方の許可を得ることなく全て自由に行えます。
  3. Scriptの応用などによる発生する弊害、損害などは自己責任でお願いします。
  4. jQueryを応用した単なる画像エフェクトシステムですので、問題になる箇所などはほとんどないとおもわれます。
  5. より良きものにして頂くため、改良、CSS箇所の発展改良、エフェクト画像の改良などして頂き、発表される事を強く望みます。

 

TOPページ / 特集記事SlideShowページ

 

画像引用: TOYOTA(株) ギャラリー、アーカイブギャラリー、より引用しました。http://ms.toyota.co.jp/jp/F1archive/


企画制作:POPS WEB KOUBOU