複数のdocument.getElementById

私はモーダルで使用している画像のズーマーを持っています。 zoomerプラグインはdocument.getElementByIdを使用して画像を開きますが、複数の画像を開くにはその画像が必要です。複数のdocument.getElementById

私は、私はこれらを試してみましたが、まだそれを得ることができないように

(document.querySelectorAll("#galley1, #galley2, #galley3));

またはクラスセレクタ

(document.getElementsByClassName("galley"));

などの他のセレクタを使用する必要があると言うあなたの記事の多くを読みました画像IDを複数のIDで開くことができます。

divとセレクタで使用しているIDは、＃galley1、＃galley2、＃galley3です。

私のウェブサイトhttp://www.fitzgeraldoilworks.comでコード全体を見ることができます。ページの最初のイメージは完璧に動作しますが、残りのイメージはモーダルを拡大しません。

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 

<title>Photo Zoom</title> 


<link rel="stylesheet" type="text/css" href="css/lity.css"/> 
<link rel="stylesheet" type="text/css" href="css/viewer.css"/> 

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> 
<script type="text/javascript" src="js/lity.min.js"></script> 
<script type="text/javascript" src="js/viewer.js"></script> 

</head> 


<body> 

<div class="featured-body-wrap"> 
    <div class ="featured-image-container"> 


     <div class ="featured-image-holder"> 
      <div class="featured-title">KINGS CHOICE</div> 

     <div class ="featured-image-wrap"> 
      <a href="#kings" data-lity> <img src="images/art/thmb/kings choice320.jpg" 
      class="featured-image" style="width:100%;height:auto;border:0;"/></a> 
     </div> 
     </div> 

<div id="kings" class="lity-hide"> 
<div id="galley1"> 

      <div class="modal-img-container"> 

          <div class="modal-header">Kings Choice</div> 

       <div class="sized-box"> 
       <div class="model-img-wrap"><img class="model-img" 
       data-original="images/art/hires/kings choice1500.jpg" src="images/art/med/kings choice700.jpg" alt="SCROLL MOUSE TO ZOOM"/></div> 
       </div> 
       <div class="sized-box"> 
       <div class="model-img-wrap"><img class="model-img" 
       data-original="images/art/hires/kings choice wall1500.jpg" src="images/art/med/kings choice wall700.jpg" alt="SCROLL MOUSE TO ZOOM"/></div> 
       </div> 
       <div class="sized-box"> 
       <div class="model-img-wrap"><img class="model-img" 
       data-original="images/art/hires/kings choice head1400.jpg" src="images/art/med/kings choice head700.jpg" alt="SCROLL MOUSE TO ZOOM"/></div> 
       </div> 

      </div> 
</div> 
</div> 


     <div class ="featured-image-holder"> 
      <div class="featured-title">WISPER</div> 

     <div class ="featured-image-wrap"> 
      <a href="#wisper" data-lity> <img src="images/art/thmb/wisper thmb320.jpg" 
      class="featured-image" style="width:100%;height:auto;border:0;"/></a> 
     </div> 
     </div> 

<div id="wisper" class="lity-hide"> 
<div id="galley2"> 

      <div class="modal-img-container"> 

          <div class="modal-header">WISPER</div> 

       <div class="sized-box"> 
       <div class="model-img-wrap"><img class="model-img" 
       data-original="images/art/hires/wisper hires.jpg" src="images/art/med/wisper md.jpg" alt="SCROLL MOUSE TO ZOOM"/></div> 
       </div> 
       <div class="sized-box"> 
       <div class="model-img-wrap"><img class="model-img" 
       data-original="images/art/hires/wisper face hires.jpg" src="images/art/med/wisper face md.jpg" alt="SCROLL MOUSE TO ZOOM"/></div> 
       </div> 
       <div class="sized-box"> 
       <div class="model-img-wrap"><img class="model-img" 
       data-original="images/art/hires/wisper wall hires.jpg" src="images/art/med/wisper wall md.jpg" alt="SCROLL MOUSE TO ZOOM"/></div> 
       </div> 

      </div> 
</div> 
</div> 

     <div class ="featured-image-wrap"> 
      <a href="#shadow" data-lity> <img src="images/art/thmb/shadow thmb.jpg" 
      class="featured-image" style="width:100%;height:auto;border:0;"/></a> 
     </div> 
     </div> 

<div id="shadow" class="lity-hide"> 
<div id="galley3"> 

      <div class="modal-img-container"> 

          <div class="modal-header">SHADOW</div> 

       <div class="sized-box"> 
       <div class="model-img-wrap"><img class="model-img" 
       data-original="images/art/hires/shadow-hires.jpg" src="images/art/med/shadow-md.jpg" alt="SCROLL MOUSE TO ZOOM"/></div> 
       </div> 
       <div class="sized-box"> 
       <div class="model-img-wrap"><img class="model-img" 
       data-original="images/art/hires/shadow-easle-hires.jpg" src="images/art/med/shadow-easle-md.jpg" alt="SCROLL MOUSE TO ZOOM"/></div> 
       </div> 
       <div class="sized-box"> 
       <div class="model-img-wrap"><img class="model-img" 
       data-original="images/art/hires/shadow-wall-hires.jpg" src="images/art/med/shadow-wall-md.jpg" alt="SCROLL MOUSE TO ZOOM"/></div> 
       </div> 

      </div> 
</div> 
</div> 
</div> 




     <script type="text/javascript"> 

    window.addEventListener('DOMContentLoaded', function() { 
     var galley = (document.querySelectorAll("#galley1, #galley2, #galley3")); 
     var viewer = new Viewer(galley, { 
     url: 'data-original', 
     button: true, 
     navbar: false, 
     title: true, 
     toolbar: false, 
     tooltip: true, 
     movable: true, 
     zoomable: true, 
     scalable: true, 
     transition: true, 
     zoomRatio: 0.3, 
     minZoomRatio: 0.01, 
     maxZoomRatio: 100, 
     zIndex: 2015, 
     inline: false, 
     minWidth: 200, 
     minHeight: 100, 
     viewed: function() { 
var context = this; 
$('.viewer-canvas').click(function(e){ 
if(e.target.className == 'viewer-canvas') { 
context.viewer.hide(); 
} 
}); 
} 
     }); 
    }); 

      </script> 

</body> 
</html>

出典

2017-12-09 Michael Fitzgerald

「画像」など、すべての画像を1つのクラスに配置します。次へdo

var myImages = document.getElementsByClassName("images");

すべての画像を含む配列が表示されます。あなたは、IDSでこれを行うあなたのイメージに「IMG1」、「IMG2」、「IMG3」などのIDを与えたい場合はは、それから彼は結果

var myImages = []; 
for(var i = 0; i < numImages; i++) { 
    myImages.push(document.getElementById("img"+i)); 
}

が同じでなければなりません。

出典

2017-12-09 18:06:03

私の画像にはすでに "model-img"のクラスがあります。スクリプトをvar myImages = document.getElementsByClassName（ "model-img"）に変更しました。でもまだ動作しませんでした。 –

私はあなたのプラグインがズームするためにただ一つのイメージを取ると思う。したがって、配列から要素を渡すことができます。たとえばmyImages [0]（これが最初の要素です）。 –

はい私はあなたが正しいと思いますが、これを実装する方法がわからず、これを行う方法を理解するための例が必要ですが、私はあなたの助けに感謝してありがとうございます...！ –

あなたの画像ビューアスクリプトは、おそらく複数の要素を渡すことはありません。

var $elements = document.querySelectorAll('...'); 

for (var i = 0; i < $elements.length; i++) { 
    var viewer = new Viewer($elements[i], {...}); 
}

出典

2017-12-09 18:12:27 Blender

私はこれを試してみたいと思いますが、スクリプトにこれを追加する方法がわかりません。私は例を持っていればいいと思う。 –

また、私はあなたが正しいと思います。私はviewerJSと呼ばれるプラグインを使用しています。そこには、このビューアがモーダルで使用され、コードを提供できることが示されています。スクリプトに実装する方法はわかりません。申し訳ありませんが、私は非常にjavascriptで良いです。ここには文書ページのコードがあります。それはあなたのものに非常にsimularです。 varビューア。 image.addEventListener（ 'viewed'、function（）{ console.log（this.viewer === viewer）; // - > true }、false）; ビューア=新しいビューア（画像）; –

@MichaelFitzgerald：あなたが何を意味するか分からない、私はちょうど入力するには長すぎる部分の代わりに楕円を追加しました。あなたのコードに含まれている実際の値で置き換えるとうまくいくはずです。 – Blender

複数のdocument.getElementById

答えて

関連する問題