如何在同一页面的图库缩略图和特定幻灯片图像之间切换? [英] How to toggle between gallery-thumbnails and a specific slideshow-image on the same page?

查看：98
本文介绍了如何在同一页面的图库缩略图和特定幻灯片图像之间切换?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

这是我的第一个问题，但是我确实阅读了指南.希望您能以直接的答复欢迎我加入社区.

我正在一个不依赖JQuery的画廊网站上.我正在尝试在所有图片的缩略图视图和仅显示一张图片的幻灯片视图之间切换，即单击了缩略图的一张图片.另外，我希望缩略图视图和幻灯片视图是分开的，一个在另一个显示时不显示，但是我希望它们都在同一页面上，也就是说，不要有两个单独的页面其中的一个，我不想使用弹出式窗口进行切换.此外，当我单击幻灯片查看图片时，我想切换回缩略图视图，并且单击图片周围的上一面和下一面/按钮时，还要在上一张和下一张图片之间切换.我想要的实现这一目标的一个例子是Milo:

https://madebyminimal.com/demo/milo/

我昨天大部分时间都在尝试Javascript中的许多功能，尝试使用不透明性，可见性和显示CSS功能，但是无论我做什么，我单击的缩略图的特定图片都不会显示，好像Javascript不会通过修改幻灯片显示的可见/不透明/显示范围中的任何内容来响应我单击缩略图的可见/不透明/显示范围中的任何内容.

下面是我的代码，包括我尝试过的一些功能变体，这些变体在实验性Javascript"部分下进行了标记.直到该部分为止的所有代码都运行良好.我不明白为什么实验性"代码不起作用.它是否与其他功能冲突，或者被其他功能覆盖?如果是这样，我应该如何修改它以使其完成我想要的所有工作?

HTML:

   <span class="wrapper-focuser" id="slideshow">
        <span class="scrolling-wrapper">
            <span class="prev-card" onclick="plusDivs(-1)">
            </span>
            <span class="next-card" onclick="plusDivs(+1)">
            </span>
            <span class="all-cards" onclick="allDivs()">
            </span>
            <div id="images">
                <div class="card slide one">
                      <img class="picture" onclick="allDivs()" src="img/Picture1.jpg" alt="">
                </div>
                <div class="card slide two" onclick="allDivs()">
                      <img class="picture" src="img/Picture2.jpg" alt="">
                </div>
                <div class="card slide three">
                      <img class="picture" onclick="allDivs()" src="img/Picture3.jpg" alt="">
                </div>
            </div>
        </span>
    </span>
    <span class="thumbnails is-visible" id="gallery">
        <span class="scrolling-wrapper">
          <div id="small">
            <img class="thumbnail" onclick="allDivs(); plusDivs(+0); divDisp(1);" src="img/Picture1.jpg" alt="">
            <img class="thumbnail" onclick="allDivs(); plusDivs(+1); divDisp(2);" src="img/Picture2.jpg" alt="">
            <img class="thumbnail" onclick="allDivs(); plusDivs(+2); divDisp(3);" src="img/Picture3.jpg" alt="">
          </div>
        </span>
    </span>

CSS:

.wrapper-focuser {
    position: absolute;
    height: 600px;
    width: 1000px;
    display: inline-block;
    opacity: 0;
}


.scrolling-wrapper {
  height: 600px;
  width: 1000px;
  float: left;
  display: inline-block; 
  position: relative;
  overflow: hidden;
  text-align: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 20px;
}

.no-cursor {
    cursor: none;
}

.card { 
  height: auto; 
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.card:hover {
    cursor: url("/img/all.png"), auto;
}

.prev-card {
    width: 400px;
    float: left;
    height: auto;
    display: block;
    min-height: 600px;
    min-width: 400px;
}

.prev-card:hover {
    cursor: url("/img/prev.png"), auto;
}

.next-card {
    width: 400px;
    display: inline;
    float: right;
    height: auto;
    display: block;
    min-height: 600px;
    min-width: 400px;
}

.next-card:hover {
    cursor: url("/img/next.png"), auto;
    opacity: 0.4;
}

.all-cards {
    width: 200px;
    position: relative;
    height: auto;
    display: inline-block;
    min-height: 600px;
    min-width: 200px;
}

.all-cards:hover {
    cursor: url("/img/all.png"), auto;
}

.thumbnails {
    position: absolute;
    height: 600px;
    width: 1000px;
    display: inline-block;
    visibility: hidden;
}

.thumbnail {
    padding: 10px; 
    width: auto;
    margin: 10px;
    height: 200px;
}

.thumbnail:hover {
    opacity: 0.4;
    cursor: pointer;
}

.picture {
    position: relative;
}

.is-discernable {
        opacity: 1;
    }

.is-visible {
        visibility: visible;
    }

JavaScript:

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slide");
    var y = document.getElementsByClassName("picture");
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
        x[i].style.opacity = "0";
        y[i].style.opacity = "0";
    }
    x[slideIndex-1].style.opacity = "1";
    y[slideIndex-1].style.opacity = "1"; 
}


function allDivs() {
    var x = document.getElementById("slideshow");
    var y = document.getElementById("gallery");
    var z = document.getElementsByClassName("scrolling-wrapper");
    if (window.getComputedStyle(x).display === "none") {
        x.classList.toggle('is-discernable');
        y.classList.toggle('is-visible');
        z.classList.toggle('no-cursor');
    } else {
        x.classList.toggle('is-discernable');
        y.classList.toggle('is-visible');
        z.classList.toggle('no-cursor');
    }
}

实验性Javascript:

var pictureIndex = 1;
transpireDivs(pictureIndex);

function divDisp(n) {
    transpireDivs(pictureIndex += n);
}

function transpireDivs(n) {
    var x = n;
    var k = document.getElementsByClassName("one");
    var l = document.getElementsByClassName("two");
    var m = document.getElementsByClassName("three");
    if (x == 1) {
        k.classList.toggle('is-discernable');
    } else if (x == 2) {
        l.classList.toggle('is-discernable');
    } else if (x == 3) {
        m.classList.toggle('is-discernable');
    }    
}

我尝试了许多其他功能，但没有一个起作用.就像包装程序和图库div之间的连接被某种方式短路了一样，或者就像任何新功能都被我已经写过的新功能所覆盖.我想了解为什么会这样，以及一些替代解决方案，例如为通过单击事件链接的两个div创建两个页面，或以其他方式构造幻灯片.

感谢大家对这段相当长的代码的关注，希望我的问题对其他可能遇到类似问题的人有所帮助！

解决方案

我似乎已经解决了浏览器控制台中的代码错误，从而解决了您的问题.

  1. 我添加了一个侦听器，该侦听器仅在浏览器完成页面加载后才执行showDivs(slideIndex).否则，在第一次调用时x和y将为空，这将导致x[slideIndex-1]不存在.

  2. z.classList.toggle('no-cursor');给出了错误，因为z是元素列表，而不是元素.

    您需要遍历元素:for (let i = 0; i < z.length; i++) {z[i].classList.toggle('no-cursor');}

  3. 这没有给出错误，但是将showDivs(slideIndex += n);更改为showDivs(slideIndex = n)可以确保显示正确的幻灯片.

这是替换的画廊:

 <span class="thumbnails is-visible" id="gallery">
        <span class="scrolling-wrapper">
          <div id="small">
            <img class="thumbnail" onclick="showDivFix(1);" src="img/Picture1.jpg" alt="">
            <img class="thumbnail" onclick="showDivFix(2);" src="img/Picture2.jpg" alt="">
            <img class="thumbnail" onclick="showDivFix(3);" src="img/Picture3.jpg" alt="">
          </div>
        </span>
    </span>

和代码:

var slideIndex = 1;

document.addEventListener("DOMContentLoaded", function(event) { 
    showDivs(slideIndex);
});

function showDivFix(n) {
    allDivs();
    plusDivs(n);
    //divDisp(n);
}

function plusDivs(n) {
    showDivs(slideIndex = n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slide");
    var y = document.getElementsByClassName("picture");
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
        x[i].style.opacity = "0";
        y[i].style.opacity = "0";
    }
    x[slideIndex-1].style.opacity = "1";
    y[slideIndex-1].style.opacity = "1"; 
}


function allDivs() {
    var x = document.getElementById("slideshow");
    var y = document.getElementById("gallery");
    var z = document.getElementsByClassName("scrolling-wrapper");
    x.classList.toggle('is-discernable');
    y.classList.toggle('is-visible');
    for (let i = 0; i < z.length; i++) {
        z[i].classList.toggle('no-cursor');
    }
}

祝你画廊/滑板好运！

This is my first question, but I did read the guidelines. I hope you'll welcome me to the community with a straight answer.

I'm working on a gallery-website where JQuery is not a dependency. I'm trying to switch between a thumbnails-view of all pictures and a slideshow-view showing only one picture, namely, the one picture whose thumbnail I clicked on. Also, I want the thumbnails-view and the slideshow-view to be separate, one to not show when the other does, but I want to have them both on the same page, that is, not to have two separate pages one for each of them, and I don't want to use pop-ups for the switch. Furthermore, I want to switch back to thumbnails-view when clicking on the slideshow-view picture, and also, to switch between previous and next picture when clicking on the previous and next sides/buttons surrounding the picture. One example where this is achieved as I want it is in Milo:

https://madebyminimal.com/demo/milo/

I spent most of yesterday trying out a lot of functions in Javascript, playing around with the opacity, visibility and display CSS features, but whatever I do, the specific picture whose thumbnail I clicked on does not show, and it seems like Javascript does not respond to my clicking anything in the thumbnails visible/opaque/displayed span by modifying anything in the slideshow visible/opaque/displayed span.

Below is my code, including some of the function variants I tried, which are marked under the section Experimental Javascript. All the code until that section works well. I don't understand why the "experimental" code doesn't work, though. Does it conflict with the other functions, or is it over-ridden by them? If so, how should I modify it to get it to do all I want it to?

HTML: 

   <span class="wrapper-focuser" id="slideshow">
        <span class="scrolling-wrapper">
            <span class="prev-card" onclick="plusDivs(-1)">
            </span>
            <span class="next-card" onclick="plusDivs(+1)">
            </span>
            <span class="all-cards" onclick="allDivs()">
            </span>
            <div id="images">
                <div class="card slide one">
                      <img class="picture" onclick="allDivs()" src="img/Picture1.jpg" alt="">
                </div>
                <div class="card slide two" onclick="allDivs()">
                      <img class="picture" src="img/Picture2.jpg" alt="">
                </div>
                <div class="card slide three">
                      <img class="picture" onclick="allDivs()" src="img/Picture3.jpg" alt="">
                </div>
            </div>
        </span>
    </span>
    <span class="thumbnails is-visible" id="gallery">
        <span class="scrolling-wrapper">
          <div id="small">
            <img class="thumbnail" onclick="allDivs(); plusDivs(+0); divDisp(1);" src="img/Picture1.jpg" alt="">
            <img class="thumbnail" onclick="allDivs(); plusDivs(+1); divDisp(2);" src="img/Picture2.jpg" alt="">
            <img class="thumbnail" onclick="allDivs(); plusDivs(+2); divDisp(3);" src="img/Picture3.jpg" alt="">
          </div>
        </span>
    </span>

CSS:

.wrapper-focuser {
    position: absolute;
    height: 600px;
    width: 1000px;
    display: inline-block;
    opacity: 0;
}


.scrolling-wrapper {
  height: 600px;
  width: 1000px;
  float: left;
  display: inline-block; 
  position: relative;
  overflow: hidden;
  text-align: center;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 20px;
}

.no-cursor {
    cursor: none;
}

.card { 
  height: auto; 
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.card:hover {
    cursor: url("/img/all.png"), auto;
}

.prev-card {
    width: 400px;
    float: left;
    height: auto;
    display: block;
    min-height: 600px;
    min-width: 400px;
}

.prev-card:hover {
    cursor: url("/img/prev.png"), auto;
}

.next-card {
    width: 400px;
    display: inline;
    float: right;
    height: auto;
    display: block;
    min-height: 600px;
    min-width: 400px;
}

.next-card:hover {
    cursor: url("/img/next.png"), auto;
    opacity: 0.4;
}

.all-cards {
    width: 200px;
    position: relative;
    height: auto;
    display: inline-block;
    min-height: 600px;
    min-width: 200px;
}

.all-cards:hover {
    cursor: url("/img/all.png"), auto;
}

.thumbnails {
    position: absolute;
    height: 600px;
    width: 1000px;
    display: inline-block;
    visibility: hidden;
}

.thumbnail {
    padding: 10px; 
    width: auto;
    margin: 10px;
    height: 200px;
}

.thumbnail:hover {
    opacity: 0.4;
    cursor: pointer;
}

.picture {
    position: relative;
}

.is-discernable {
        opacity: 1;
    }

.is-visible {
        visibility: visible;
    }

Javascript:

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
    showDivs(slideIndex += n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slide");
    var y = document.getElementsByClassName("picture");
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
        x[i].style.opacity = "0";
        y[i].style.opacity = "0";
    }
    x[slideIndex-1].style.opacity = "1";
    y[slideIndex-1].style.opacity = "1"; 
}


function allDivs() {
    var x = document.getElementById("slideshow");
    var y = document.getElementById("gallery");
    var z = document.getElementsByClassName("scrolling-wrapper");
    if (window.getComputedStyle(x).display === "none") {
        x.classList.toggle('is-discernable');
        y.classList.toggle('is-visible');
        z.classList.toggle('no-cursor');
    } else {
        x.classList.toggle('is-discernable');
        y.classList.toggle('is-visible');
        z.classList.toggle('no-cursor');
    }
}

Experimental Javascript:

var pictureIndex = 1;
transpireDivs(pictureIndex);

function divDisp(n) {
    transpireDivs(pictureIndex += n);
}

function transpireDivs(n) {
    var x = n;
    var k = document.getElementsByClassName("one");
    var l = document.getElementsByClassName("two");
    var m = document.getElementsByClassName("three");
    if (x == 1) {
        k.classList.toggle('is-discernable');
    } else if (x == 2) {
        l.classList.toggle('is-discernable');
    } else if (x == 3) {
        m.classList.toggle('is-discernable');
    }    
}

I tried many other functions, and none of them worked. It's like the connexion between the wrapper and the gallery divs is short-circuited somehow, or like any new functions are over-ridden by one that I already wrote. I want to understand why that is, and some alternative solutions, such as creating two pages for the two divs that are linked by click-events, or structuring the slideshow in a different way.

Thank you all for your attention on this rather long code, and I hope my question helps others who may have a similar problem!

解决方案

I seem to have solved your problem by resolving the errors the code gave in the browser console.

  1. I added a listener that only executes showDivs(slideIndex) when the browser is done loading the page. Otherwise x and y will be empty at the first call, which makes that x[slideIndex-1] won't exist.

  2. z.classList.toggle('no-cursor'); gave an error because z is a list of elements, not an element.

    You need to loop over the elements: for (let i = 0; i < z.length; i++) {z[i].classList.toggle('no-cursor');}

  3. This did not give an error, but changing showDivs(slideIndex += n); to showDivs(slideIndex = n) makes sure the right slide gets shown.

This is the replaced gallery:

 <span class="thumbnails is-visible" id="gallery">
        <span class="scrolling-wrapper">
          <div id="small">
            <img class="thumbnail" onclick="showDivFix(1);" src="img/Picture1.jpg" alt="">
            <img class="thumbnail" onclick="showDivFix(2);" src="img/Picture2.jpg" alt="">
            <img class="thumbnail" onclick="showDivFix(3);" src="img/Picture3.jpg" alt="">
          </div>
        </span>
    </span>

And the code:

var slideIndex = 1;

document.addEventListener("DOMContentLoaded", function(event) { 
    showDivs(slideIndex);
});

function showDivFix(n) {
    allDivs();
    plusDivs(n);
    //divDisp(n);
}

function plusDivs(n) {
    showDivs(slideIndex = n);
}

function showDivs(n) {
    var i;
    var x = document.getElementsByClassName("slide");
    var y = document.getElementsByClassName("picture");
    if (n > x.length) {slideIndex = 1}
    if (n < 1) {slideIndex = x.length}
    for (i = 0; i < x.length; i++) {
        x[i].style.opacity = "0";
        y[i].style.opacity = "0";
    }
    x[slideIndex-1].style.opacity = "1";
    y[slideIndex-1].style.opacity = "1"; 
}


function allDivs() {
    var x = document.getElementById("slideshow");
    var y = document.getElementById("gallery");
    var z = document.getElementsByClassName("scrolling-wrapper");
    x.classList.toggle('is-discernable');
    y.classList.toggle('is-visible');
    for (let i = 0; i < z.length; i++) {
        z[i].classList.toggle('no-cursor');
    }
}

Good luck finishing your gallery/slider!

这篇关于如何在同一页面的图库缩略图和特定幻灯片图像之间切换?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆