株式会社オンラインの金沢です。

本日は、開発プラグイン「Dual Size Resonsive Slider」の詳しい仕様の一部を紹介させて頂きます。

プラグインの説明やダウンロードはこちらの紹介ページからどうぞ。

実績紹介 – Dual Size Responsive Slider

「Dual Size Responsive Slider」でスライダーを表示させると、次のようなHTMLを生成してくれます。

<div class='flexslider' data-slider-option='{"animation":"fade","direction":"horizontal","animationLoop":"1","slideshowSpeed":"5000","animationSpeed":"1000","pauseOnHover":"","controlNav":"1","directionNav":"1"}' style='line-height: 1;'>
	<ul class='slides'>
		<li>
			<a href='http://www.online-inc.jp/archives/plugins/dual-size-responsive-slider'>
				<img class='slide-image-0' alt='WordPressプラグイン「Dual Size Responsive Slider」' data-large-slide='http://www.online-inc.jp/wp-content/uploads/wp-plugin-dsrs-release-900x300.jpg' data-small-slide='http://www.online-inc.jp/wp-content/uploads/wp-plugin-dsrs-release-sp.jpg' />
			</a>
		</li>
		<li>
			<a href='http://www.online-inc.jp/about'>
				<img class='slide-image-1' alt='いつも日本の春が美しいように' data-large-slide='http://www.online-inc.jp/wp-content/uploads/spring2015-900x300.jpg' data-small-slide='http://www.online-inc.jp/wp-content/uploads/spring2015_sp.jpg' />
			</a>
		</li>
	</ul>
</div>

実際には改行やタブスペースが入っていないところがありますが、見やすいように調整しました。

コードをご覧頂くと、「data-○○」という見たことがない属性が使われているのがわかるかと思います。これは独自のデータ属性です。jQueryの「data」メソッドを使ってHTMLに格納したデータを取得して処理を行っております。最初は「attr」メソッドを使おうと思ったのですが、それだと取得した値が全て文字列になってしまい上手く処理ができませんでした。

全体のdiv要素に付いている「data-slider-option」は、管理画面で設定したスライダーの設定が配列で格納されています。こうすることで、サイト上に複数のスライダーを設置することを可能としております。

各img要素には「data-large-slide」と「data-small-slide」の2つのデータ属性が付いており、画像のURLが入っています。画面サイズが大きいと「data-large-slide」がsrc属性に与えられ、画面サイズが小さいと「data-small-slide」がsrc属性に移されます。実は生成するHTMLのimgタグにはsrc属性を付けていないのです。jQueryによる処理の前にsrc属性に書かれたの画像が読まれてしまっては、折角の画像最適化が台無しになってしまいます。画面サイズに適した画像ファイルを読み込むことで、通信量を削減させることが「Dual Size Responsive Slider」を開発した動機の1つですから、src属性は無しにしました。

また、全体のdivにスタイルが直書きしてあります。例では「line-height: 1;」だけですが、スライドが1枚だけのときは「margin-bottom: 0;」も加えられます。「margin-bottom」はナビゲーションボタンが非表示のときに隙間ができてしまうのを防ぐためで、「line-height」は下記の記事で説明してあります。

FlexSlider2で左右のボタンがずれる件 – 2015/5/15の記事

headに出力するスクリプトのコードは、プラグインファイル「dual-size-responsive-slider.php」の163～180行目に書いています。管理画面で設定する「切り替え幅」を取得するPHPコードが混ざっていますが、そこを書き換えれば静的ページでも使用できます。上記のHTMLコードと一緒にご活用ください。

まだまだ完璧とは言えないプラグインですので、ご意見・ご要望などがありましたら是非コメント欄などにご記入ください。よろしくお願いします。

金沢