#3349 - Improved gallery layout modes
-
By Chris Graham
- Added
- 2 views
| Identifier | #3349 |
|---|---|
| Issue type | Feature request or suggestion |
| Title | Improved gallery layout modes |
| Status | Completed |
| Tags |
Roadmap: v11 (custom) |
| Handling member | Salman |
| Addon | galleries |
| Description | Rather than a checkbox, whether the mode is flow mode, have radio buttons...
1) Grid mode (previously, "Regular mode") 2) Carousel mode (previously, "Flow mode") 3) Mosaic mode (new mode, use "Masonry" JS lib) |
| Steps to reproduce | |
| Related to | |
| Funded? | No |
The system will post a comment when this issue is modified (e.g., status changes). To be notified of this, click "Enable comment notifications".
Comments
"So I've been working on galleries, about done with it now. I made a quick video(s): Part 1 (https://www.youtube.com/watch?v=cyYxsau3neg) Part 2 (https://www.youtube.com/watch?v=GJcpmBaPwD4)
Overview of main stuff I did (other than making everything fully responsive):
Slideshow Mode:
Fully redesigned.
Touch friendly thumbnails carousel.
Show/Hide Captions button
Toggle Fullscreen button
Comments Tab (Ajax-loaded)
Settings Tab:
Slide delay
Slide transition effect (slide or fade atm)
Stretch small media
Background color (light or dark)
Tested with YouTube, Vimeo, MediaElement.js and JWPlayer.
Simple and robust 2-way events based communication with embedded media. Complete de-coupling, embedded media has no knowledge of a slideshow existing :) Could be useful in other areas.
Gallery Entry Page:
Minimalist redesign.
Show next and previous entry thumbnails.
Info bar instead of table
Mosaic Layout Mode
Brand new UI.
Uses Masonry.js for neat element positioning.
Nice details overlay showed on hover.
"Show Details" checkbox to toggle details overlay on touch devices.
Builds upon the same PHP code as grid mode.
Grid Layout Mode:
Touch friendly redesign, shows information out right instead of needing a mouse to hover as previous.
Shows just number of views on hover.
Added start slideshow button.
Carousel Layout Mode:
Renamed from flow mode.
Info bar instead of a table.
Dropped old carousel in favor of much more user and touch-friendly Glide.js carousel.
Root/Parent Gallery:
Redesigned sub galleries view to be prettier and display more information, added start slideshow buttons.
Clearly marked/separated sub-galleries and gallery entries with headings, previously it was confusing for the user.
Changed default layout mode for root to grid mode as it's better suited IMO.
"