トップページの大画像スライドの表示パターンを変更する
スライドの動きやレイアウトは、jQueryで実現しています。jQueryのスクリプトを入れ替えることで表示パターンを変更することができます。
下記ファイルの2カ所（赤字）のみを修正することで簡単に変更できます。

■data/Smarty/templates/default/frontparts/bloc/top_image.tpl
  <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.amazingslider/bloc_top_image.js"></script>
  <div class="block_outer block_top_image" style="margin-bottom:120px;">

※ margin-bottomの値は、状況に合わせて調整してください。
top_image.tplファイルの修正箇所
■data/Smarty/templates/default/frontparts/bloc/top_image.tpl
top_image.tplファイルの修正箇所
jQueryスクリプトの置き場所
■html/js/jquery.amazingslider/
jQueryスクリプトの置き場所
ブロックの配置
ヘッダー部直下に配置
ヘッダー部直下に配置
メインカラムに配置
メインカラムに配置
jQueryスクリプトの動作確認
jQueryスクリプトをさらにカスタマイズ
bloc_top_image_.js ～ bloc_top_image_020.js 共通
（1）ナビボタンのマウスオーバーでサムネイル画像の表示・非表示（true,false）
表示：　navshowpreview:true,（No.1に適用）
非表示：navshowpreview:false,（No.2に適用）
（2）ナビボタンのマウスオーバー・クリックでメイン画像を切り替える。（true,false）
マウスオーバー：navswitchonmouseover:true,（No.16に適用）
クリック：　　　navswitchonmouseover:false,（No.15に適用）
（3）メイン画像の転換効果
※ スクリプト記述の最後を変更
①　フェード（No.1に適用）
        fade: {
            duration:1000,
            easing:"easeOutCubic",
            checked:true
        },
        transition:"fade"
②　クロスフェード（No.3に適用）
        crossfade: {
            duration:1000,
            easing:"easeOutCubic",
            checked:true
        },
        transition:"crossfade"
③　スライド（No.2に適用）
        slide: {
            duration:1000,
            easing:"easeOutCubic",
            checked:true
        },
        transition:"slide"
④　スライス（No.4に適用）
        slice: {
            duration:1500,
            easing:"easeOutCubic",
            checked:true,
            effects:"up,down,updown",
            slicecount:10
        },
        transition:"slice"
⑤　ブラインド（No.6に適用）
        blinds: {
            duration:2000,
            easing:"easeOutCubic",
            checked:true,
            slicecount:3
        },
        transition:"blinds"
⑥　3D（No.9に適用）※ブラウザにより挙動が異なる。
        threed: {
            checked:true,
            bgcolor:"#222222",
            perspective:1000,
            slicecount:5,
            duration:1500,
            easing:"easeOutCubic",
            fallback:"slice",
            scatter:5,
            perspectiveorigin:"right"
        },
        transition:"threed"
⑦　3D水平（No.8に適用）※ブラウザにより挙動が異なる。
        threedhorizontal: {
            checked:true,
            bgcolor:"#222222",
            perspective:1000,
            slicecount:1,
            duration:1500,
            easing:"easeOutCubic",
            fallback:"slice",
            scatter:5,
            perspectiveorigin:"bottom"
        },
        transition:"threedhorizontal"
⑧　ブロック（No.10に適用）
        blocks: {
            columncount:5,
            checked:true,
            rowcount:5,
            effects:"topleft,bottomright,top,bottom,random",
            duration:1500,
            easing:"easeOutCubic"
        },
        transition:"blocks"
⑨　シャッフル（No.11に適用）
        shuffle: {
            duration:1500,
            easing:"easeOutCubic",
            columncount:5,
            checked:true,
            rowcount:5
        },
        transition:"shuffle"
このページの先頭へ