うろぐ

インターネットサービス&デジタル家電&デジタルカメラ&パソコンのレビュー

jQueryを使ってタイトルの画像数枚をフェードイン・フェードアウトさせて切り替えるソースです。

表示させる画像を用意してアップロードをしたら、imgタグ付けします。


<div id="homePhoto">
<img src="/dnp/images/homePhoto1.jpg" caption="**1**" title="***1***" alt="*" /></li><img src="/dnp/images/homePhoto2.jpg" caption="**2**" title="***2***" alt="*" /></li><img src="/dnp/images/homePhoto3.jpg" caption="**3**" title="***3***" alt="*" /></li><img src="/dnp/images/homePhoto4.jpg" caption="**4**" title="***4***" alt="*" /></li><img src="/dnp/images/homePhoto5.jpg" caption="**5**" title="***5***" alt="*" /></li><img src="/dnp/images/homePhoto6.jpg" caption="**6**" title="***6***" alt="*" /></li><img src="/dnp/images/homePhoto7.jpg" caption="**7**" title="***7***" alt="*" /></li><img src="/dnp/images/homePhoto8.jpg" caption="**8**" title="***8***" alt="*" /></li><img src="/dnp/images/homePhoto9.jpg" caption="**9**" title="***9***" alt="*" /></li><img src="/dnp/images/homePhoto10.jpg" caption="**10**" title="***10***" alt="*" /></li>
</div><!--//homePhoto-->

<ul><li></li></ul>タグで囲っても良いのですが、作業を省くのでimgタグのみとしました。
改行が入っていないので見づらいと思いますが、これも作業の効率化とソースの軽量化の為です。
画像が表示されるのはidのhomePhotoとなります。JavaScriptのソースで使います。

JavaScriptのソースは下記の様になります。


<script>
$(function(){
	var setImg = '#homePhoto';
	var fadeSpeed = 1500;
	var switchDelay = 15000;
	$(setImg).children('img').css({opacity:'0'});
	$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);
	setInterval(function(){
		$(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
	},switchDelay);
});
</script>

パラメーターですが、fadeSpeedはフェードイン・フェードアウトに要する時間、switchDelayは画像が静的に表示されている時間です。

cssの書き方です
レスポンシブルWEBデザインに対応させたいので、スマホやタブレット縦置きのサイズ(ここでは768px)以下では横幅を100%としました。
768px以上の幅を持つモニターで閲覧するユーザーには、768px幅の固定で見て貰う様に設定してあります。



/* #homePhoto */
#homePhoto {
	margin: 0 auto;
	width: 100%;
	height: 120px;
	text-align: left;
	overflow: hidden;
	position: relative;
}
 
#homePhoto img {
	top: 0;
	left: 0;
	position: absolute;
}
/* //#homePhoto */
}

注意点は縦のサイズです。
上記のソースでは細かな設定を行わずに、ざっくりと縦の値を写真の縦横の数値よりも少なめに取っています。つまり、タイトルの画像の下に隙間が出来ない様にしているわけです。

タブレット横置き・パソコン向けのcssです。


/* #homePhoto */
#homePhoto {
	width: 768px;
	height: 250px;
}
/* //#homePhoto */

スマホ・タブレット縦置きと、横幅ワイドのタブレット横置き・パソコン向けとで縦の数値を変えてあります。

乱暴なソースなのですが、デバイスを選ばずにほぼ期待通りに表示されることと、作業の簡素化がメリットです。
このソースを利用する前程に、画像の下の一部が見られなくなっても良い、つまり画像も管理できている方向けのソースです。

以下、2015/3/18の追記です。

jQueryのバージョンによっては動作しない

WordPressで作成中のコンテンツに上記のソースを埋め込んだところ、動作しませんでした。
単純にコピペをしただけなので、記述ミスなどはありません。コピペでよくあるピリオッドの忘れなどは確認したのですが、そうした事故もありませんでした。

WordPressにはテーマをインストールしたときにjQuery1.11.1が同梱されていて、WordPressのソースを見ると、linkタグでちゃんと読み込んでいます。
ただ、わたしの使用していたはjQuery 2.0.3だったので、バージョンの違いと読み込ませ方法が異なっていたので、わたしのサーバにアップしてあるjQuery2.0.3を読み込ませたところ、無事に写真のフェードイン・フェードアウトの動作が出来ました。

自分の書いた-ソースが原因で無く、また所定のライブラリを読み込んでいる場合、実績のあるソースでエラーが発生した場合、検証がやっかいです。

3月 1st, 2015

Posted In: JavaScript, Responsive Web Design