I want that, if a user clicks an image that opens a gallery of multiple images linked to that one thumbnail.
I don't want the gallery of enlarged images to link to thumbnail of image that is viewable on page.
I don't want fifty thumbnails on page when I can click one image with 5 large images to swipe through and a caption for each of large image.
I want my graphic design page: http://elmo.cptc.edu/jeannaKawamoto/graphics.html page to look like my webdesign page: http://elmo.cptc.edu/jeannaKawamoto/gallery.html
I used flexbox and assigned a gallery to each thumbnail, only using a thumbnail for groups of images in each "gallery".
As it is not I have 8 images and 8 thumbnails for graphics when I want those images to be in a gallery of their own that will open with one thumbnail to view all images in that group like graphics.
Is there a way to do this with photoswipe?
I have to use photoswipe for smartphone friendly swiping. My graphics page is not smartphone responsive properly.
My web design html demonstrates what I want it to function like. You will see I have one thumbnail and five images that refer to the same gallery, with thumbnail image linking with same rel="lightbox[mood]" in each of image tag.
The moodboard thumbnail has 8 images that link to that thumbnail only- grouped by [mood]. Is there a way to do this same affect using 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-->If anyone knows of a way to apply this to photoswipe that would be great.
