I’m working on updating my web site from Freeway to Xway. I’d like to have a page where there’s thumbnail images that if they’re clicked on they enlarge and float on top of the page. I’ve followed the steps in the user guide to make a popup and it works.
My question is this… the page currently has 50 thumbnails, and that will grow over time. Do I need to make a separate overlay for each thumbnail, or is there a way to have one overlay that each thumbnail links to and it loads a different picture depending on which thumbnail is clicked?
Hi @craiglee
What you’re describing is essentially a lightbox, which is a popular way to display images in a floating overlay when thumbnails are clicked. While you could manually create a single overlay with dynamic content for each thumbnail, there’s actually a much simpler solution: Exhibeo, a product from Softpress.
Exhibeo is specifically designed for creating image galleries with features like lightboxes and slider. It integrates perfectly with Xway. It’s an excellent option, especially considering its very affordable price and ease of use. I would like to point out that I have no family ties with the people on the Softpress team and that I am not a shareholder in this company
I highly recommend giving it a try, it’s a freaky good product. Hope that helps.
I’ve used Exhibeo’s Thumblie theme to create this type of gallery in one of my websites.
If I wanted to do it manually, I would start by searching for “CSS lightbox”. Some of the solutions I’ve seen use JavaScript (which can be added via the JavaScript Markup section in Xway) along with HTML and CSS. They’re generally written for hand coding, so it might take a bit of work to adapt them. You mostly don’t need to add CSS markup manually (although you can do this), because Xway supports many CSS properties directly, and if there are properties that it doesn’t support you can add them as extended properties.
It’s not directly relevant to what you’re doing, but at least one of the Xway templates contains a non-Exhibeo slideshow. The Xway User Guide explains how this works (Slideshows section in Appendix 2: Templates).
It looks like setting up an Exhibeo gallery won’t work for my application because I need the thumbnails to be scattered and attached to text with links to other pages on my site (see attached jpg in my OP). Exhibeo doesn’t seem to let me do that.
So would it be absurd programing to use Exhibeo to make multiple 1 image galleries, one for each of my lightbox popups? I really like the look of them. How would this normally be done, a single overlay that links to whatever thumbnail is clicked on the page or multiple overlays, one for each thumbnail on the page?
It should be possible to create a single overlay that loads whatever image is clicked on. This would probably require adding some JavaScript in the JavaScript Markup section of the Page Inspector.
You could also use Exhibeo 2 to make multiple 1-image galleries. This will generate multiple scripts and CSS files for each gallery, so you would need to check that the page doesn’t become slow to load.
Thanks Jeremy, I’m looking into that. But I’m not a coder so it may be beyond me…
Experimenting to get the same effect on pages with fewer images I tried attaching a link to an image and have it link to a RESOURCE which is the image. That opens in a new page, which looks good, but there’s no CLOSE or BACK button, you need to use the browser’s back button which isn’t ideal.
Setting a resource link on an image that links back to itself is what the Xway Tutorial suggests for making a simple gallery. You can open the link in a new window or tab if you prefer.
I’ll try to investigate JavaScript solutions when I have some time.
