スマホでも利用できる多機能型JQueryスライドショー・FlexSlider2を利用しようとDLする。
簡単なカスタマイズを始めると左右の矢印ボタンアイコンが表示されていない。
代わりに、小さく”f002″と”f001″と小さな文字が二文字目で折り返されて四角で表示されている。
foo1って何だろう？？？
矢印ボタンアイコンを表示させるための方法と記述について。
まずダウンロード解凍すると、demoフォルダ内にスライドショーのサンプルがいくつかあります。
今回はindex.htmlファイルを編集。
jquery.flexslider.jsとflexslider.cssが上位フォルダにあるのでそれぞれ同じ階層のフォルダに複製し、index.htmlの読み込みパスを修正。
他、不要な記述やJQueryライブラリの記述を削除。
これで、ウィンドウサイズに合わせて伸縮するスライドショーが完成。ただ、左右の矢印ボタンのアイコンが表示されていないので、flexslider.cssを編集。
まずはimagesフォルダ内に透過ＰＮＧボタンを作成して用意します。
flexslider.cssの編集では、まず
71行目、72行目の.flex-direction-nav a セレクタ
content: ‘\f002’;
content: ‘\f001’;
のプロパティを空にする。 content: ”;
ボタンの代わりに表示されていたのは上記のセレクタ内の値だった。
64行目の
.flex-direction-nav a セレクタで作成したボタンサイズに合わせheigt、widthを編集。
67行目の .flexslider:hover .flex-prev セレクタに矢印ボタンアイコンの読み込みを記述。
background: url(images/arrow.png) no-repeat;
68行目 .flexslider:hover .flex-next のセレクタも同様に。
background: url(images/arrow.png) no-repeat;
一枚のアイコン画像でCSSスプライトを使う場合は、
background: url(images/arrow.png) no-repeat left;
などと記述する。
また念のためボタン部分をテキストで表示させる場合の設定が、
jquery.flexslider.jsの
1062行目 prevText: “Previous”,
1063行目 nextText: “Next”,
となっているので、ここを
prevText: “”,
nextText: “”,
としておく。
あとはパスが間違えていなければ、正常に表示されます。
また、スライドショーの大きい画像とサムネイル一覧の間に空間が空きすぎる場合は、スライドショー部分のCSS記述か、
縦の長さの異なる画像を読み込んでいる場合があるので、どちらかを調整するとよいようだ。