TOP

maximage2でサイト背景のスライド設定手順

2015 0131
シリウススライドカスタマイズテーマ maximage2スクリプト

 

シリウスのサイト背景にスライドする画像を外部スクリプト採用で
設定する手順のご案内です

 

背景スライドのコンテンツは2度目になります

 

前回は supersizedのご案内をしております

 

参考までにsupersizedはこちらでご覧ください
背景画像のスライドショー 自動ループ フェードイン設定方法

 


 

今回のプラグイン maximage2は supersized に比べ

 

設定は簡単で重くありませんので負担軽減になるかもしれませんが
いまいちという面も見られますので以下詳細

 

私の知識不足で申し訳ありませんが
プレビュー確認が何しても?できない状況です

 

アップロードすれば反映は確認できます

 

supersizedと表現スタイルは同じものに認識できますが
微妙なスタイル表現が資料不足でなんともいまいち

 

スライドか もしくはフェーズ

 

フェーズの場合の切り替わりは一般的な変化

 

いまのところはそんな状況ですが 以降カスタマイズは
実証しながら進めてまいります

 

デモページはございませんが当サイトのトップページには同スタイルの
背景画像スクリプトを配しておりまますのでご覧ください

 

 

 

ファイルダウンロードはこちらです
https://github.com/akv2/MaxImage

 

Download ZIPをダウンロードします

 

ダウンロードしたMaxImage2から 以下の3つをシリウス機能で
サーバーへアップロードします

 

lib/css/jquery.maximage.min.css
lib/js/jquery.maximage.min.js
lib/js/jquery.cycle.all.min.js

 

もうひとつ jQuery 1.10.2.min.jをアップロードします
サーバーにない方は以下でダウンロードしてください
Download the compressed, production jQuery 1.10.2.min.js

 

サーバーに入れるものはこれで終了します


 

 

 

 

つぎにHTMLに配置する記述です

 

head内に以下記載を張り付けてください 一行
<link rel="stylesheet" href="jquery.maximage.min.css" type="text/css" />

 

 

 

 

次はHTMLの下の位置

 

</body>の上に スクリプトとスライドする画像コードを張り付けます

 

 

こちらが画像呼び込むための記述で
シリウス画像を配置するよう書き換えてございます

 

画像コードは 3つでも5つでも記載できます

 

記述は折れてますがコピーしてシリウス操作に貼り付けますと整列します
操作画面で設定したい画像のコードに書き換えてください

 

<div id="maximage">
<img src="<% pageDepth %>img/1adpuuuuu.png"style="width:1321px;" alt="" />
<img src="<% pageDepth %>img/1adpuuuuu.png"style="width:1321px;" alt="" />
<img src="<% pageDepth %>img/1a1213121.png" style="width:1321px;" alt="" />
</div>

 

 

以下の記述を張り付けます
スクリプトコード
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="jquery.maximage.min.js" type="text/javascript"></script>
<script src="jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
jQuery('#maximage').maximage();
});
</script>

 

 

以上の二つの記述を 以下例に従い貼り付けて下さい

 

記載例
<!-- ★フッターここまで★ -->

 

<% searchTag | str_replace(<!-- ★comment★ -->,サイト内検索:) | tag_insert(div id="searchbox") %>

 

ここから

 

</div>
<div id="maximage">
<img src="<% pageDepth %>img/1adpuuuuu.png"style="width:1321px;" alt="" />
<img src="<% pageDepth %>img/1adpuuuuu.png"style="width:1321px;" alt="" />
<img src="<% pageDepth %>img/1a1213121.png" style="width:1321px;" alt="" />
</div>
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>

 

<script src="jquery.maximage.min.js" type="text/javascript"></script>
<script src="jquery.cycle.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
jQuery('#maximage').maximage();
});
</script>

 

ここまで

</body>
</html>

 

 

以上完了しましたがプレビュー確認はできませんので
アップロードして反映を確認しましょう

 


追記

 

当サイトはトップページにsupersized採用で背景を
フェーズスライドしておりますが 搭載以降他のスクリプトに
影響が出てしまうほど複雑な代物です

 

シリウス機能ボックス枠が表示不能になったり いろいろ

 

そこで supersizedより軽いものは?

 

簡単なものはないものかと探しつずけている訳ですが
中々いいものありませんね

 

今回のスクリプトもいまいちですが改良を重ねてみます

 

それでもいいものにならなければ再度いいもの探して追記致しますので
今しばらくお待ちください

 

スポンサーリンク

 

 

シリウスサイトmaximage2採用背景スライド設定カスタマイズ
シリウスカスタマイズトップ