我想要的是，如果用户点击的图片打开了链接到该缩略图的多个图片的图库。
我不希望放大图像的图库链接到可在页面上查看的图像缩略图。
当我点击一张包含5张大图片的图片以及每张大图片的标题时，我不希望页面上有50张缩略图。
我想要我的图形设计页面： 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 © 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-->
如果有人知道如何将此方法应用于照片组合，那就太棒了。
答案 0 :(得分：0)
您的graphics.html页面上的以下代码将触发PhotoSwipe。
$("#buttonid").click(function () {
$(".mason-thumb:eq(0)").trigger("click");
});
您需要做的是
id/class，以便您可以针对每个图库单独触发点击div并设置为overflow:hidden;height:0px;，这将隐藏图库的缩略图，但仍允许PhotoSwipe访问图像