addEventListener到图像数组 - 无限滚动图库中的模态

时间:2017-04-14 04:13:27

标签: javascript twitter-bootstrap modal-dialog gallery infinite-scroll

我想在"无限"中添加一个模态。滚动图片库我试图创建,这样当您点击每个图像时,模式会弹出链接到各自的源。我也试图纯粹通过我的javascript生成我的图像,而不包括HTML文档本身中的图像的任何标记。我尝试过两个" files [i] .addEventListener "和" img.addEventListener " (将其添加到具有 " .myImg" 类的所有图像)但是我在控制台中的文件[i]中出现此错误只能使用img变量才能使第一张图像工作,之后没有图像。

" 未捕获TypeError:files [i] .addEventListener不是函数     在XMLHttpRequest.putImages(main.js:32) "

有人可以帮我解决这个问题吗?真的很感激!

注意:我试图在没有jquery的情况下尝试这样做,如果可能的话。

JAVASCRIPT

// INFINITE SCROLL

// height of initial gallery, the original 13 images
var contentHeight = 600;
// height of visible page in browser
var pageHeight = document.documentElement.clientHeight;
// scrollbar position
var scrollPosition;
// next image
var n = 14;
// ajax
var ajaxCall = new XMLHttpRequest();

function putImages(){

if (ajaxCall.readyState==4)
  {
      if(ajaxCall.responseText){
            // to separate the file names, with semicolons
         var files = ajaxCall.responseText.split(";");
         // check if string isn't empty and add a thumbnail
          for(var i=0; i<files.length; i++){
              if(files[i] != ""){
                 document.getElementById("gallery").innerHTML += '<img class="myImg" src="/img/'+files[i]+'" width="198" height="198"/>';

                 // Get the modal
                 var modal = document.querySelector('.modal');

                 // Get the image and insert it inside the modal - use its "alt" text as a caption
                 var img = document.querySelector('.myImg');
                 var modalImg = document.querySelector(".modalContent");
                 img.addEventListener('click', function() {
                     modal.style.display = "block";
                     modalImg.src = this.src;
                 })

                 // Get the <span> element that closes the modal
                 var span = document.querySelector(".close")[0];
              }
          }
      }
  }
}

//SCROLL

function scroll(){

if(navigator.appName == "")
    scrollPosition = document.documentElement.scrollTop;
else
    scrollPosition = window.pageYOffset;

if((contentHeight - pageHeight - scrollPosition) < 600){
// reference to the php file
    var url="getImages.php?n="+n;
// send ajax request
    ajaxCall.open("GET",url,true);
    ajaxCall.send();
// put the images on the page
    n += 13;
    ajaxCall.onreadystatechange=putImages;
    contentHeight += 600;
}
}

HTML

    <!-- Header -->
<div class ="container">
  <div class = "row">
    <div class="col-md-12 header">
      <h1>Image Gallery</h1>
    </div>
  </div>
</div>

<!-- The Modal -->
<div class="modal">

  <!-- The Close Button -->
  <span class="close" onclick="document.querySelector('.modal').style.display='none'">&times;</span>

  <!-- Modal Content (The Image) -->
  <img class="modalContent">

</div>

<div class="container">
  <!-- Image Gallery -->
  <div class="row">
    <div class="col-xs-12" id="gallery">

    </div>
  </div>

  <hr>
</div>

PHP

<?php
/* get directory for thumbnail images */
$dir = "img";
/* check if directory exists */
if(is_dir($dir)){
    /* open directory if directory exists */
    if($dd = opendir($dir)){
        while (($f = readdir($dd)) !== false)
            if($f != "." && $f != "..")
                $files[] = $f;
        closedir($dd);
    }

/* to create infinite effect, b/c of lack of infinite images cycle must restart */
$n = $_GET["n"];
$response = "";
    for($i = $n; $i<$n+13; $i++){
        $response = $response.$files[$i%count($files)].';';
    }
    echo $response;
}
?>

1 个答案:

答案 0 :(得分:0)

我认为你的问题是因为当它附加到文件[i]时,这不是你的DOM的一部分,它是你图像的src位置的文本。所以它无法附着在那里。 img只会返回第一个,因为你并没有循环遍历所有这些。因此,您需要将事件侦听器实际添加到<img>。 您可以在添加时为每个img添加一个ID: document.getElementById("gallery").innerHTML += '<img class="myImg" src="/img/'+files[i]+'" width="198" height="198" id="file'+i+'" />'; 然后添加侦听器,如: var img = document.getElementById("file"+i); img.addEventListener()