可変グリッドのvgridというjQuery

2013.08.17 Saturday | by こも
可変グリッドレイアウトのvgridを使ってみました。

ブラウザのサイズに合わせて自動的に並べ替えてくれるjQueryです。
アニメーションによる整列機能もあって、見栄えはいい感じです。



せっかくなので、画像のサムネイル表示をやってみました。


1.vgridをダウンロード

vgridの公式サイトからダウンロードしてきます。

vgridを使うには、jQuery本体とjquery.easingも必要なようです。


2.headに必要なファイルのパスを通す

  <script language="Javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  <script language="Javascript" type="text/javascript" src="js/jquery.easing.min.js"></script>
  <script language="Javascript" type="text/javascript" src="js/jquery.vgrid.min.js"></script>


3.任意のクラスをセットして、vgridをロード。

ここではクラス名をgrid-contentにしました。

<script type="text/javascript">
$(function(){

	var vg = $("#grid-content").vgrid({
		easing: "easeOutQuint",
		useLoadImageEvent: true,
		useFontSizeListener: true,
		time: 400,
		delay: 20,
		wait: 500,
		fadeIn: {
			time: 500,
			delay: 50
		},
	});
	$(window).load(function(e){
		vg.vgrefresh();
	});
});
</script>


4.divタグをセットし、画像をセット

	<div id="grid-content">
		<div>
			<img src ="myimage/pict01.jpg" border="0">
			<p>ビーチ</p>
		</div>
		<div>
			<img src ="myimage/pict02.jpg" border="0">
			<p>カヤック</p>
		</div>
	</div>



これらの処理をひとまとめにします。

<html>
<head>
  <script language="Javascript" type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  <script language="Javascript" type="text/javascript" src="js/jquery.easing.min.js"></script>
  <script language="Javascript" type="text/javascript" src="js/jquery.vgrid.min.js"></script>
<style type="text/css">

<!-- 枠に幅と色などをセット -->
#grid-content {
	width: 100%;
}
#grid-content div {
	width: 200px;
	height: 240px;
	border: 1px solid #000000;
	background-color: #FFFFFF;
	color: #000000;
	margin: 5px;
	padding: 3px;
}
</style>

<script type="text/javascript">
$(function(){

	var vg = $("#grid-content").vgrid({
		easing: "easeOutQuint",
		useLoadImageEvent: true,
		useFontSizeListener: true,
		time: 400,
		delay: 20,
		wait: 500,
		fadeIn: {
			time: 500,
			delay: 50
		},
	});
	$(window).load(function(e){
		vg.vgrefresh();
	});
});
</script>

</head>
 
<body>
	<div id="grid-content">
		<div>
			<img src ="myimage/pict01.jpg" border="0">
			<p>ビーチ</p>
		</div>
		<div>
			<img src ="myimage/pict02.jpg" border="0">
			<p>カヤック</p>
		</div>
		<div>
			<img src ="myimage/pict03.jpg" border="0">
			<p>海の中</p>
		</div>
		<div>
			<img src ="myimage/pict04.jpg" border="0">
			<p>海草</p>
		</div>
		<div>
			<img src ="myimage/pict05.jpg" border="0">
			<p>夕日</p>
		</div>
		<div>
			<img src ="myimage/pict06.jpg" border="0">
			<p>ヒトデ</p>
		</div>
		<div>
			<img src ="myimage/pict07.jpg" border="0">
			<p>ハイビスカス</p>
		</div>
		<div>
			<img src ="myimage/pict08.jpg" border="0">
			<p>夜景</p>
		</div>
		<div>
			<img src ="myimage/pict09.jpg" border="0">
			<p>海岸</p>
		</div>
	</div>


</body>
</html>


設置サンプルはこちらになります。

スライドショーを行うjQuery Blinds

2013.08.16 Friday | by こも
もう一つスライドショーを行ってくれるjQueryです。

iViewは自動でスライドショーを行ってくれましたが、今度はサムネイルをクリックするとその画像に切り替わるjQuery Blindsを使ってみました。





コードも比較的分かりやすくて、組み込み安かった印象です。


1.jQuery Blindsをダウンロード

jQuery Blindsの公式サイトからダウンロードしてきます。
[Working example]をダウンロードしてくると、jquery.blinds-0.9.jsだけでなくjQuery本体のjquery-1.4.1.jsもついてきます。

2.headに必要なファイルのパスを通す

  <script language="Javascript" type="text/javascript" src="js/jquery-1.4.1.js"></script>
  <script language="Javascript" type="text/javascript" src="js/jquery.blinds-0.9.js"></script>


3.使用する画像をセット

任意のクラス名(下記の例はslideshow)で画像をリスト定義します。

<div class="slideshow"> 
   <ul> 
	  <li><img src="myimage/pict01.jpg" alt="ビーチ" /></li>
	  <li><img src="myimage/pict02.jpg" alt="カヤック" /></li>
	  <li><img src="myimage/pict03.jpg" alt="海の中" /></li>
   </ul> 
</div> 


4.画像の切り替えボタンとなるサムネイルを定義

onclickblinds_change();を呼び出します。

このとき、return false;も追加します。
これがないと、ページのトップまで移動して、その場で画像が切り替わるという機能が実現しません。

<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0); return false;">
<img src="myimage/pict01.jpg" width="60px" alt="ビーチ" />
</a>

<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(1); return false;">
<img src="myimage/pict02.jpg" width="60px" alt="カヤック" />
</a>

<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(2); return false;">
<img src="myimage/pict03.jpg" width="60px" alt="海の中" />
</a>


5.blindsをロード
<script type="text/javascript">
	$(window).load(function () {
		$('.slideshow').blinds();
	})
</script>


これらをつなぎ合わせると、次のようなコードになります。
<html>
<head>
  <script language="Javascript" type="text/javascript" src="js/jquery-1.4.1.js"></script>
  <script language="Javascript" type="text/javascript" src="js/jquery.blinds-0.9.js"></script>
</head>

<body>
	<!-- 表示部分 -->
	<div class="slideshow"> 
	   <ul> 
		  <li><img src="myimage/pict01.jpg" alt="ビーチ" /></li>
		  <li><img src="myimage/pict02.jpg" alt="カヤック" /></li>
		  <li><img src="myimage/pict03.jpg" alt="海の中" /></li>
	   </ul> 
	</div> 
	<br>
	<!-- サムネイルボタン -->
	<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0); return false;">
	<img src="myimage/pict01.jpg" width="60px" alt="ビーチ" />
	</a>

	<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(1); return false;">
	<img src="myimage/pict02.jpg" width="60px" alt="カヤック" />
	</a>

	<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(2); return false;">
	<img src="myimage/pict03.jpg" width="60px" alt="海の中" />
	</a>

	<!-- ロード -->
	<script type="text/javascript">
		$(window).load(function () {
			// start the slideshow
			$('.slideshow').blinds();
		})
	</script>

</body>
</html>


iViewに比べて、比較的シンプルな感じですね。

3枚のサムネイルがあって、それをクリックするとその画像に切り替わります。


設置サンプルはこちらになります。


自動でスライドショーをするiViewというjQuery

2013.08.16 Friday | by こも
自動スライドショーをしてくれるiView SliderというjQueryを使ってみました。



画像のスライドショーだけでなく、テキストに動きをつけて入れられるというのが特徴です。
いろいろ便利なこともできる反面、組み込み方も複雑なので、少しまとめてみました。



1.iViewをダウンロードしてきて解凍

iViewの公式サイトからダウンロードしてきて、解凍して使います。
「css」「img」「js」などの必要なフォルダをコピーしてきます。


2.解凍したjsやcssにパスを通します

<link rel="stylesheet" href="css/iview.css" />
<link rel="stylesheet" href="css/skin 1/style.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script src="js/iview.js"></script>


3.使用する画像をセット

<div data-iview:image="画像1.jpg"></div>
<div data-iview:image="画像2.jpg"></div>


テキストのアニメーションをつける場合は、iview-captionクラスを使います。
data-xでX座標、data-yでY座標、data-transitionで動きなどを定義します。

<div data-iview:image="画像1.jpg">
	<div class="iview-caption" data-x="80" data-y="275" data-transition="wipeRight">これは画像1です。</div>
</div>

<div data-iview:image="画像2.jpg">
	<div class="iview-caption" data-x="80" data-y="275" data-transition="wipeLeft">これは画像2です。</div>
</div>



4.スクリプトを実行

スライドショーのポーズタイムなどを設定して実行します。

<script>
	$(document).ready(function(){
		$('#iview').iView({
			pauseTime: 7000,
			directionNav: false,
			controlNav: true,
			tooltipY: -15
		});
	});
</script>


5.画像のサイズに合わせてCSSを変更

css/skin 1/style.cssなどにキャンバスのサイズが定義されているので、画像のサイズに合わせて変更します。



上記のことをやって、5枚の画像を一つのスライドショーにしたサンプルソースは次の通りになります。


<html>
<head>
		<link rel="stylesheet" href="css/iview.css" />
		<link rel="stylesheet" href="css/skin 1/style.css" />
		<script src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/raphael-min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.js"></script>

		<script src="js/iview.js"></script>
		<script>
			$(document).ready(function(){
				$('#iview').iView({
					pauseTime: 7000,
					directionNav: false,
					controlNav: true,
					tooltipY: -15
				});
			});
		</script>
</head>

<body>
	<div class="container">
		<div id="iview">
			<div data-iview:image="myimage/pict01.jpg" data-iview:transition="slice-top-fade,slice-right-fade">
				<div class="iview-caption caption1" data-x="80" data-y="200">iViewを使ってみた</div>
				<div class="iview-caption" data-x="80" data-y="275" data-transition="wipeRight">これは右ワイプ</div>
				<div class="iview-caption" data-x="254" data-y="320" data-transition="wipeLeft">これは左ワイプ</div>
			</div>

			<div data-iview:image="myimage/pict02.jpg" data-iview:transition="zigzag-drop-top,zigzag-drop-bottom" data-iview:pausetime="6000">
				<div class="iview-caption caption5" data-x="60" data-y="240" data-transition="wipeDown">CSSをいじってiViewの描画サイズを変更</div>
				<div class="iview-caption caption6" data-x="300" data-y="310" data-transition="wipeUp"><a href="#">これはskin 1/style.css</a></div>
			</div>

			<div data-iview:image="myimage/pict03.jpg">
				<div class="iview-caption caption4" data-x="50" data-y="80" data-width="312" data-transition="fade">pausetimeも変更できる</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="135" data-transition="wipeLeft" data-easing="easeInOutElastic">ああああああああああ</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="172" data-transition="wipeLeft" data-easing="easeInOutElastic">いいいいいいいいいい</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="209" data-transition="wipeLeft" data-easing="easeInOutElastic">ううううううううううううううう</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="246" data-transition="wipeLeft" data-easing="easeInOutElastic">ええええええええええええええええええ</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="283" data-transition="wipeLeft" data-easing="easeInOutElastic">おおおおおおおおおお</div>
			</div>

			<div data-iview:image="myimage/pict04.jpg">
				<div class="iview-caption caption7" data-x="0" data-y="0" data-width="180" data-height="480" data-transition="wipeRight"><h3>左側にテキスト領域</h3>いろんなことができて便利 <b><i>使い方はdocumentationに書いてある</b></i>!<br><br>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div>
			</div>

			<div data-iview:image="myimage/pict05.jpg">
				<div class="iview-caption caption5" data-x="60" data-y="150" data-transition="wipeLeft">最後までいくと…</div>
				<div class="iview-caption caption6" data-x="160" data-y="230" data-transition="wipeRight">あとは繰り返し</div>
			</div>
		</div>
	</div>

</body>
</html>


長々と書いているのは、テキストに動きをつけているだけです(^^;;
かなり動きのあるスライドショーができました。

設置サンプルはこちらになります。


なめらかにスクロールするjQuery

2013.08.15 Thursday | by こも
上下になめらかにスクロールするSmoothScrollというjQueryを使ってみました。

SmoothScrollは日本の人が作ったようで、公式サイトには日本語の導入方法が記載されてます。

jQuery.smoothScroll.jsをダウンロードして使うみたいです。




動作確認用に「top」「middle」「bottom」の3か所にネームをつけて、アンカーテキストをクリックするとそちらにスクロールするサンプルプログラムを書いてみました。

※スクロールしている様子が確認できるように高さ1000ピクセルのダミーエリアを作っています。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SmoothScroll Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.smoothScroll.js"></script>

<style type="text/css">
<!--
.dummy1 {
	width:450px;
	height:1000px; 
	background-color:#F99;
}
.dummy2 {
	width:450px;
	height:1000px; 
	background-color:#99F;
}
-->
</style>

</head>

<body>


<div id="top">
	<p>
		<a href="#top">トップ</a>
		<a href="#middle">ミドル</a>
		<a href="#bottom">ボトム</a>
	</p>
</div>

<div class="dummy1">
	<p>ダミーエリア</p>
</div>

<div id="middle">
	<p>
		<a href="#top">トップ</a>
		<a href="#middle">ミドル</a>
		<a href="#bottom">ボトム</a>
	</p>
</div>

<div class="dummy2">
	<p>ダミーエリア</p>
</div>

<div id="bottom">
	<p>
		<a href="#top">トップ</a>
		<a href="#middle">ミドル</a>
		<a href="#bottom">ボトム</a>
	</p>
</div>

</body>
</html>


こちらも割と簡単に組み込めて便利な感じです。

ちなみに設置サンプルはこちらにおいています。

画像をポップアップ表示するjQuery

2013.08.15 Thursday | by こも
Facebookのように画像をポップアップして表示するjQueryを使ってみました。

LiteBoxというjQueryが公開されているようで、今回はそのlitebox-1.0を使ってみました。





1.ダウンロード

LiteBoxの公開サイトからlitebox-1.0.zipをダウンロードして解凍。

「css」「js」「images」などのフォルダから必要なファイルをコピーしてきます。



2.HTMLを記述

ヘッダ部分にJSとCSSのパスを通して、bodyタグでliteboxの初期化を行います。

そして、自分で設置した任意の画像ファイルへリンクを張ります。


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LiteBox Test</title>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/moo.fx.js"></script>
<script type="text/javascript" src="js/litebox-1.0.js"></script>
</head>

<body onload="initLightbox()">

<a href="myimage/pict01.jpg" rel="lightbox[example]" title="ビーチ">
<img src="myimage/pict01.jpg" width="120" height="80" alt="ビーチ" />
</a>

<a href="myimage/pict02.jpg" rel="lightbox[example]" title="カヤック">
<img src="myimage/pict02.jpg" width="120" height="80" alt="カヤック" />
</a>

<a href="myimage/pict03.jpg" rel="lightbox[example]" title="海の中">
<img src="myimage/pict03.jpg" width="120" height="80" alt="海の中" />
</a>


</body>
</html>

これだけのコードで画像がポップアップ表示してくれました。
なかなか便利で使えます。

ちなみに設置サンプルはこちらにおいています。

Sponsored Link
Recommend
PHP 逆引きレシピ (PROGRAMMER'S RECiPE)
PHP 逆引きレシピ (PROGRAMMER'S RECiPE) (JUGEMレビュー »)
鈴木 憲治,安藤 建一,山田 直明,八木 照朗,山本 義之,河合 勝彦
Recommend
Recommend
Powered
無料ブログ作成サービス JUGEM