New layout in Exhibit builder


I am working on a site right now and they are asking to custom one of the exhibit layout to include, one full size image in the left part of the exhibit page, and other small thumbnails on the other part of the layout page.

I was able to create this part no problem. However,users asked for an option to click on any of those thumbnails to show it in the full size image spot. So every time a user click on one of those thumbnails, the full size image of this thumbnail will show up in the spot designated for full size image.

I managed to display all the image files for all items included in this page layout by add a filter to exhibit_builder_display_exhibit_thumbnail_gallery function in my custom.php in my theme. But the part of toggling by click on the thumbnail I am not sure the best way to achieve it. I thought to display all the file images in full size option and show the first one and hide the rest. but that solution will make the page slow if there are a lot of items and each item has couple of images.
I appreciate any help.

Thanks for reposting this.

I can think of a pretty simple JavaScript solution to this problem: your thumbnail output for each item would look like this, basically:

<a href="path/to/fullsize" class="toggle-fullsize">
<img src="path/to/thumbnail">

Then, anytime someone clicks on one of the thumbnail links, you use JavaScript to replace the big fullsize img src with the value from the link's href.

This way, you don't actually load the other fullsize images until the user clicks on them.

You could also look in to something like Fancybox, which can do this kind of thing automatically (but in a lightbox instead of another image on the page).

And, then again, unless you have a lot of items on one exhibit page, which isn't that common, the page loading might not really be slow enough for you to need to worry.

Hi John,

Thanks for the suggestion I will look at it and let you know.