GOAL: Single image floated left or right, opens in lightbox showing multiple images.
One possible single image to lightbox popup gallery solution? At left is a SP Easy Image Gallery Module, inserted with Modules Anywhere. Manually wrapped in a div to add float:left and margin.
1. Create Album: Components > SP Easy Image Gallery > Albums. Make the first image's title "Click to zoom" or "Click for gallery."
3. Create Module to display Album: Site Modules, new module of type SP Easy Image Gallery.
4. Module Settings best for this usage: Limit: unset (show all thumbnails and images), Layout: Default, Columns: 1 (so unusused space for columns 2+ are not created).
(What not to do: Mosaic Layout definitely for multiple images, probably 6+. Rectangle Layout added class .speasyimagegallery-col-sm-8, making unused space to right of single thumbnail image.)
5. Load module by name or id within Article text. Wrap in div to style with added class and inline css:
<div class="eig-hide-thumbs-except-1st" style="float: left; margin: 0 9px 9px 0; width: 25%;">{... load module ...}</div>
6. Define class in main template custom css by creating and editing file "/templates/shaper_helixultimate/css/custom.css" in template "shaper_helixultimate" with code:
@charset "UTF-8";
/* For single thumb > gallery popup, use .eig… class on wrapping element */
.eig-hide-thumbs-except-1st .speasyimagegallery-row > *:not(:first-child) {
display: none; /* Hide all direct children except the first one */
}
If the wrapping element class is missing it doesn’t match and all thumbnails will show.
Each iteration of this effect requires a new gallery, and a new module. PIA compared to old Rokbox code, but all other gallery solutions I've found have also had separate gallery creation areas. (Roxbox was code only within an article.)
