Search code examples
javascriptphotoswipe

Photoswipe gallery with fluid transition

I'd like to have a fluid transition (horizontal floating) of the images in my photoswipe gallery(see chapter "How to build an array of slides from a list of links"). If there are more pictures with different heights (or just different dimensions) so that the gallery needs more lines, you see the strict grid layout:

strict grid design

Is there any setting that allows me to change that static grid design in potoswipe?

Expected result:

with fluid transition

Solution

  • After hours of searching I found a solution:

    #photos {
   /* Prevent vertical gaps */
   line-height: 0;

   -webkit-column-count: 5;
   -webkit-column-gap:   0px;
   -moz-column-count:    5;
   -moz-column-gap:      0px;
   column-count:         5;
   column-gap:           0px;
}

#photos img {
  /* Just in case there are inline attributes */
  width: 100% !important;
  height: auto !important;
}

    The #photos id represents the .my-simple-gallery class of photoswipe.