My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

4/17 [jQuery] toggle()メソッド / LightBox(プラグイン)

f:id:sntkk3:20140228223724g:plain

toggle()メソッド

【演習】toggle()メソッド

演習1. ボタンをクリックする都度表示画像が変化する以下のような画面を作成します。




f:id:sntkk3:20140228213532p:plainこの演習のポイント
a要素となっている画像をクリックした場合、通常href属性に設定されたリンク先にジャンプしてしまう。
この演習では、そのリンク先にジャンプしようとする機能を無効化する必要がある。

HTMLソース

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery ~toggle()メソッド~</title>
<style> 
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--<script src="js/jquery-1.11.0.min.js">-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
<script>
//2014.4.16
//http://d.hatena.ne.jp/web-0127/?of=1
//off()で処理を実行(ulのa要素を指定)
</script>
</head>
<body>
<button>画像を変更</button>
<p><img src="js/img/flower.jpg" alt="花"></p>
<script>
  $(function(){
	 $('button').toggle(function(){
		 $('img').attr('src','js/img/sea.jpg').attr('alt','海');},
		 function(){
		 $('img').attr('src','js/img/Jellyfish.jpg').attr('alt','くらげ');},
		 function(){
		 $('img').attr('src','js/img/building.jpg').attr('alt','建物');},
		 function(){
		$('img').attr('src','js/img/flower.jpg').attr('alt','花');
	 });
		 });
</script>
</body>
</html>

演習2. 画像をクリックする都度表示画像が次の画像に変化する以下のような画面を作成します。
(※変化する画像は1の演習と同様のため、残り3枚の画面は省略します。)

HTMLソース

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery ~toggle()メソッド~</title>
<style>
p {
  cursor:pointer;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!--<script src="js/jquery-1.11.0.min.js">-->
<!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
<script>
//2014.4.16
//http://d.hatena.ne.jp/web-0127/?of=1
//~toggle()メソッド~
  $(function(){
	 $('#imgChange').toggle(function(){
		 $('img').attr('src','js/img/sea.jpg').attr('alt','海');},
		 function(){
		 $('img').attr('src','js/img/Jellyfish.jpg').attr('alt','くらげ');},
		 function(){
		 $('img').attr('src','js/img/building.jpg').attr('alt','建物');},
		 function(){
		$('img').attr('src','js/img/flower.jpg').attr('alt','花');
	 });
		 });
</script>
</head>
<body>
<p>画像を変更</p>
<p id="imgChange"><img src="js/img/flower.jpg" alt="花"></p>
<script>

</script>
</body>
</html>

LightBoxプラグイン

http://lokeshdhakar.com/projects/lightbox2/

※こちらのサイトでまずプラグインのプログラムファイルをダウンロードします。

【演習】LightBoxプラグイン

LightBoxの機能を利用した以下のような画面を作成します。

HTMLソース

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery ~LightBox~</title>
<link rel="stylesheet" href="js/lightbox/css/screen.css">
<link rel="stylesheet" href="js/lightbox/css/lightbox.css">
<style>
.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #83745A;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}
</style>
<script>
//2014.4.17
//http://d.hatena.ne.jp/web-0127/?of=1
//LightBox
</script>
</head>
<body>
<div class="lbcontainer">
<h2>例</h2>
<h3>単一</h3>
<div class="img-row">
<a class="example-image-link" href="js/lightbox/img/demopage/image-3.jpg" data-lightbox="example-set" data-title="風景1">
<img class="example-image" src="js/lightbox/img/demopage/thumb-3.jpg" alt=""/></a>
</div><!--.img-row-->
<h3>複数枚</h3>
<div class="image-row">
<div class="image-set">
<a class="example-image-link" href="js/lightbox/img/demopage/image-4.jpg" data-lightbox="example-set" data-title="風景2">
<img class="example-image" src="js/lightbox/img/demopage/thumb-4.jpg" alt=""/></a>

<a class="example-image-link" href="js/lightbox/img/demopage/image-5.jpg" data-lightbox="example-set" data-title="風景3">
<img class="example-image" src="js/lightbox/img/demopage/thumb-5.jpg" alt=""/></a>

<a class="example-image-link" href="js/lightbox/img/demopage/image-6.jpg" data-lightbox="example-set" data-title="風景4">
<img class="example-image" src="js/lightbox/img/demopage/thumb-6.jpg" alt=""/></a>

<a class="example-image-link" href="js/lightbox/img/demopage/image-1.jpg" data-lightbox="example-set" data-title="風景5">
<img class="example-image" src="js/lightbox/img/demopage/thumb-1.jpg" alt=""/></a>

</div>
</div><!--.img-row-->

<!--<div id="overLayer" style="display:none;">
</div>-->
</div><!--lbcontainer-->
<script src="js/lightbox/js/jquery-1.11.0.min.js"></script>
<script src="js/lightbox/js/lightbox.js"></script>
</body>
</html>

その他プラグイン

【メモ】jQueryプラグイン利用時など、外部参照CSSファイルに関する注意点

複数の外部ファイルを使用するときの注意点:
ファイルの参照元を併記したとき、後の方のファイルが優先される
その場合、ファイル間でID名、Class名が被らず、レイアウトに影響が出ないように気をつける

4つ以上外部ファイルを読み込むと非常に遅くなる