roundabout

 

 

作動スタイルは公式サイトでご確認ください
デモサイト

 

ダウンロードサイト

 

画像編集でミスして不正確な場合　こんな画像になります

 

横回転を表現する　roundaboutはｆ無償でダウンロードができます

 

以前は公式サイト内にいろんなデモサイトがあったのですが　
現在では　デモサイトにさえなかなか到達できない　わけわからんサイトに
なっています

 

詳細を求める方は公式サイトでご覧ください
ただし　英語表記です

 

前置きですが　シリウスにroundaboutを取り付けとなりますが

 

以前はデフォルトテンプレートの２カラム　３カラムではメニューレイアウトが
崩れてしまいます　という解説でしたが　こちらで何とか対処出来る方法を
追記しております

 

 

当ページでは一カラムでの解説となります

 

横回転ですと横サイズを大きく取るため一カラムでよいのかなとも
想っていますけど？

 

ただし　サイト巻末のメニューになぜか　異変が発生します
サイトメニューまで　横回転してしまうのです

 

トップＭＴＭＬで設定してスライドもトップページにした場合
トップページのみでの異変で　他のページでは異変は見られません

 

ｃｓｓでの指定がメニューまで変化させてるみたいです

 

 

これは不具合なのか？解決はいまだしておりませんが
これでよい方は以下へお進みください

 

デフォルトテンプレートでは　いまいちスタイルが合わなかったので

 

ビジネステンプレートに取り付けてみました

 

 

---

 

設定手順解説

 

 

公式サイトから　ＺＩＰファイルをダウンロード
３つのファイルがあります

 

全て　サーバーにアップロードします

 

重要
ＦＴＰによる外部scriptファイルアップロードについての
追加情報をご覧ください

---

 

スクリプトをＨＴＭＬhtml内に記述します

 

以下をコピーしてお使いください

 

 

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="jquery.roundabout.js"></script>
<script>
$(document).ready(function() {
$('ul').roundabout();
});
<script>

 

スタイルシートで指定します

 

 

width: 800px;が横回転の全体幅を指定
height: 370px;が全体の枠の縦サイズ

 

width: 300px;が一つの画像の幅サイズ
height: 200px;が一つの画像の縦サイズ

---

スタイルシートに以下記述を追加してください

 

 

ul {
margin: 50px auto;
width: 800px;
height: 370px;
}
li {
display: block;
width: 300px;
height: 200px;
}
li img {
width:100%;
}

 

 

 

スライドさせる画像を配置します

 

画像読み込み記述をシリウスの記事カラム内　
表示させたい位置に配置してください

 

画像は同サイズで作成します

 

 

<ul>
<li><img src="<% pageDepth %>img/1aaaaa.png" style="height:200px;" alt="" /></li>
<li><img src="<% pageDepth %>img/1a12131.png" style="width:200px;" alt="" /></li>
<li><img src="<% pageDepth %>img/1airako6.jpg" style="height:200px;" alt="" /></li>
<li><img src="<% pageDepth %>img/1airako4.jpg" style="height:200px;" alt="" /></li>
</li>
</ul>

 

一般スライドと違い　ｉｍａｇｅファイルをサーバーからアップロードする
という作業はございません

 

 

これだけで　反映は確認できますが　プレビューで何度も検証したい方は
シリウスデータにもファイルを３つ入れてください

 

即反映が確認できます

 

表示幅を替える場合は　スタイルシート開いて数値変更　保存で
すぐ反映されます

 

 

その他のカスタマイズは公式サイトでご確認お願いいたします
公式サイトは英語で　解らんという方は　グーグルプラウザから
ご覧になると日本語に翻訳されます

 

スポンサーリンク

 

 

 

横回転スライダー.roundabout
ヘッダー画像に横回転スライダーを設置
シリウスカスタマイズ