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等に追加します。
[php]


[/php]

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

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

” type=”text/css”>
[/php]

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

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

  • キャプション

  • キャプション

  • キャプション

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

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

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

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

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

コメントを残す