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


    シリウスカスタマイズ 記事一覧を記事中段へ移動して情報を解り易く明示しましょう グーグル検索で好評かを得られるかも?

    当該サイトコンテンツ関連記事

     スポンサーリンク

    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採用背景スライド設定カスタマイズ
    シリウスカスタマイズトップ

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト