最近では、JavaScriptのスライドショーは自分で作らなくても、
素材として、様々なスライドショープラグインが配布されていますが、
やはりオーダーメイドの自由度の高い動きを求める場合、自分で作ったほうがよい場合もあります。

もちろんjQueryを使用したほうがラクです。
次にスライドショーに使う画像ですが、私も過去まではJavaScript内で連想配列を作り、
その中に画像の名前を入れて、生成する<img>タグに入れていけばよいと考えていました。

しかし、その方法では、もしスライドショーの画像の内容だけを変更し、名前はそのままであった場合、
ブラウザキャッシュに残った過去の画像が表示されてしまう場合があります。
そうならないようにするためには、使用したい画像をあらかじめ<img>タグで画像を呼び出し、
それらを<div>で囲み、<div>に対して「opacity:0」等のCSSを適用して、
見えなくするという手もあります。

しかし、それではソースを見られたときにカッコ悪い、
またはスライドショーエリアに入れた<img>タグの分だけ
スライドショーに適用したいという場合もあるでしょう。
多くのスライドショープラグインも、そのようにしているはずです。

本記事では、以下のHTMLをサンプルとします。

<div class="slide_show">
	<img src="images/photo01" />
	<img src="images/photo02">
	<img src="images/photo03">
	<img src="images/photo04">
	<img src="images/photo05">
</div>

jQueryで<img>タグを読み込む方法ですが、
まずは親の<div>要素を起点とし、中に入っている<img>要素を読み込みます。

var slideShowUnit = $(".slide_show img");

この時点で「slideShowUnit」変数には、<div class=”slide_show”>の中にある
<img>のDOM要素が配列で入っています。

ここで注意したいのは、配列に入っているのは、jQuery要素ではなくDOM要素であるという事です。
つまり、生のHTMLオブジェクトであるということです。
確かに配列で入っているので、要素数の調査には「slideShowUnit.length」でも可能なのですが、
そのまま「slideShowUnit[0].attr(“src”)」とjQueryのメソッドを使うと、エラーになります。

要するに、ここでは<img>タグの「src」属性に入っている画像のパスを抽出したいのですが、
jQueryで行うには、以下のように記述をします。

$(slideShowUnit[0]).attr("src");

つまり、DOM要素をjQueryクラスである「$()」に入れてしまえばよいのです。

$($(".slide_show img")[0]).attr("src");

この記述でも同じ意味になります。

後はこれを、for文で各子要素を呼び出していけばいいのです。

$(document).ready(function(){
	var slideShowUnit = $(".slide_show img");
	var imgPasss = [];
	
	for(var i = slideShowUnit.length - 1;i <= 0; i --){
		imgPasss[i] = $(slideShowUnit).attr("src");
		if(i > 0){
			imgPasss[i].remove();
		}
	}
}

これでjQueryで抽出した子要素の団体を、jQuery要素として扱う事ができます。

ちなみに上記サンプルでは、for文を逆に回していますが、
これは、ついでに最初の<img>要素のみを残して、他は消してしまうためです。
「i」を加算していく従来の方法の場合、
スクリプト上ではjQuery要素のメソッドを使用した時点の状況から処理されるので、
「i」が加算される状況と噛み合わなくなり、要素を消し損ねたりするからです。

「i」の数値は逆に回していますが、「imgPasss」にも「i」の数値をプロパティに使用しているため、
順番通り配列に埋まってくれます。

これで各<img>要素の画像パスの取得ができました。
後はスライドショーの内容を作成するわけですが、本記事ではここまでとします。

長くなりましたが、今回の要点をまとめますと、

スライドショーを作成する場合、スクリプト上で生成した<img>要素だけでは、
ブラウザキャッシュの影響で古い画像が使用される可能性がある。

jQueryで取得した要素の配列に入っているのは、DOM要素であり、
そのままではjQuery要素として使用できず、「$()」で囲む事でjQuery要素に変換可能である。

以上となります。

また、ここでjQueryについて加筆しますと、
呼び出したjQuery要素からは、子要素をDOM要素として配列で呼び出せますが、
これは普通にDOM要素を配列にまとめたものではなく、
jQuery独自のメソッドが、その中に別途含まれていると思われます。
その辺はまた、別に調査できればと思っております。

Tweet