Question

我有一个我在模态中使用的图像缩放器。 zoomer插件使用document.getElementById打开图像，但我需要它来打开多个图像。

我已经阅读了很多帖子，说我需要使用其他选择器，例如

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

或类选择器

(document.getElementsByClassName("galley"));

我已尝试过这些但仍然无法打开具有多个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>

Answer 1

将所有图片置于1级，例如＆＃34;图像＆＃34;。然后做

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

您将获得包含所有图片的数组。如果你想用ids做这件事，那么给你的图像ID，如＆＃34; img1＆＃34;，＆＃34; img2＆＃34;，＆＃34; img3＆＃34;然后做

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

他的结果应该是一样的。

Answer 2

您的图像查看器脚本可能无法处理传递给它的多个元素。您必须为每个元素单独初始化它：

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

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

多个document.getElementById

2 个答案: