jquery - Photoswipe 问题 : How do i get multiple images in a gallery to scroll based on one thumbnail?

Question

我想要这样，如果用户点击一张图片，打开一个包含链接到该缩略图的多张图片的图库。

我不希望放大图片库链接到页面上可见的图片缩略图。

我不想在页面上显示五十个缩略图，因为我可以单击一张包含 5 张大图像的图像以滑动浏览，并为每张大图像添加标题。

我想要我的平面设计页面: http://elmo.cptc.edu/jeannaKawamoto/graphics.html页面看起来像我的网页设计页面:http://elmo.cptc.edu/jeannaKawamoto/gallery.html

我使用了 flexbox 并为每个缩略图分配了一个图库，每个“图库”中的图像组只使用一个缩略图。

因为它不是我有 8 个图像和 8 个图形缩略图，当我希望这些图像位于它们自己的画廊中时，将以一个缩略图打开以查看该组中的所有图像，如图形。

有没有办法用 photoswipe 做到这一点？

我必须使用 photoswipe 进行智能手机友好的滑动。我的图片页面无法正确响应智能手机。

我的网页设计 html 演示了我希望它的功能。你会看到我有一个缩略图和五张图片，它们引用同一个画廊，每个图片标签中的缩略图链接到相同的 rel="lightbox[mood]"。

情绪板缩略图有 8 张图像，仅链接到该缩略图 - 按 [mood] 分组。有没有一种方法可以使用 photoswipe 来实现同样的效果？

/* the sections that relate to images in my style sheet for html pages --not the ones that came with photoswipe. the files that came wtih photoswipe i havent altered code. My instructor may have but i have not so they should be same original downloaded files linked to graphics only on web page. */

/* -------------------------------------------------------------------------------------
                                    PAGE BODY OVERALL
-----------------------------------------------------------------------------------------*/

body {
  background-image: linear-gradient(#3f51b5, #61b4f6);
  color: #fff;
  font-family: 'Bowlby One SC', cursive;
  font-family: 'Atma', cursive;
}
#wrapper {
  margin-right: auto;
  margin-left: auto;
  padding: 0px;
  width: 80%;
  background: url(assets/pin-mw.png)top left repeat-x;
  max-width: 1900px;
  background-color: #929dd9;
  box-shadow: 0 0 10px #111;
}
p {
  margin-left: 100px;
  margin-top: 40px;
  margin-right: 100px;
  font-size: 1.2em;
}
.center {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
/*---------------------------------------------------------------------------
                                IMAGES IN GALLERY
---------------------------------------------------------------------------*/

figure.thumb {
  background-color: #fff;
  padding: 15px 5px 5px;
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 0px;
  float: right;
  text-align: center;
  border-radius: 1px;
  font-size: 1em;
  color: darkslateblue;
  box-shadow: 4px 4px 4px 5px 6px hsla(60, 1%, 60% 20%);
  /*x,y,blur,distance before blur starts*/
}
figure.mason-thumb {
  background-color: #fff;
  padding: 15px 15px 5px;
  margin: 15px 15px 0px 0px;
  width: 100%;
  display: inline-block;
  box-sizing: border-box;
  /*box model fix*/
  /*float: right;*/
  text-align: center;
  border-radius: 1px;
  font-size: 0.7em;
  color: darkslateblue;
  box-shadow: 2px 2px 2px 0px hsla(53, 14%, 4%, 0.73);
  /*x,y,blur,distance before blur starts*/
}
.masonry {
  column-count: 4;
}
figure.mason-thumb a img {
  width: 100%;
}
body#home .main-area body#gallery .main-area {
  background-color: aliceblue;
}
MEDIA QUERY VIEW SIZE ---------------------------------------------------------------------------------*/@media only screen and (min-width: 1600Px)and (max-width: 2400px) {
  .masonry {
    column-count: 5;
  }
}
@media only screen and (min-width: 1021px)and (max-width: 1599px) {
  .masonry {
    column-count: 4;
  }
}
@media only screen and (min-width: 730px)and (max-width: 1020px) {
  .masonry {
    column-count: 3;
  }
}
@media only screen and (min-width: 390px)and (max-width: 729px) {
  .masonry {
    column-count: 2;
  }
}
@media screen and (max-width: 733px) {
  #wrapper {
    margin: 0px;
    width: 100%;
  }
  nav.main-menu ul li {
    display: block;
  }
  header.masthead h1 {
    font-family: 'Shadows Into Light Two', cursive;
    top: 20px;
  }
  footer a {
    font-size: 1.5em;
  }
  nav.main-menu ul li a {
    display: block;
    text-decoration: none;
    padding: .3em;
    margin-top: 3px;
    background-color: azure;
    font-size: 1.5em;
    color: darkslateblue;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
    /*begin round corner undo code*/
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
    /*stop round corner undo code*/
  }
  header.masthead {
    background-size: 25%;
  }
  /*shrinks logo*/
  .main-content {
    flex-direction: column;
  }
  .boxRight {
    /**round corner box**/
    margin-right: auto;
    margin-left: auto;
    width: 70%;
  }
  .left-column {
    background-image: none;
    flex: 1 1 auto;
    order: 3;
  }
  .center-column {
    flex: 1 1 auto;
    order: 1;
  }
  .right-column {
    background-image: none;
    flex: 1 1 auto;
    order: 2;
  }
}
/*** end @media screen**/

<link href="http://elmo.cptc.edu/jeannaKawamoto/gallery.css" rel="stylesheet" />
<!-- viewing my web design gallery page click on moodbooard thumb will reflect following galleries html code. -->

<main class="main-area">
  <article class="masonry">
    <!--starting figure tag will demonstate 8 images scrollable using flexbox, grouped gallery with 
                           rel="lightbox[mood]"  in href for large images grouped to moodboardmock.jpg thumbnail.-->
    <figure class="mason-thumb">
      <a href="assets/gallery/moodboards/mood8.jpg" alt="homepage full size" rel="lightbox[mood]" title="This demographics moodboard is one of two for my Plush Pets Grooming final project. 
                           The purpose was to convey to the client a persona of the retired upperclass customers who                             would be regulars.">
        <img src="assets/thumbnails/moodboardmock.jpg" alt="homepage">
      </a>
      <!--one thumbnail img tag tht is in figure tag inside-masonry parent tag-->
      <figcaption>DESIGNING MOODBOARDS FOR THE CLIENT</figcaption>
    </figure>
    <!--end figure tag for the thumbnail and large thumbnail image-->

    <a href="assets/gallery/moodboards/mood7.jpg" alt="Moodboard design" rel="lightbox[mood]" title="This demographic moodboard is  two of two for my Plush Pets Grooming final project. 
                          The purpose was to convey to the client a persona of the millenial upperclass customers who                           would be regulars.">
    </a>

    <a href="assets/gallery/moodboards/mood3.jpg" alt="Moodboard design" rel="lightbox[mood]" title="This webdesign moodboard is one of two for a Nike Website that conveys a feeling of retro s                          style">
    </a>

    <a href="assets/gallery/moodboards/mood4.jpg" alt="Moodboard design" rel="lightbox[mood]" title="This webdesign moodboard is twp of two for a Nike Website that conveys a feeling of         
                          energy">
    </a>

    <a href="assets/gallery/moodboards/mood5.jpg" alt="Moodboard design" rel="lightbox[mood]" title="This webdesign moodboard is one of two for the Candy Store Website that has only black and
                          white per clients job request">
    </a>

    <a href="assets/gallery/moodboards/mood6.jpg" alt="Moodboard design" rel="lightbox[mood]" title="This webdesign moodboard is two of two for Candy Room Website">
    </a>

    <a href="assets/gallery/moodboards/mood2.jpg" alt="Moodboard design" rel="lightbox[mood]" title="This webdesign moodboard is one of two for my Plush Pets Grooming final project.
                         The purpose was to convey to the client a persona of the baby boomer/retired upperclass 
                         customers who would be regulars.">
    </a>

    <a href="assets/gallery/moodboards/mood1.jpg" alt="Moodboard design" rel="lightbox[mood]" title="This webdesign moodboard is two of two for my Plush Pets Grooming final project. 
                          The purpose was to convey to the client a persona of the millenial/young adults upperclass                           customers who would be regulars.">
    </a>
    <!--each gallery image is not inside the figure -masonry tag because they dont need the white board                       or masonry layout, so just image href for each image linked to gallery with same rel tag as       
                    thumbnail gallery-->

    <!--end galleries html-->

    <!-- graphics html code that does not reflect desired gallery using photoswipe starter code-->
    <article class="picture masonry">
      <figure class="mason-thumb">
        <a href="1080images/horizontal/moodboards/mood1.jpg" data-size="1515x1080" data-index="1">
          <img src="1080images/thumbnails/horizontal/mood/mood1.jpg" alt="This webdesign moodboard is two of two for my Plush Pets Grooming final project. The purpose was to convey to the client a persona of the millenial/young adults upperclass customers who would be regulars.">
        </a>
      </figure>

      <figure class="mason-thumb">
        <a href="1080images/horizontal/moodboards/mood2.jpg" data-size="1515x1080" data-index="2">
          <img src="1080images/thumbnails/horizontal/mood/mood2.jpg" alt="This webdesign moodboard is one of two for my Plush Pets Grooming final project. The purpose was to convey to the client a persona of the baby boomer/retired upperclass customers who would be regulars.">
        </a>
      </figure>

      <figure class="mason-thumb">
        <a href="1080images/horizontal/moodboards/mood3.jpg" data-size="1515x1080" data-index="3">
          <img src="1080images/thumbnails/horizontal/mood/mood3.jpg" alt="This webdesign moodboard is one of two for a Nike Website that conveys a feeling of retro style">
        </a>
      </figure>

      <figure class="mason-thumb">
        <a href="1080images/horizontal/moodboards/mood4.jpg" data-size="1515x1080" data-index="4">
          <img src="1080images/thumbnails/horizontal/mood/mood4.jpg" rel="lightbox[mood]" alt="This webdesign moodboard is twp of two for a Nike Website that conveys a feeling of energy">
        </a>
      </figure>

      <figure class="mason-thumb">
        <a href="1080images/horizontal/moodboards/mood5.jpg" data-size="1515x1080" data-index="5">
          <img src="1080images/thumbnails/horizontal/mood/mood5.jpg" alt="This webdesign moodboard is one of two for the Candy Store Website that has only black and white per clients job request">
        </a>
      </figure>

      <figure class="mason-thumb">
        <a href="1080images/horizontal/moodboards/mood6.jpg" data-size="1515x1080" data-index="6">
          <img src="1080images/thumbnails/horizontal/mood/mood6.jpg" alt="This webdesign moodboard is two of two for Candy Room Website">
        </a>
      </figure>

      <figure class="mason-thumb">
        <a href="1080images/horizontal/moodboards/mood7.jpg" data-size="1515x1080" data-index="7">
          <img src="1080images/thumbnails/horizontal/mood/mood7.jpg" alt="This demographic moodboard is  two of two for my Plush Pets Grooming final project. The purpose was to convey to the client a persona of the millenial upperclass customers who would be regulars.">
        </a>
      </figure>

      <figure class="mason-thumb">
        <a href="1080images/horizontal/moodboards/mood8.jpg" data-size="1515x1080" data-index="8">
          <img src="1080images/thumbnails/horizontal/mood/mood8.jpg" alt="This demographics moodboard is one of two for my Plush Pets Grooming final project. The purpose was to convey to the client a persona of the retired upperclass customers who would be regulars.">
        </a>
      </figure>

      <!--------------------end MOODBOARDS------------------------------------------->


    </article>
</main>
<footer class="footer-area">
  <p>
    <a href="index.html">Home</a> |
    <a href="gallery.html">Web Designs</a> |
    <a href="graphics.html">Graphic Design</a> |
    <a href="animation.html">Animation</a> |
    <a href="resume.html">Resume</a> |
    <a href="contact.html">Contact</a>
  </p>
  <small>Copyright &copy; 2016 Jeanna Kawamoto's Designs in CPTC Graphic Technologies/ Web Development </small>
</footer>
</div>
<!--end wrapper div-->

<!--***************begin photoswipe html interface code-->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="pswp__bg"></div>
  <div class="pswp__scroll-wrap">

    <div class="pswp__container">
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
      <div class="pswp__item"></div>
    </div>

    <div class="pswp__ui pswp__ui--hidden">
      <div class="pswp__top-bar">
        <div class="pswp__counter"></div>
        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
        <button class="pswp__button pswp__button--share" title="Share"></button>
        <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
        <div class="pswp__preloader">
          <div class="pswp__preloader__icn">
            <div class="pswp__preloader__cut">
              <div class="pswp__preloader__donut"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
        <div class="pswp__share-tooltip"></div>
      </div>
      <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
      </button>
      <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
      </button>
      <div class="pswp__caption">
        <div class="pswp__caption__center"></div>
      </div>
    </div>
  </div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="dist/photoswipe.min.js"></script>
<script src="dist/photoswipe-ui-default.min.js"></script>

<script src="dist/photoswipe-mwebster.js"></script>
<!--************** end photoswipe html interface code-->

如果有人知道将其应用于 photoswipe 的方法，那就太好了。

Answer 1

graphics.html 页面上的以下代码将触发 PhotoSwipe。

$("#buttonid").click(function () {
    $(".mason-thumb:eq(0)").trigger("click");
});

你需要做的是

1. 为每个图库提供不同的id/class，这样您就可以为每个图库分别触发点击
2. 将每个画廊放在 div 中并将其设置为 overflow:hidden;height:0px; 这将隐藏画廊的缩略图，但仍然允许 PhotoSwipe 访问图像
3. 将上面的代码分配给您要在页面上显示的适当图像按钮。