TOP

個別ページごとにフェードイン画像をループさせる方法

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

 

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

 

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

 

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

 

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

 

 

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

 

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

 

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

 

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

 

臨時の対処法として
シリウスのiphoneの設定をしているサイトなら

 

<ppc>

 

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

 

当サイトご案内のレスポンシブ構造を組み込んでいる際は
スタイルシート内の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のhead内に入れます

 

 


 

では参りましょう

 

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

 

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

 

 

 

 

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でした

 

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

 

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

 

 

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

 

一つにしましょう

 


 

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

 

スポンサーリンク

 

 

 

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

 

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

シリウス|単独ページでフェード?ループ画像個別設定方法関連解説
SIRIUS シリウスサイトにフェードタイプスライド画像設置方法
コンテンツ内に自動で無限ループ フェードタイプのスライド画像を設置する方法の解説です 当解説なら初めての方でも15分程度で設置完了 scriptjquery1.9.1.min.jsを使用します
jquery-slideshowでループスライド画像取り付けは大変です
jquery-slideshowでループスライド画像取り付けしようと努力したのです しかし 取り付けは完了したもののこりゃ駄目だ???
フェードインヘッダー設置方法
フェードスタイルのスライド画像を変化させてヘッダー画像に入れてみると おやおやいいサイト構成になるではありませんか? 画像を用意すれば15分で設置完了です