JavaScriptでギャラリーを作りたい

現在JSでギャラリー的なものを作ろうとしています
仕様としては
画面上段に画像（原寸より小さいもの）を表示し、クリックされると下にその画像の原寸大が表示されるというものです
ですが以下のコードだとクリックしてもすべて「img1.png」しか表示されません。なぜなのでしょうか？

JavaScript
1<!doctype html>
2<html>
3<head>
4  <meta charset="utf-8">
5</head>
6<body>
7  <img src="img/img1.png" width="100" height="75" name="myImg"  onclick="changeImg()">
8  <img src="img/img2.png" width="100" height="75" name="myImg"  onclick="changeImg()">
9  <img src="img/img3.png" width="100" height="75" name="myImg"  onclick="changeImg()">
10  <div id = "screen"></div>
11  <script>
12  function changeImg(){
13    var num = document.getElementsByName('myImg');
14    if(num[0]){
15      var screen = document.getElementById('screen');
16      screen.innerHTML = "<img src='img/img1.png'>";
17    } else if(num[1]) {
18      var screen = document.getElementById('screen');
19      screen.innerHTML = "<img src='img/img2.png'>";
20    } else {
21        var screen = document.getElementById('screen');
22        screen.innerHTML = "<img src='img/img3.png'>";
23    }
24  }
25
26  </script>
27</body>
28</html>

行動規範の内容に同意します

回答5件

以下のようにも書けます。

html
1<!doctype html>
2<html>
3<head>
4  <meta charset="utf-8">
5</head>
6<body>
7 <div id="galleryimg"></div>
8 <script>
9  var galleryImg = [
10	'img/img1.png'
11	,'img/img2.png'
12	,'img/img3.png'
13  ];
14 </script>
15 <script src="galleryimg2.js"></script>
16</body>
17</html>

galleryimg2.js

javascript
1(function(window,document,galleryImg){
2	var dstDiv;
3	init();
4	function init() {
5		var srcDiv = document.createElement('div');
6		dstDiv = document.createElement('div');
7		document.getElementById('galleryimg').appendChild(srcDiv);
8		document.getElementById('galleryimg').appendChild(dstDiv);
9		for (var i = 0; i < galleryImg.length; i++) {
10			var img = document.createElement('img');
11			img.src = galleryImg[i];
12			img.style.width = '100px';
13			img.style.height = '75px';
14			srcDiv.appendChild(img);
15			img.addEventListener('click',function(){clickImg(this.src);},false);
16		}
17	}
18	function clickImg(src) {
19		var elm = dstDiv.childNodes[0];
20		if (elm) {
21			dstDiv.removeChild(elm);
22		}
23		var imgElm = document.createElement('img');
24		imgElm.src = src;
25		dstDiv.appendChild(imgElm);
26	}
27})(window,document,galleryImg);

投稿2015/07/17 00:39

編集2015/07/17 03:21

rik

総合スコア1151

更に汎用性を持たせるなら、以下の様にします。

html
1<!doctype html>
2<html>
3<head>
4  <meta charset="utf-8">
5</head>
6<body>
7 <img src="img/img1.png" width="100" height="75" name="myImg">
8 <img src="img/img2.png" width="100" height="75" name="myImg">
9 <img src="img/img3.png" width="100" height="75" name="myImg">
10 <div id = "screen"></div>
11 <script>
12  var galleryImg = {
13	'srcImgName':'myImg'
14	,'dstImgId':'screen'
15  };
16 </script>
17 <script src="galleryimg.js"></script>
18</body>
19</html>

galleryimg.js

javascript
1(function(window,document,galleryImg){
2	var srcImgName = galleryImg.srcImgName;
3	var dstImgId = galleryImg.dstImgId;
4
5	var imgElms = document.getElementsByName(srcImgName);
6	for (var i = 0; i < imgElms.length; i++) {
7		imgElms[i].addEventListener('click',function(){clickImg(this.src);},false);
8	}
9	function clickImg(src) {
10		var elm = document.getElementById(dstImgId).childNodes[0];
11		if (elm) {
12			document.getElementById(dstImgId).removeChild(elm);
13		}
14		var imgElm = document.createElement('img');
15		imgElm.src = src;
16		document.getElementById(dstImgId).appendChild(imgElm);
17}
18})(window,document,galleryImg);

投稿2015/07/16 23:57

rik

総合スコア1151

ベストアンサー

html
1<!doctype html>
2<html>
3<head>
4  <meta charset="utf-8">
5</head>
6<body>
7 <img src="img/img1.png" width="100" height="75" name="myImg" onclick="changeImg(this.src)">
8 <img src="img/img2.png" width="100" height="75" name="myImg" onclick="changeImg(this.src)">
9 <img src="img/img3.png" width="100" height="75" name="myImg" onclick="changeImg(this.src)">
10 <div id = "screen"></div>
11 <script>
12 function changeImg(src) {
13 	document.getElementById('screen').innerHTML = '<img src="' + src + '">';
14 }
15 </script>
16</body>
17</html>

これでいかがでしょうか？

ただし、私なら以下のように書きます。

html
1<!doctype html>
2<html>
3<head>
4  <meta charset="utf-8">
5</head>
6<body>
7 <img src="img/img1.png" width="100" height="75" name="myImg">
8 <img src="img/img2.png" width="100" height="75" name="myImg">
9 <img src="img/img3.png" width="100" height="75" name="myImg">
10 <div id = "screen"></div>
11 <script>
12 (function(window,document){
13 	var imgElms = document.getElementsByName('myImg');
14 	for (var i = 0; i < imgElms.length; i++) {
15 		imgElms[i].addEventListener('click',function(){clickImg(this.src);},false);
16 	}
17 	function clickImg(src) {
18 		var elm = document.getElementById('screen').childNodes[0];
19 		if (elm) {
20 			document.getElementById('screen').removeChild(elm);
21 		}
22 		var imgElm = document.createElement('img');
23 		imgElm.src = src;
24 		document.getElementById('screen').appendChild(imgElm);
25 	}
26 })(window,document);
27 </script>
28</body>
29</html>

投稿2015/07/16 23:40

rik

総合スコア1151

Yoshinori

2015/07/16 23:54

ご回答ありがとうございます 1つ目のコードなのですが function changeImg(src) { document.getElementById('screen').innerHTML = '<img src="' + src + '">'; } の解説をお願いしたいです・・・。すみません＞＜

rik

2015/07/17 00:00

各画像クリック時に this.src(自分のsrc)を引数として受け取り、それを使用しています。 onclickの箇所は以下の様にしています。 onclick="changeImg(this.src)"

Yoshinori

2015/07/18 23:48

ありがとうございます！！

行動規範の内容に同意します

自分なりに即興で書いてみたもの。
nameやidを引数で指定する形にし、汎用的に使えるようにしてみたもの。

javascript
1function imgGallery(_DetailObject){//name,screenId
2  //最低限の引数チェック
3  if(!_DetailObject){
4    console.error("imgGallery : 引数が指定されていません");
5    return;
6  }
7  
8  //外部スコープ参照を省けるようにすることで多少処理速度が上がる事に期待できる
9  var _document=document;
10  
11  //引数のObjectから各情報を取得
12  var _galleryName=_DetailObject.name || "0";
13  var _screenId=_DetailObject.screenId || "0";
14  //引数のObjectから情報が取得できたかチェック
15  if(_galleryName==="0" || _screenId==="0"){
16    console.error("imgGallery : Objectの値が不正です");
17    return;
18  }
19  
20  //imgElements
21  var _imgElems=_document.getElementsByName(_galleryName);
22  var _imgLength=_imgElems.length;
23  
24  //screenElement
25  var _screenElem=_document.getElementById(_screenId)
26  
27  //Attributeのsrcを取得する関数
28  function get_src(_Elem){
29    if(!_Elem){
30      return;
31    }
32    return _Elem.getAttribute("src") || _Elem.src;
33  };
34  
35  //eventメソッドのwrapper
36  var addEvent=(window.addEventListener ?
37      function (_Elem,_Type,_Func,_Capture){
38        _Elem.addEventListener(_Type,_Func,_Capture);
39      }
40      :
41      function (_Elem,_Type,_Func){
42        _Elem.attachEvent("on"+_Type,_Func)
43      }
44  );
45
46  function createImageElement(_Path){
47    var _img=_document.createElement("img");
48    _img.setAttribute("src",_Path);
49    return _img;
50  };
51  
52  //対象のelementに画像を挿入する。挿入済みならそのsrcを書き換える
53  function showImage(_imgPath){
54    var _imgElement=createImageElement(_imgPath);
55    if(_screenElem.children[0]){
56      _screenElem.children[0].setAttribute("src",_imgPath);
57      return;
58    }
59    _screenElem.appendChild(_imgElement);
60  };
61  
62  //eventの発生元であるelementを取得する
63  function getEventTarget(_EventObject){
64		return _EventObject.target || window.event.target;
65	};
66  
67  //各画像にeventを設定する
68  for(var i=_imgLength;i--;){
69    addEvent(
70      _imgElems[i],
71      "click",
72      function (e){
73        var _target=getEventTarget(e);
74        var _src=_target.getAttribute("src") || _target.src;
75        showImage(_src);
76      },
77      false
78    );
79  }
80};

使用するときは以下のようにします。

javascript
1(new imgGallery({
2  name : "images_name",//画像のグループにつけたname
3  screenId : "screen"//画像の出力先
4}));

今回の例では

javascript
1(new imgGallery({
2  name : "myImg",
3  screenId : "screen"
4}));

とすることで動作します。
条件としてscreenとする要素の中が空か画像である必要があります。
もしテキスト等をデフォルトで表示する場合は一度中身を空にするような処理を加える必要があります。
(その場合、srcを書き換える処理は必要なくなる。但し初回のみ初期化するようにすれば残す価値有り)

動作確認はFirefox39.0、Safari6.0.1で行いました。
以下はテストに使用したHTMLになります。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4	<meta charset="UTF-8">
5	<title>Gallery</title>
6	<script type="text/javascript" src="gallery.js"></script>
7</head>
8<body>
9	<style>
10		#img_wrap img {
11			width: 50px;
12			height: 50px;
13		}
14	</style>
15	<div id="img_wrap">
16		<img src="http://dummyimage.com/300x300/000/fff&text=1" name="gallery_1" alt="">
17		<img src="http://dummyimage.com/300x300/000/fff&text=2" name="gallery_1" alt="">
18		<img src="http://dummyimage.com/300x300/000/fff&text=3" name="gallery_1" alt="">
19		<img src="http://dummyimage.com/300x300/000/fff&text=4" name="gallery_1" alt="">
20	</div>
21	<div id="screen"></div>
22	<script>
23		(new imgGallery({name : "gallery_1",screenId : "screen"}));
24	</script>
25</body>
26</html>

投稿2015/07/17 05:50

Cf_cwd

総合スコア730

上記コードですと、どれをクリックしたかを取得できていないため、num[0]が真なので判定が他に移ることはないです。
ですので、下記のようにしてみてはいかがでしょうか？

<img src="img/img1.png" width="100" height="75" name="myImg"  onclick="changeImg(1)">
<img src="img/img2.png" width="100" height="75" name="myImg"  onclick="changeImg(2)">
<img src="img/img3.png" width="100" height="75" name="myImg"  onclick="changeImg(3)">
<div id = "screen"></div>
<script>
function changeImg(num){
    var screen = document.getElementById('screen');
    if(num == 1){
        screen.innerHTML = "<img src='img/img1.png'>";
    } else if(num == 2) {
        screen.innerHTML = "<img src='img/img2.png'>";
    } else {
        screen.innerHTML = "<img src='img/img3.png'>";
    }
}

changeImg関数の引数に画像の番号を入れて、その値で判定するという方法です。

投稿2015/07/16 23:21

kiri

総合スコア74

Yoshinori

2015/07/16 23:31

ご回答ありがとうございます教えていただいたコードを入力してみたのですが今度はすべて「img3.png」になってしまいます・・・。

kiri

2015/07/16 23:38

コードをそのまま上書きして動かなかったということでしょうか？そうでない場合、書き直したコードを再度見せていただければと思います。

Yoshinori

2015/07/16 23:42

書き直したコードです <!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <img src="img/img1.png" width="100" height="75" name="myImg" onclick="changeImg()"> <img src="img/img2.png" width="100" height="75" name="myImg" onclick="changeImg()"> <img src="img/img3.png" width="100" height="75" name="myImg" onclick="changeImg()"> <div id = "screen"></div> <script> function changeImg(num){ var screen = document.getElementById('screen'); if(num == 1){ screen.innerHTML = "<img src='img/img1.png'>"; } else if(num == 2) { screen.innerHTML = "<img src='img/img2.png'>"; } else { screen.innerHTML = "<img src='img/img3.png'>"; } } </script> </body> </html>

kiri

2015/07/16 23:44

説明不足でしたね、すみません。 onclick="changeImg()" ↓ onclick="changeImg(1)" という風にそれぞれの画像の数字を changeImgの中に入れてください。

行動規範の内容に同意します

あなたの回答