ふんわりと緩やかに画像が切り替わる自動でループするフェードタイプの
スライドは、魅惑的な画像をそろえるとサイトイメージを向上させます

シリウスのサイトコンテンツに合わせて画像を用意しましょうか？

とは言いつつもこんなイメージです　
画像ないんで同じ画像が二つも？？すみません

jquery-1.9.1.min.jsプラグイン採用の自動フェード　ループスライド

自動ループするスライド画像はいかがですか？
ですが
大変申し訳ないことですが今回のフェード式スライダーには特徴があります

スクリプト画像呼び出しをHTMLテンプレート内に配置した場合は
サブカテゴリーに配置するとサブカテゴリー全てのページで
エントリーに配置するとエントリー全てのページで表示されてしまいます

取り付けたいページに記述を置けば、そのページのみで反映されます

画像を置く記述はページ内に

CSSはスタイルシートに置けばサイト全体に反映される

script　minn.jsはページのメインHTML内　head内に置く

が、基本です

ここで大事なお知らせです

シリウス機能でｉｐｈｏｎe設定をしている場合は、スマホ画面でエラーが出ます

ですので、ご使用の際は、レスポンシブデザインサイトでのみご使用ください

情報追加

全てのページで個別に表現出来るスライドスクリプト情報を追記しております
ですが　各ページすべてのスライド搭載はサーバー負担が多くなるばかり
という事情も顧慮して配置しましょう

好みに合うスタイルをお使いください

シリウスにスライダー（BxSlider）を導入する方法

シリウスに適合するflexslider　フレックススライダー設置方法

シリウス｜単独ページでフェード？ループ画像個別設定方法

又　フリースペースに画像を小さくして配置すると　サイドバーでの
作動が確認できます

当サイトではトップにスクリプトがおおくありすぎて表示すらされませんでした
スクリプトが多く複雑化する場合は不作動ですね

エントリーでは作動が確認できたのですけれど
全てのエントリーページで表示されてしまい　ギブアップ

フリースペースでは正常に表示されました
サイドバーを大きくしている場合は表示させても違和感はないと
想われます

フリースペース　赤印に配置して作動OKでした

読者に見てもらいたい画像を複数表示できます

読者の方が魅入られるような画像をそろえると良いでしょうか？

そんなサイト見たことありませんか？

では　設定の手順を解説いたします

用意するもの

同サイズの画像を複数

次は　画像を作動させるための
jquery1.9.1.min.jsをダウンロードして　サーバーに入れましょう

こちらでダウンロード
http://sourceforge.jp/projects/sfnet_e-portal/downloads/js/jquery-1.9.1.min.js/

上記サイトがいつの日か消えていたら
jquery1.9.1.min.jsで検索して見てください

解凍ファイルではありませんので　パソコン内から
サイトのあるサーバーフォルダにアップロードします
アップロードはこれだけです

ご自分でコピーしてファイルを作る方はこちらで
https://java.net/projects/solaristest/sources/website-repo/content/jquery-1.9.1.min.js?rev=8

記述コードは画像コード以外はそのままコピーしてお使いください
改行しなくとも作動は確認できます
数値などの改行はその後　変化を確認しながら進めてください

画像記載

画像コードを省いてあなたの画像コードに入れ替えてください

サイズは好みに合わせて指定が可能です

ｉｄを変更した場合は他の記述でも変更が必要になります

入れ替えが完了しましたら ＨＴＭＬテンプレートを開いて

ＢＯＤＹ内

textTitle1 と

textBody1 の間に貼り付けます

scriptをＨＴＭＬheadに入れます

スピードの変化を変えたい場合は3000の数値を変更してください
数値を大きくすると映像時間が長くなります

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script
<script type="text/javascript">
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow img.active');

if ( $active.length == 0 ) $active = $('#slideshow img:last');

var $next = $active.next().length ? $active.next()
: $('#slideshow img:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

$(function() {
setInterval( "slideSwitch()", 3000 );
});
</script>

スタイルシートを開いてください

以下記述をスタイルシートの一番下に入れてください
コンテンツ記事内に配置されるよう改編しております

height:250px;は画像が表示される位置と下の記事との間の調整をします

#slideshow {
position:relative;
height:250px;
}

#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}

#slideshow IMG.active {
z-index:10;
}

#slideshow IMG.last-active {
z-index:9;
}

以上で完了します

ご注意

画像記述は　記事コンテンツにおいても反映されません
ＭＴＭＬ内に配置する必要がございます

当サイト例以外に置いた場合

textTitle1の下に置くと　サイト巻末に現れます

textTitle1の上に置くとＨ３の上

もっと上に置くと　ヘッダーのあたりに現れます

ヘッダー画像位置にも表示できますが
画像の縦サイズが微妙です

なんか　普通は画像がグローバルメニューの裏側に配置されるのですが
今回のjqueryはグローバルメニューにかぶさるように表示されます

ヘッダ－配置には向いていませんね

ヘッダーをループフェードにする場合は巻末メニューでご確認ください

重要
上部の記事コンテンツのスタート箇所は　画像が現れると上部記事が
覆い尽くされますから　画像縦サイズ以下に下げてください

スポンサーリンク

シリウス｜フェードタイプスライド画像設置方法
シリウスヘッダー自動ループ画像設定方法
シリウスカスタマイズ