如何将部分数组传递给左右画廊按钮？

Question

This code works and creates a modal with a single image in it depending upon which thumbnail is clicked.此代码工作并根据单击的缩略图创建一个包含单个图像的模式。

I trim away "./thumbnails/tn" and replace it with./mypix/ to show the high res image in the modal.我修剪掉“./thumbnails/tn”并将其替换为 ./mypix/ 以在模态中显示高分辨率图像。 (Thumbnails are in a different directory with a name prefix of tn). （缩略图位于名称前缀为 tn 的不同目录中）。

The 500 images have ID myImg1.... to myImg500.这 500 张图像的 ID 为 myImg1.... 到 myImg500。 But I don't want to include myImg51, myImg52, myImg53, and a few others.但我不想包括 myImg51、myImg52、myImg53 和其他一些。

How do I pass the array of images to Java and add left and right buttons to my code?如何将图像数组传递给 Java 并将左右按钮添加到我的代码中？ I would like the user to be able to browse through the images.我希望用户能够浏览图像。 I don't want thumbnails on the image page as I want to maximize the view of the photograph.我不想在图像页面上显示缩略图，因为我想最大化照片的视图。

And I would like it to wrap so the last image right button shows the first image.我希望它能够换行，以便最后一个图像右侧按钮显示第一张图像。

<style>
body {font-family: Arial, Helvetica, sans-serif;}

.myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
}

.myImg:hover {opacity: 0.7;}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 0px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 1500px;
}

.modal-content {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

.close {
  position: absolute;
  top: 20px;
  right: 300px;
  color: #f1f1f1;
  font-size: 50px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
    max-width: 700px;
  }
}
</style>
</head>
<body>
<img class="myImg" id="myImg1" src="./thumbnails/tnPIC012386.jpg" style="width:100%;max-width:300px" onclick="myFunctionElt(this);"><br>
<img class="myImg" id="myImg2" src="./thumbnails/tnPIC012436.jpg" style="width:100%;max-width:300px" onclick="myFunctionElt(this);"><br>
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
</div>

<script>
function myFunctionElt (elt) {
        var span = document.getElementsByClassName("close")[0];
            span.onclick = function() { 
            modal.style.display = "none";
        }
    var strID = document.getElementById(elt.id);
    var modal = document.getElementById("myModal");
    var modalImg = document.getElementById("img01");
    modal.style.display = "block";
    var str = strID.src;
    var str1 = "./mypix/";
    var str2 = str.substr(str.length - 13);
    var res = str1.concat(str2);
    modalImg.src = res;
}
</script>

Answer 1

First, lets talk about getting your full set of image attributes into a data structure.首先，让我们谈谈将您的全套图像属性放入数据结构中。 I'm going to recommend using an object instead of any array.我将推荐使用 object 而不是任何数组。 Mainly because we'll have some more flexibility in how to access it.主要是因为我们在如何访问它方面会有更多的灵活性。

var images = {};

function populateImages(){
    // do stuff here to retrieve all your data about your set of images...
    // here's how to load each image into the images object... 
    var image = {
        CLASS: "myImg",
        ID: "myImg1",
        SRC: "./thumbnails/tnPIC012386.jpg",
        STYLE: "width:100%;max-width:300px",
        ONCLICK: "myFunctionElt(this);"
    };
    images[image.ID] = image;
}

populateImages();

Obviously the code above currently only puts a single image into the images object... its for demo purposes only... you'll need to make your calls to get the info about each image and/or hardcode all the image insertion there.显然，上面的代码目前仅将单个图像放入图像 object ......它仅用于演示目的......您需要拨打电话以获取有关每个图像的信息和/或硬编码所有图像插入那里。 The important part is that the set of property keys inside of the images object will be the image ids.重要的部分是图像 object 中的一组属性键将是图像 ID。

Assuming you get the images all loaded into the images object then you can have an array of image ids for which you don't want to display thumbnails and you can use the array.filter function to output a set of all image IDs that aren't in your excluded array假设您将图像全部加载到图像 object 中，那么您可以拥有一个您不想显示缩略图的图像 ID 数组，您可以使用 array.filter function 到 Z78E6221F6393D1356DZ1 的所有图像 IDs1 的集合t 在您的排除数组中

var excludedIDArray = [];
function populateExcludedIDs(){
    // do stuff to populate the array with the
    // set of id's for which you don't want thumbnails displayed
    excludedIDArray.push('myImg51');
    excludedIDArray.push('myImg52');
    excludedIDArray.push('myImgWhatever');
}

populateExcludedIDs();
var imageIDArray = Object.keys(images);
var thumbnailArray = imageIDArray.filter(id => !excludedIDArray.includes(id));

thumbnailArray is now the list of all image IDs that aren't excluded thumbnailArray 现在是未排除的所有图像 ID 的列表

right now you have your thumbnails hanging out as child elements of body directly... let's move them into a div so we can use script to populate all those elements more cleanly现在你的缩略图直接作为 body 的子元素挂出来......让我们将它们移动到一个 div 中，这样我们就可以使用脚本更干净地填充所有这些元素

<body>
    <div id="thumbsList">
        <img class="myImg" id="myImg1" src="./thumbnails/tnPIC012386.jpg" style="width:100%;max-width:300px" onclick="myFunctionElt(this);"><br>
        <img class="myImg" id="myImg2" src="./thumbnails/tnPIC012436.jpg" style="width:100%;max-width:300px" onclick="myFunctionElt(this);"><br>
    </div>

Now we do a function to fill up that div with whatever is in your thumbnailArray现在我们做一个 function 用你 thumbnailArray 中的任何内容填充那个 div

function populateThumbnails(){
    var container = document.getElementByID("thumbsList");
    container.innerHTML = '';
    for(var index = 0; index < thumbnailArray.length; index++){
        var image = images[thumbnailArray[index]];
        var imageElement = document.createElement("IMG");
        for (var key in Object.keys(image)) {
            imageElement.setAttribute(key, image[key]);
        }
        container.appendChild(imageElement);
    }
}

populateThumbnails();

Because of the way we stored each image in the images object... basically each property of the images object is itself an object whose properties are the individual attributes of the resultant image tags that will be used in the HTML... we use the elements of the thumbnailsArray to find the image object within images... and then we create new img tag and loop through all the properties of the image object using each key:value pair to set the new img tag's attributes. Because of the way we stored each image in the images object... basically each property of the images object is itself an object whose properties are the individual attributes of the resultant image tags that will be used in the HTML... we use the thumbnailsArray 的元素以在图像中查找图像 object... 然后我们创建新的 img 标签并使用每个键值对循环遍历图像 object 的所有属性以设置新的 img 标签的属性。 Then we just add the new img tag as a child of the thumbsList div.然后我们只需添加新的 img 标签作为 thumbsList div 的子元素。

Now, all of your thumbs should be showing up and you can open your modal with any of them...现在，你所有的拇指都应该出现了，你可以用它们中的任何一个打开你的模态......

Before we tackle the left and right buttons,lets change up the way we call myFunctionElt... rather than passing in the full (this) from the img tags, let's just pass in (this.id):在我们处理左右按钮之前，让我们改变调用 myFunctionElt 的方式...而不是从 img 标签中传入完整的 (this)，让我们传入 (this.id)：

<img class="myImg" id="myImg1" src="./thumbnails/tnPIC012386.jpg" style="width:100%;max-width:300px" onclick="myFunctionElt(this.id);">

Now, let's adjust MyFunctionElt to handle the fact that its only getting the ID and then add the setting of the current image index现在，让我们调整 MyFunctionElt 以处理它只获取 ID 的事实，然后添加当前图像索引的设置

// create a variable to hold the index within thumbnailArray
// of the selected image
var modalImageIndex = 0;

function myFunctionElt (eltID) {
    // set modalImageIndex
    modalImageIndex = thumbnailArray.indexOf(eltID);

    var span = document.getElementsByClassName("close")[0];
    span.onclick = function() { 
        modal.style.display = "none";
    }
    var strID = document.getElementById(eltID);
    var modal = document.getElementById("myModal");
    var modalImg = document.getElementById("img01");
    modal.style.display = "block";
    var str = strID.src;
    var str1 = "./mypix/";
    var str2 = str.substr(str.length - 13);
    var res = str1.concat(str2);
    modalImg.src = res;
}

Now we should be all set to go for the last little bit... lets add buttons to your modal template for left and right.现在我们应该都设置为 go 最后一点......让我们为您的模态模板添加左右按钮。 You'll obviously want to style them however you want, what I have here will be plain and not aligned very visually pleasing.显然，你会想要为它们设计任何你想要的样式，我在这里所拥有的将是简单的，并且不会在视觉上非常令人愉悦。

<div id="myModal" class="modal">
  <button id="shiftLeft" onclick="shiftImage('PREVIOUS')">Previous</button>
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <button id="shiftRight" onclick="shiftImage('NEXT')">Next</button>
</div>

So, we have 2 buttons, Previous and Next... they both call a function called shiftImage() and pass in a text string... so lets define that function所以，我们有 2 个按钮，Previous 和 Next……它们都调用了一个名为 shiftImage() 的 function 并传入一个文本字符串……所以让我们定义 function

function shiftImage(direction){
    switch(direction){
        case 'PREVIOUS':
            if(modalImageIndex == 0){
              modalImageIndex = thumbnailArray.length;
            }
            modalImageIndex--;
            break;
        case 'NEXT':
            modalImageIndex++;
            modalImageIndex = modalImageIndex % thumbnailArray.length;
            break;
        default:
            break;
    }
    myFunctionElt(thumbnailArray[modalImageIndex]);
}

So in the shiftImage function, we either increment or decrement modalImageIndex value.因此，在 shiftImage function 中，我们增加或减少 modalImageIndex 值。 If the result is less than 0 then we set it to be the end of the thumbnailArray.. To handle the end case, we use the modulus operator to cycle it back to the beginning.如果结果小于 0，那么我们将其设置为 thumbnailArray 的结尾。为了处理结束情况，我们使用取模运算符将其循环回到开头。 Once we update the modalImageIndex value, then we call your myFunctionElt function and pass in the imageID of the newly indexed value in thumbnailArray.一旦我们更新了 modalImageIndex 值，我们就会调用您的 myFunctionElt function 并在 thumbnailArray 中传入新索引值的 imageID。

At this point you should have all the moving pieces... it'll just be up to you to arrange them in your code appropriately, make adjustments to styling, and actually add the code to populate the images object and excludedIDArray此时，您应该拥有所有可移动的部分......您可以在代码中适当地安排它们，调整样式，并实际添加代码以填充图像 object 和 excludeIDArray

Typically questions of this nature are too broad for asking on stackOverflow... but I was bored this morning lol... cheers!通常这种性质的问题太宽泛了，无法在 stackOverflow 上提问……但今天早上我很无聊，哈哈……干杯！

如何将部分数组传递给左右画廊按钮？

问题描述

1 个解决方案

解决方案1
0 2020-07-06 16:02:14

如何将部分数组传递给左右画廊按钮？

问题描述

1 个解决方案

解决方案1 0 2020-07-06 16:02:14

解决方案1
0 2020-07-06 16:02:14