我想在"无限"中添加一个模态。滚动图片库我试图创建,这样当您点击每个图像时,模式会弹出链接到各自的源。我也试图纯粹通过我的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'">×</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;
}
?>
答案 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()