シリウスに緩やかにフェードインするループ画像を　ページごとに種類を
分けて配置するカスタマイズの方法を解説いたします

 

フェードインスライドをトップページに設置しているサイトはよく見かけますが

 

個別ページでもコンテンツにより設置したい場合もありますね

 

たとえば　トップページより　他ページのほうが検索出上位表示されている
場合など当該コンテンツに力を入れたいもの

 

そんな時に活用すればいいんじゃないかなと　勝手に判断しています

 

 

お知らせ
当ページはシリウスのエントリーページですが　個別に配置が可能なことは
検証しておりますが、スマートフォンでの閲覧障害が確認できました

 

ＰＣでは、正常に作動するのですが、スマートフォンでは作動の精度
スピードが落ちます

 

また、次の画像が現れるまでの間隔が長く画像が飛ぶ..という現象が
ございます

 

現在対応策を模索中ですが、しばらくお時間をいただきたことを
ご了承願います

 

臨時の対処法として
シリウスのｉｐｈｏｎｅの設定をしているサイトなら

 

<ppc>

 

</ppc>
要素で画像の読み込みコード全体をを囲めば、ＰＣだけで表示され
スマートフォンでは非表示とすることができます

 

当サイトご案内のレスポンシブ構造を組み込んでいる際は
スタイルシート内のmediaコード内に,スマートフォンサイズのデバイスでは
非表示指定とする display: none;を含めた記述を入れることで分別が
できます

 

mediaコード
@media(max-width:670px){

 

 

追加行
#mainImg{
width: 100%;
display: none;
}

 

 

 

2016　0102

---

 

 

作動検証

 

 

---

 

シリウスカスタマイズテーマ　query1.10.2min.jsプラグイン個別設定

 

 

最初に設置の流れを解説します

 

jqueryは1.10.2min.jsを使いますのダウンロードからアップロード

 

scriptは当サイトの記述をそのままコピーして
HTMLテンプレートに張り付け

 

CSS指定コピーしてスタイルシートの一番下でよいので貼り付け

 

画像コードをコンテンツページの希望の場所に設置

 

これだけですね

 

 

複数のページに設置する場合は
scrip　をトップページならトップHTMLに

 

カテゴリーならカテゴリーHTMLに

 

エントリーならエントリーHTMLのｈｅａｄ内に入れます

 

 

---

 

では参りましょう

 

jquery-1.10.2.min.js　ダウンロード
http://sourceforge.jp/projects/sfnet_restaurantatlantic/downloads/jquery-1.10.2.min.js/

 

解答はなしでＯＫ
ファイル確認後シリウス機能でアップロードしてください
アップロード作業はこれだけです

 

 

 

 

head内張り付けscript
jqueryを呼び出すための記述
変化スタイルを替えたい場合は数値を書き換えてください

 

 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var setImg = '#mainImg';
var fadeSpeed = 1500;
var switchDelay = 5000;

 

$(setImg).children('img').css({opacity:'0'});
$(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed);

 

setInterval(function(){
$(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg);
},switchDelay);
});
</script>

 

 

---

 

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

 

以下指定記述を貼り付けてください
width: 500px
height: 350px;は画像が小さい場合でも自動縮小にはなりません

 

サイズの差は　記事との間に隙間をつくってしまします
画像を配置してみて　隙間があるようでしたら数値を変えてください

 

 

 

#mainImg {
margin: 0 auto;
width: 500px;
height: 350px;
text-align: left;
overflow: hidden;
position: relative;
}

 

#mainImg img {
top: 0;
left: 0;
position: absolute;
}

 

 

---

 

画像配置

 

設置したいページソースに以下記述を貼り付けてください

 

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

 

<div id="mainImg">
<img src="<% pageDepth %>img/1pontey1.jpg" style="width:500px;" alt="" />
<img src="<% pageDepth %>img/1ponti2.jpg" style="width:500px;" alt="" />
<img src="<% pageDepth %>img/1ponti3.jpg" style="width:500px;" alt="" />
<img src="<% pageDepth %>img/1ponyi4.jpg" style="width:500px;" alt="" />
</div>

 

 

 

実証後のことですが　ページごとに画像サイズを変えてもOK

 

画像枚数を変えてもOKでした

 

画像はシリウス機能で配置できます

 

リンクも同様にシリウスリンク設定でやられてください

 

 

同じページに二つ配置すると作動しません

 

一つにしましょう

 

---

 

これだけでプレビューで確認いただけます

 

スポンサーリンク

 

 

 

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

 

シリウスヘッダー自動ループ画像設定方法
シリウスカスタマイズ