Photoswipe問題：如何在庫中根據一個縮略圖滾動多個圖像？

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]"在每個圖像標記中。

[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. 將上面的代碼分配給您要在頁面上顯示的正確圖像按鈕。