スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

複数の画像が自動でスライドするカルーセルパネルの作成

カルーセルパネルの作成

複数の画像を枠内でスライド表示させます。
基本的な動きは指定した秒数が経過するごとに画像をスライドさせます。
両サイドにある矢印を押すと手動で画像をスライドさせます。
画像をクリックすると詳細情報、もしくは大きな画像で表示させます。


1.HTMLで表示させる画像をlistタグを作成します。


   <div id="carousel">
      <ul>
       <li><a href="#" ><img src="images/slide01.jpg" width="150" height="225" /></a></li>
       <li><a href="#" ><img src="images/slide02.jpg" width="150" height="225" /></a></li>
       <li><a href="#" ><img src="images/slide03.jpg" width="150" height="225" /></a></li>
       <li><a href="#" ><img src="images/slide04.jpg" width="150" height="225" /></a></li>
       <li><a href="#" ><img src="images/slide05.jpg" width="150" height="225" /></a></li>
     </ul>
   </div>


2.CSSで色や枠の大きさなど詳細設定を作成します。


#carousel * {
 margin: 0;
 padding: 0;
 }

#carousel {
 width: 900px;
 height: 225px;
 text-align: left;
 position: relative;
 margin-top: 0;
 margin-right: 30px;
 margin-bottom: 0;
 margin-left: 30px;
}

#carousel_prev,
#carousel_next {
 top: 0;
 width: 20px;
 height: 225px;
 background: #000;
 cursor: pointer;
 position: absolute;
}
#carousel_prev {
 left: -20px;
 background:transparent url(../images/prev.jpg) no-repeat top left;
}
#carousel_next {
 right: -20px;
 background:transparent url(../images/next.jpg) no-repeat top left;
}

#carousel ul li {
 width: 150px;
 float: left;
 display: inline;
}


/* =======================================
 ClearFixElements
======================================= */
#carousel ul:after {
 content: ".";
 height: 0;
 clear: both;
 display: none;
 visibility: hidden;
}

#carousel ul {
 display: inline-block;
 overflow: hidden;


3.スクリプトでカルーセル部分の動的な部分を作成します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 $('#carousel').each(function(){
  var slideTime = 400;
  var delayTime = 2500;

  var carouselWidth = $(this).width();
  var carouselHeight = $(this).height();
  $(this).append('<div id="carousel_prev"></div><div id="carousel_next"></div>');
  $(this).children('ul').wrapAll('<div id="carousel_wrap"><div id="carousel_move"></div></div>');

  $('#carousel_wrap').css({
   width: (carouselWidth),
   height: (carouselHeight),
   position: 'relative',
   overflow: 'hidden'
  });

  var listWidth = parseInt($('#carousel_move').children('ul').children('li').css('width'));
  var listCount = $('#carousel_move').children('ul').children('li').length;

  var ulWidth = (listWidth)*(listCount);

  $('#carousel_move').css({
   top: '0',
   left: -(ulWidth),
   width: ((ulWidth)*3),
   height: (carouselHeight),
   position: 'absolute'
  });

  $('#carousel_wrap ul').css({
   width: (ulWidth),
   float: 'left'
  });
  $('#carousel_wrap ul').each(function(){
   $(this).clone().prependTo('#carousel_move');
   $(this).clone().appendTo('#carousel_move');
  });

  carouselPosition();

  $('#carousel_prev').click(function(){
   clearInterval(setTimer);
   $('#carousel_move:not(:animated)').animate({left: '+=' + (listWidth)},slideTime,function(){
    carouselPosition();
   });
   timer();
  });

  $('#carousel_next').click(function(){
   clearInterval(setTimer);
   $('#carousel_move:not(:animated)').animate({left: '-=' + (listWidth)},slideTime,function(){
    carouselPosition();
   });
   timer();
  });

  function carouselPosition(){
   var ulLeft = parseInt($('#carousel_move').css('left'));
   var maskWidth = (carouselWidth) - ((listWidth)*(listCount));
   if(ulLeft == ((-(ulWidth))*2) || ulLeft == ((-(ulWidth))*2)+1) {
    $('#carousel_move').css({left:-(ulWidth)});
   } else if(ulLeft == 0) {
    $('#carousel_move').css({left:-(ulWidth)});
   };
  };

  timer();

  function timer() {
   setTimer = setInterval(function(){
    $('#carousel_next').click();
   },delayTime);
  };

 });
});
</script>

■以下の二つの値を変える事によりスライドのスピード調整ができます。
var slideTime = 400;  これは次回動作までの時間
var delayTime = 2500; これは動作そのもののスピード

■スクリプトの中で両サイドのボタンを定義しています。
carousel_prev
carousel_next
ボタンの位置、画像等は前のCSSで定義しています。

■jqueryを使用します。
1行目に記述しているのは、WEBからJqueryを読み込むパターンのもの。
私は自サイトでjquery-1.10.2.min.jsを定義していますので、1行目の代わりに下記の記述をしています。
<script src="js/jquery-1.10.2.min.js"></script>

Google Libraries APIをみんなが共通で使用すると同じjqueryファイルを一度読み込むと
jQueryファイルがキャッシュされ、次回以降はサイト表示スピードが向上するというメリットがあります。
ただし、バージョンが常に変わっていく為、最新版に対応できる記述をしないといけないなど面倒な点もあるみたいです。
詳細は以下のサイトへ

WEBからJqueryを読み込む
http://kihon-no-ki.com/load-jquery-using-google-libraries-api



出来上がりのイメージはこちらの学習サイトのLOOKBOOKコーナーを参照してください。




スポンサーサイト

Javascriptで画像をかっこよく表示させる

例えばサムネイル画像をクリックして拡大表示させる場合、

画像タグにtarget="_blank"を指定して新しい画面で表示させても味気なくて美しくないですね。

画面上にかっこよくポップアップ表示させる方法を紹介します。


20140205_1.jpg

作成する上でのポイント
1.スクリプトをダウンロード。
2.HTML上でスクリプトを紐付ける。
3.HTMLタグ記述

1.スクリプトをダウンロード
Lightbot2を使用するので、下記サイトからV2.6(2/5現在)をDownLoadし解凍後任意のフォルダに置いておく。
Lightboxサイト

2.HTML上でスクリプトを紐付ける。
スクリプトを紐付けてHTMLから呼び出せる様にします。

HTMLファイルのソースの head 内に以下の3行を追記する。

<script src="lightbox/js/jquery-1.7.2.min.js"></script>
<script src="lightbox/js/lightbox-2.6.min.js"></script>
<link href="lightbox/css/lightbox.css" rel="stylesheet" />




ファイルのパスは自分が任意で置いた場所を指定してください。

3.HTMLタグ記述

HTML上で表示させたいリンク部分「a href...」に 「rel="lightbox"」属性を追記する。

例)
<a href="images/sample.jpg" rel="lightbox" title="画像タイトル">リンク</a>

表示させたい画像が複数あり手動でスライドさせたい場合は
先ほどのrel属性の中に  [グループ名] を追記する。グループ名は任意の文字を設定する。

例)
<a href="images/picture01.jpg" rel="lightbox[group]" title="タイトル01">リンク1</a>
<a href="images/picture02.jpg" rel="lightbox[group]" title="タイトル02">リンク2</a>
<a href="images/picture03.jpg" rel="lightbox[group]" title="タイトル03">リンク3</a>


これで完成です。




サイトを開いた際にメッセージを表示させる。Javascript


今回は実践の練習としてGUのサイトで服の素材をお借りして制作していきます。


ただ、本家のGUとは関係のないサイトになりますので、


制作したGUサイトのトップにメッセージにその説明を表示させます。


Javascriptを使用した基本中の基本であるメッセージ表示から。


alertを使用します。

<script>


 alert("メッセージ");

</script></span>

結果:メッセージ


メッセージを改行して2行に分けたい場合

alert("メッセージ¥n2行目のメッセージ");

結果: メッセージ
   2行目のメッセージ

   
   


改行コードである ¥n を入れる事で改行されます。


alertは計算もできます。

alert(1+3);

結果:4

デバッグ等の使用に最適です。


スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。