Mosaic Photo Gallery

1 Attachment(s)

For this to work, you need v16+ of a Xara Desktop application (XDA): XWD(P) or XDPX or XPro+, where Image Filename is an option.
A shape on your page requires the special Name UsesJQuery or you have added in a Web Animation effect already: either includes the jQuery library.

Create an images layer (I used !Photo, but that is my preference as it forces the layer to publish regardless).
Add and lock a shape on that layer that calls the same layer: this hides everything.

Why?
Add any number of hires images into the !Images layer and give them all an Image Filename of "photo".

On the MouseOff layer, create a large rectangle as a Placeholder for the gallery.
Add the HTML code (body) of:

Code:

<ul class="thumb"> <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo@2x.jpg)"></div></a></li> <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo1@2x.jpg)"></div></a></li> <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo2@2x.jpg)"></div></a></li> <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo3@2x.jpg)"></div></a></li> <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo4@2x.jpg)"></div></a></li> <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo5@2x.jpg)"></div></a></li> <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo6@2x.jpg)"></div></a></li> <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo7@2x.jpg)"></div></a></li> <li><a href="javascript:void(0)"><div class="thumbnail-wrap" style="background-image:url(index_htm_files/photo8@2x.jpg)"></div></a></li> [Keep adding lines of <li>...</li>, incrementing the photo number (See *** below) each time] </ul> <div class="thumbnail-zoomed-wrapper" style="display: block;"> <div class="thumbnail-zoomed-image"><img src="" alt=""></div> </div>

Size this box, using 170px across and 130px down for each image.

Make sure you copy across the CSS (Page > HTML Code (head)) and JavaScript (Page > HTML Code (body)) from my example file.
You can make the box narrow and taller and the mosaic will follow. You can readily make it fit into your Variant pages as shown in the example file.

If you have collections of images and want different galleries, create a new !Layer for each collection and in the Placeholder and Image Filename change the name to that of the layer.

You should now have a display with a set of 160x120px thumbnails in a cosy grid.
When you rollover any, you get a hover that presents the image in its full dimensioned ratio. I have added a slight transparency for my personal preference.
A further click of this open the image to 75% of your browser width.
This is mainly designed for landscape but portrait will still work.
I have include one example portrait image.

:pointAttachment 128171

i have had to optimise the images to upload into TG.
The reworked original code came from https://www.freakyjolly.com/image-th.../#.X5REySiYUuU.

Acorn

P.S. *** The photoN@2x.jpg naming is to access the Retina images. If you have Retina off, use photoN.jpg instead.

Re: Mosaic Photo Gallery

I really like this. If I can figure out how to use it, it would make my pages that I currently have with seperate thumbnail and layer popups faster right? example https://www.jerrys-furniture.com/ash...droom-sets.htm . Thanks. (if you view it you might have to wait a bit before all the mouseover and clicks popup well.)

Re: Mosaic Photo Gallery

Probably should have a close button because you cannot select under the current image. The example yellowbird linked to closes when you move away. But still and all very cool.

Re: Mosaic Photo Gallery

Quote:

Originally Posted by gwpriester

Probably should have a close button because you cannot select under the current image. The example yellowbird linked to closes when you move away. But still and all very cool.

I didn't like the Close (X) approach but you can change the code above to:

Code:

<div class="thumbnail-zoomed-wrapper" style="display: block;"> <div class="close-image-zoom" style="margin: 50px; color: white;">Close</div> <div class="thumbnail-zoomed-image"><img src="" alt=""></div> </div>

This should work for you for the full image.
Do add it to the Variant as well.

If the problem is for the pop-ups, i simply move off left down across and up or similar.
If you move the pointer across or up/down when the full image is open you get the adjacent pop-up.
I felt the moves were more fluid (quirky) and less formulaic, which appealed to me.

Acorn