質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.04%

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

解決済

回答 5

投稿

  • 評価
  • クリップ 0
  • VIEW 2,124

score 35

現在JSでギャラリー的なものを作ろうとしています
仕様としては
画面上段に画像(原寸より小さいもの)を表示し、クリックされると下にその画像の原寸大が表示されるというものです
ですが以下のコードだとクリックしてもすべて「img1.png」しか表示されません。なぜなのでしょうか?
<!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(){
    var num = document.getElementsByName('myImg');
    if(num[0]){
      var screen = document.getElementById('screen');
      screen.innerHTML = "<img src='img/img1.png'>";
    } else if(num[1]) {
      var screen = document.getElementById('screen');
      screen.innerHTML = "<img src='img/img2.png'>";
    } else {
        var screen = document.getElementById('screen');
        screen.innerHTML = "<img src='img/img3.png'>";
    }
  }

  </script>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

checkベストアンサー

+1

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
 <img src="img/img1.png" width="100" height="75" name="myImg" onclick="changeImg(this.src)">
 <img src="img/img2.png" width="100" height="75" name="myImg" onclick="changeImg(this.src)">
 <img src="img/img3.png" width="100" height="75" name="myImg" onclick="changeImg(this.src)">
 <div id = "screen"></div>
 <script>
 function changeImg(src) {
     document.getElementById('screen').innerHTML = '<img src="' + src + '">';
 }
 </script>
</body>
</html>
これでいかがでしょうか?

ただし、私なら以下のように書きます。
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
 <img src="img/img1.png" width="100" height="75" name="myImg">
 <img src="img/img2.png" width="100" height="75" name="myImg">
 <img src="img/img3.png" width="100" height="75" name="myImg">
 <div id = "screen"></div>
 <script>
 (function(window,document){
     var imgElms = document.getElementsByName('myImg');
     for (var i = 0; i < imgElms.length; i++) {
         imgElms[i].addEventListener('click',function(){clickImg(this.src);},false);
     }
     function clickImg(src) {
         var elm = document.getElementById('screen').childNodes[0];
         if (elm) {
             document.getElementById('screen').removeChild(elm);
         }
         var imgElm = document.createElement('img');
         imgElm.src = src;
         document.getElementById('screen').appendChild(imgElm);
     }
 })(window,document);
 </script>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/17 08:54

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

    キャンセル

  • 2015/07/17 09:00

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

    キャンセル

  • 2015/07/19 08:48

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

    キャンセル

+1

更に汎用性を持たせるなら、以下の様にします。
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
 <img src="img/img1.png" width="100" height="75" name="myImg">
 <img src="img/img2.png" width="100" height="75" name="myImg">
 <img src="img/img3.png" width="100" height="75" name="myImg">
 <div id = "screen"></div>
 <script>
  var galleryImg = {
    'srcImgName':'myImg'
    ,'dstImgId':'screen'
  };
 </script>
 <script src="galleryimg.js"></script>
</body>
</html>

galleryimg.js
(function(window,document,galleryImg){
    var srcImgName = galleryImg.srcImgName;
    var dstImgId = galleryImg.dstImgId;

    var imgElms = document.getElementsByName(srcImgName);
    for (var i = 0; i < imgElms.length; i++) {
        imgElms[i].addEventListener('click',function(){clickImg(this.src);},false);
    }
    function clickImg(src) {
        var elm = document.getElementById(dstImgId).childNodes[0];
        if (elm) {
            document.getElementById(dstImgId).removeChild(elm);
        }
        var imgElm = document.createElement('img');
        imgElm.src = src;
        document.getElementById(dstImgId).appendChild(imgElm);
}
})(window,document,galleryImg);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

以下のようにも書けます。
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
 <div id="galleryimg"></div>
 <script>
  var galleryImg = [
    'img/img1.png'
    ,'img/img2.png'
    ,'img/img3.png'
  ];
 </script>
 <script src="galleryimg2.js"></script>
</body>
</html>

galleryimg2.js
(function(window,document,galleryImg){
    var dstDiv;
    init();
    function init() {
        var srcDiv = document.createElement('div');
        dstDiv = document.createElement('div');
        document.getElementById('galleryimg').appendChild(srcDiv);
        document.getElementById('galleryimg').appendChild(dstDiv);
        for (var i = 0; i < galleryImg.length; i++) {
            var img = document.createElement('img');
            img.src = galleryImg[i];
            img.style.width = '100px';
            img.style.height = '75px';
            srcDiv.appendChild(img);
            img.addEventListener('click',function(){clickImg(this.src);},false);
        }
    }
    function clickImg(src) {
        var elm = dstDiv.childNodes[0];
        if (elm) {
            dstDiv.removeChild(elm);
        }
        var imgElm = document.createElement('img');
        imgElm.src = src;
        dstDiv.appendChild(imgElm);
    }
})(window,document,galleryImg);

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

上記コードですと、どれをクリックしたかを取得できていないため、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/17 08:31

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

    キャンセル

  • 2015/07/17 08:38

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

    キャンセル

  • 2015/07/17 08: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>

    キャンセル

  • 2015/07/17 08:44

    説明不足でしたね、すみません。
    onclick="changeImg()"

    onclick="changeImg(1)"
    という風にそれぞれの画像の数字を changeImgの中に入れてください。

    キャンセル

0

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

function imgGallery(_DetailObject){//name,screenId
  //最低限の引数チェック
  if(!_DetailObject){
    console.error("imgGallery : 引数が指定されていません");
    return;
  }
  
  //外部スコープ参照を省けるようにすることで多少処理速度が上がる事に期待できる
  var _document=document;
  
  //引数のObjectから各情報を取得
  var _galleryName=_DetailObject.name || "0";
  var _screenId=_DetailObject.screenId || "0";
  //引数のObjectから情報が取得できたかチェック
  if(_galleryName==="0" || _screenId==="0"){
    console.error("imgGallery : Objectの値が不正です");
    return;
  }
  
  //imgElements
  var _imgElems=_document.getElementsByName(_galleryName);
  var _imgLength=_imgElems.length;
  
  //screenElement
  var _screenElem=_document.getElementById(_screenId)
  
  //Attributeのsrcを取得する関数
  function get_src(_Elem){
    if(!_Elem){
      return;
    }
    return _Elem.getAttribute("src") || _Elem.src;
  };
  
  //eventメソッドのwrapper
  var addEvent=(window.addEventListener ?
      function (_Elem,_Type,_Func,_Capture){
        _Elem.addEventListener(_Type,_Func,_Capture);
      }
      :
      function (_Elem,_Type,_Func){
        _Elem.attachEvent("on"+_Type,_Func)
      }
  );

  function createImageElement(_Path){
    var _img=_document.createElement("img");
    _img.setAttribute("src",_Path);
    return _img;
  };
  
  //対象のelementに画像を挿入する。挿入済みならそのsrcを書き換える
  function showImage(_imgPath){
    var _imgElement=createImageElement(_imgPath);
    if(_screenElem.children[0]){
      _screenElem.children[0].setAttribute("src",_imgPath);
      return;
    }
    _screenElem.appendChild(_imgElement);
  };
  
  //eventの発生元であるelementを取得する
  function getEventTarget(_EventObject){
        return _EventObject.target || window.event.target;
    };
  
  //各画像にeventを設定する
  for(var i=_imgLength;i--;){
    addEvent(
      _imgElems[i],
      "click",
      function (e){
        var _target=getEventTarget(e);
        var _src=_target.getAttribute("src") || _target.src;
        showImage(_src);
      },
      false
    );
  }
};

使用するときは以下のようにします。
(new imgGallery({
  name : "images_name",//画像のグループにつけたname
  screenId : "screen"//画像の出力先
}));
今回の例では
(new imgGallery({
  name : "myImg",
  screenId : "screen"
}));
とすることで動作します。
条件としてscreenとする要素の中が空か画像である必要があります。
もしテキスト等をデフォルトで表示する場合は一度中身を空にするような処理を加える必要があります。
(その場合、srcを書き換える処理は必要なくなる。但し初回のみ初期化するようにすれば残す価値有り)

動作確認はFirefox39.0、Safari6.0.1で行いました。
以下はテストに使用したHTMLになります。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Gallery</title>
    <script type="text/javascript" src="gallery.js"></script>
</head>
<body>
    <style>
        #img_wrap img {
            width: 50px;
            height: 50px;
        }
    </style>
    <div id="img_wrap">
        <img src="http://dummyimage.com/300x300/000/fff&text=1" name="gallery_1" alt="">
        <img src="http://dummyimage.com/300x300/000/fff&text=2" name="gallery_1" alt="">
        <img src="http://dummyimage.com/300x300/000/fff&text=3" name="gallery_1" alt="">
        <img src="http://dummyimage.com/300x300/000/fff&text=4" name="gallery_1" alt="">
    </div>
    <div id="screen"></div>
    <script>
        (new imgGallery({name : "gallery_1",screenId : "screen"}));
    </script>
</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る