flexslider-eye

flexsliderはイメージ以外もスライド出来るよ!

2012.12.23(日) WordPress, テーマ, 機能, 関数
このエントリーをはてなブックマークに追加

最近、flexsliderをこちらのサイトに組み込みました。以前は、refineslideというのを使用していたのですが、いくらオプション調整しても自動的にスライドしないのと、ボタンのスタイルが若干やぼったかったから、変えてみました。
組み込み自体はわりと簡単だったんですが、若干ん?と思ったところと、おっ?と思った所などがあったので、ご報告しておきます。



STEP1. まずはダウンロードから

flexsliderは、jQueryで作成された軽くてなめらかに動作するスライダーで、どうやらこのテーマを作成したwoothemesが作成したみたいですね。
全然関係ないですが、jQueryって初めて聞いた時は、javascriptでSQLでも実行できるんですか(もうクエリー=SQLなもんで)?って思ってしまったのはここだけの話です。

flexsliderで検索すると、以下のサイトがトップに来ますので、まずはそこから、jsファイルやcssファイルなどをダウンロードしましょう。
組み込み方などもこのページに詳しく書いてますので、ほとんどそれで組み込み可能です。

flexslider


ちなみに、真ん中へんにある「Live Demo」というところからリンクすると、flexslider2となっていますが、ダウンロードされるファイルは同じです。こちらは、サムネイルを使ったスタイルのサンプルなどもあります。

flexslider 2


STEP2. jsファイルの配置とfunctionの呼び出しを記述

ダウンロードしたzipファイルを解凍すると、「jquery.flexslider.js」というファイルが出来るので、それをテーマのフォルダの適当なフォルダに起き、その読み込みと、functionの呼び出しを、header.php等に追加します。

<script type="text/javascript" src="<?php echo home_url('/'); echo "wp-content/themes/自分のテーマ名/js/jquery.flexslider.js";?>"></script>
<script type="text/javascript">
	jQuery(window).load(function() {
		jQuery('.flexslider').flexslider({
		});
	});
</script>


STEP3. cssファイルの配置と読み込み処理を記述

ダウンロードしたzipファイルを解凍すると、「flexslider.css」というファイルが出来るので、それをテーマのフォルダの適当なフォルダに起き、その読み込み処理をheader.php等に追加します。

<link rel="stylesheet" href="<?php echo home_url('/'); echo "wp-content/themes/自分のテーマ名/flexslider.css";?>" type="text/css">


STEP4. スライダーを出す場所にhtmlを追加

スライダーを出したい場所に、以下のフォーマットで記述します。そうすると、liタグで記述した分の数だけ、イメージとキャプションが勝手にスライドしてくれるようになります。

	<div class="flexslider">
		<ul class="slides">
			<li>
				<img src="表示したいイメージのurl" />
				<p class="flex-caption">キャプション</p>
			</li>
			<li>
				<img src="表示したいイメージのurl" />
				<p class="flex-caption">キャプション</p>
			</li>
			<li>
				<img src="表示したいイメージのurl" />
				<p class="flex-caption">キャプション</p>
			</li>
		</ul>
	</div>

phpなどのスクリプトで、liタグの中身を作るようにしておけば、自動的にスライド数を増やせますね。

STEP5. キャプション用のcss追加

うーん、キャプションが全然でません。flexsliderのページには、flex-captionクラス以下のpタグ内のテキストをキャプションで出してくれると、記載されてるんだけどな。というか、livedemoページには、キャプションのサンプルないし、もしかしてそんな機能廃止されてるとか?でも、トップページのサンプルには、ちゃんとキャプションついてるし、ということでトップページのcssから、flex-captionの記述をまるまる追加したところ、無事でました。いやーよかった、よかった。キャプション以外はとても簡単にできたかと思います。

.flex-caption {background:none; -ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); zoom: 1;}
.flex-caption { width: 96%; padding: 2%; position: absolute; left: 0; bottom: 0; background: rgba(0,0,0,.9); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.9); font-size: 14px; line-height: 16px;}


STEP6. スライダーって、イメージ以外もスライドできるんだね

キャプションもそうですが、基本的にはliタグの範囲内にあるものはすべてスライドしてくれるので、イメージじゃなくてもいいんだな?と気がつきました。そうなると、もっといろいろな利用方法があるのかなと思い、こんなものを作ってみました。
この話は、次回にご報告しますので、乞うご期待。

コメントをどうぞ