一定時間でフェード画像切替 | SIRIUSシリウスbxslider

～お知らせ～
要望にお応えしLUREA購入特典もSIRIUSと同じ特典にしました！
購入特典にオリジナルテンプレートを追加しました！

一定時間でフェード画像切替②

前回は、ただの画像切替についてご紹介しましたが、
今回はそこにフェード（クロスフェード）を加えたものを説明します。
（確認テンプレートはデフォルトとビジネス／ブラウザはIE、google chromeになります。）
またbxsliderというプラグインを使用します。

それで出来るフェード画像がこんな感じです。

デモ動作ページへ移る（１段目のクロスフェード画像）

いやー、結構苦労しました^^;

他のサイト様でも紹介されていますが、その方法ではどうも画像が縦に並んでしまったり、
記事内かヘッダーへの設置で様子が変わったり、
デフォルトかビジネステンプレートでも違ったりと
悪戦苦闘でした。シリウスは相性が悪いのかな？

他サイト様の方法でも人によっては、出来た・出来ないのバラつきがあるようなので、
今回こちらで紹介する方法も”参考”程度にお読みください。
相談には乗りますが、クレームは無しです（笑）

それでは手順です。

手順１

下のボタンより必要なファイルをダウンロードします。
今回、私の使用しているファイルをそのまま使ってもらうことで再現性を上げたいのと
CSSファイルの内容を一部変更しています。変更内容は手順２にて。
（ファイル名：js.zip　容量：20KB）

ちなみにファイル入手先の公式サイト
http://bxslider.com/

手順２

ファイルを解凍すると、フォルダの中に３つのファイルがあります。
bxsliderファイル一覧

”jquery.bxslider-aki.css”を一部ソースを変更しています。
変更内容　⇒　初期状態では画像に写真のようなフレーム枠が表示されるが、それを非表示。

この３つのファイルが入ったフォルダをそのまま、あなたのサーバーのどこかにアップロードします。

手順３

編集メニューからHTMLテンプレートをクリックします。
HTMLテンプレート選択

手順４

フェード画像を使いたいページ、トップやエントリーページ等を選択して、
＜/head＞の上に下記の青文字を追記します。
※あなたのURL部分だけ、修正してください。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

<script src="http://あなたのURL/js/jquery.bxslider.min.js"></script>

<link href="http://あなたのURL/js/jquery.bxslider-aki.css" rel="stylesheet" />
</head>

次にそのまま下のほうへ移り、
＜/body＞の上に下記の青文字を追記します。

<script type="text/javascript">
$(document).ready(function(){
var obj = $('#slider').bxSlider({
auto: true,
slideWidth:600,
pause:3000,
speed:1000,
mode:'fade',
pager:true,
controls:true,
onSlideAfter: function () { obj.startAuto(); }
});
});
</script>

</body>

ちなみに、コメントを付けるとこんな感じです。
auto: true, //自動再生有効
slideWidth:600, // スライドショーの幅
pause:3000, // 表示間隔
speed:1000, // 切替時間
mode:'fade', // フェード効果
pager:true, // ページ選択ボタン
controls:true, // 左右ボタン
onSlideAfter: function () { obj.startAuto(); } //ページ切替操作後自動再生再開

手順５

最後に記事本文中に下記コピペして、画像部分を任意で指定します。

<div id="slider">
<img src="<% pageDepth %>img/slide1.jpg" alt="" />
<img src="<% pageDepth %>img/slide2.jpg" alt="" />
<img src="<% pageDepth %>img/slide3.jpg" alt="" />
<img src="<% pageDepth %>img/slide4.jpg" alt="" />
</div>

ここで注意点。
ビジネステンプレートは上記をそのまま記事内に書けば表示されましたが、
デフォルトテンプレートではどうも表示されません。
そこで、デフォルト時にはモジュール化することで表示されました。
「サイト全体設定」ー「モジュール設定」ー「新規追加」でソースを書いたら、
記事中にこのモジュールを挿入します。
<% module(slider) %>

こちらで保存したらプレビューで確認してみましょう♪
どうでしょう？

また、a:hover {　等でリンク付きの文字や画像をずらす設定をしていると、
画像の左右ページ切替ボタンが反応したりしなかったり・・・。
この場合は、a:hover {　を止めるか、
pager:true, のtrueをfalseにして消してしまうのが有効的です。

他にも当サイトはレスポンシブ化していますが、
デフォルトテンプレートのこのページでは、画像が消えてしまいます。
ビジネステンプレートだと画像も縮小されレスポンシブが有効であることが
確認できました。

う～ん、
javascript機能を使いたい時にはビジネステンプレートのほうがどうも良さそうですw

お試しあれ☆