サイトマップ
maximage２でサイト背景のスライド設定手順
2015 0131
シリウススライドカスタマイズテーマ maximage2スクリプト
シリウスのサイト背景にスライドする画像を外部スクリプト採用で
設定する手順のご案内です
背景スライドのコンテンツは2度目になります
前回は supersizedのご案内をしております
参考までにsupersizedはこちらでご覧ください
背景画像のスライドショー 自動ループ フェードイン設定方法
今回のプラグイン maximage２は 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.ｊをアップロードします
サーバーにない方は以下でダウンロードしてください
Download the compressed, production jQuery 1.10.2.min.js
サーバーに入れるものはこれで終了します
つぎにＨＴＭＬに配置する記述です
head内に以下記載を張り付けてください 一行
<link rel="stylesheet" href="jquery.maximage.min.css" type="text/css" />
次はＨＴＭＬの下の位置
</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より軽いものは？
簡単なものはないものかと探しつずけている訳ですが
中々いいものありませんね
今回のスクリプトもいまいちですが改良を重ねてみます
それでもいいものにならなければ再度いいもの探して追記致しますので
今しばらくお待ちください
スポンサーリンク