▲PAGE TOP

背景画像を全画面表示してスライダーで次々と切り変える



設置方法
  • bgslider.zip をダウンロードする
  • bgslider.zipを解凍し、WEBサーバにアップロードする
  • BLOGGERダッシュボード>レイアウト>HTML/Javascript を作成する
  • タイトルに「 CSS 全画面背景画像スライダー 」と入力する
  • コンテンツに以下のスクリプトを入力して保存する
  • スクリプト(以下)内の*****をWEBサーバURLに変更する
  • スクリプト内のパラメーターを変更して調整する
  • 以上で終了



/*全画面背景画像スライダー*//*全画面背景画像スライダー*/
<script src="http://*******.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="http://*******/bgslider/jquery.maximage.js" type="text/javascript"></script>
<style type="text/css">
img.bgmaximage{
position:fixed !important;
display:none;
}
</style>
<img alt="" class="bgmaximage" src="http://www.******.com/img/**1.jpg">
<img alt="" class="bgmaximage" src="http://www.******.com/img/**2.jpg">
<img alt="" class="bgmaximage" src="http://www.******.com/img/**3.jpg">
<img alt="" class="bgmaximage" src="http://www.******.com/img/**4.jpg">
<img alt="" class="bgmaximage" src="http://www.******.com/img/**5.jpg">
<script type="text/javascript">
$(function(){
jQuery('img.bgmaximage').maxImage({
isBackground: true,
slideShow: true,
slideShowTitle: false,
slideDelay: 5,
overflow: 'auto',
verticalAlign:'center'
});
});
</script>


パラメータの設定

verticalAlign: 画像のどこを基準にして表示するか

  • top : 画像の上辺を基準
  • center : 画像のセンターを基準
  • bottom : 画像の下辺を基準


overflow: スクロールバーの表示有無

  • true: スクロールバー表示
  • auto : 自動
  • hidden : スクロールバーを隠す


slideDelay:: 画像を切り替えるまでの秒数




参照元

このjQueryを紹介しているサイト>> 背景にフルスクリーン画像をスライダーで流すjQuery「maxImage Scaling Plugin」


別の方法
こちらの方法も使えそうです >> Create A Background Slideshow For Blogger





COMMENT 投稿した内容は「 掲示板 」に掲載されます。
ペンネーム(必須)

タイトル

メールアドレス

話題にするページ/ウェブサイトのURL
メッセージ(必須)
アップロードする画像
パスワード(必須)