▲PAGE TOP

2014年4月30日水曜日

トップ画像をスライダーで表示する


jQuelyで作成した画像スライダーを設置します。

【補足】画像スライダーのjQuelyは http://www.hans-huber.com/0102030405/doc/jslider.zip  からダウンロードできます。

【補足】画像スライダーの元サイト http://vanity.enavu.com/documentation/


  1. おちゃのこネット http://ocnk.net にログインする
  2. デザイン管理>表示とレイアウトの設定>いらっしゃいませの内容設定 をクリック
  3. 入力欄に以下のSample HTMLを編集して入力する


高さを画像に合わせて変更する

数値を変更すると、動きの早さを調整できます
画像のURLを入力する
早送り、戻しの編集ができます。画像を入れることも可能

animationを変更すると、スライドの動きを制御できます。
animation the animation is by default set to fade but if you include the custom_animations.js file you can use the following: slideDown, slideUp, slideRight, slideLeft, bounce, explode, fold, scale, random


<style>
.slider {width:580px; height:358px; margin:0px auto; position:relative;}
.slider > div {display:none;}
a.next, a.prev {color:#000; background-color:#; border:0px solid #fff; outline:0px solid #ccc; text-shadow:-1px -1px 0px #fff; text-decoration:none; z-index:99; padding:0px 5px; display:block; }
.next {position:absolute; right:0px; top:50%;}
.prev {position:absolute; left:0px; top:50%;}
a.inactive {color:#ccc; background-color:#fff; border:1px solid #eee; outline:none;}
ul.navi {list-style:none; position:absolute; bottom:10px; right:5px;}
ul.navi li {float:left; margin-right:5px;}
ul.navi li a {background-color:#CCC; display:block; height:10px; width:10px; text-indent:-9999px; outline:none; -moz-border-radius: 5px; border-radius: 5px;-webkit-box-shadow:  0px 0px 2px  #000000;
-moz-box-shadow: 0px 0px 3px #000000;
box-shadow: 0px 0px 1px #000000; }
ul.navi li a.active {background-color:#fff;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://www.hans-huber.com/0102030405/java/jslider/custom_animations.js"></script>
<script src="http://www.hans-huber.com/0102030405/java/jslider/custom_easing.js"></script>
<script src="http://www.hans-huber.com/0102030405/java/jslider/jSlider.js"></script>
<script>
$(document).ready(function(){
$(".slider").jSlider({elem:"div",images:true, animation: "random",auto_slide: true, auto_slide_interval:5000, infinite: true, speed: 1200});
});
</script>
<!-- the slider content holder -->
<div class="slider">
<!-- the elements inside the slider, have as many as you want -->
<div><a href="#"><img src="http://www.hans-huber.com/www/serendipityflower/img/top-img1.jpg" width="580" height="358" border="0" /></a></div>
<div><a href="#"><img src="http://www.hans-huber.com/www/serendipityflower/img/top-img2.jpg" width="580" height="358" border="0" /></a></div>
<div><a href="#"><img src="http://www.hans-huber.com/www/serendipityflower/img/top-img3.jpg" width="580" height="358" border="0" /></a></div>
<div><a href="#"><img src="http://www.hans-huber.com/www/serendipityflower/img/top-img4.jpg" width="580" height="358" border="0" /></a></div>
<div><a href="#"><img src="http://www.hans-huber.com/www/serendipityflower/img/top-img5.jpg" width="580" height="358" border="0" /></a></div>
    <!-- the navigation can be placed ANYWHERE in your document -->
    <a href="#" class="next">></a>    <a href="#" class="prev"><</a>
</div><!-- slider -->









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

タイトル

メールアドレス

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