New idea for gallery...need some help

mbridge87

Hello,

OK. As some of you may know I've been struggling with my gallery for some time. I can't seem to find a solution that works, across all platforms, and looks appealing.

I've had a mini break through but need a little bit of code that I just can't figure out.

Take a look at this page of my site:

http://www.maxbridge.co.uk/Pages/Sub-Pages/HomePage/Test-Gallery

The idea now is to use two different image viewers to make a sort of hybrid gallery. I've got a slideshow at the top and then underneath is the multiple photos widget with the click scrolling enabled. Meaning people can use the slideshow to look through the images and then the part underneath to go back / browse images they like.

Anyway my problem is that the thumbnails for the multiple photo gallery are too large. They're set to small but I'd like them smaller. I've tried loads of things and get close but, as usual, can't find the solution.

To be totally clear I don't just want the spacing in-between to increase but rather the whole image to become smaller. There would then be more images per line.

Any help would be hugely hugely appreciated!!

Thanks

thenickdude

If you want to stick with Collage Landscape, the only thing I can think of that would work would be CSS like this:

.sm-page-widget-images .sm-tiles-list {
	zoom:0.75;
}

"zoom" is only supported on Chrome, Internet Explorer and Safari, but that might be enough to catch most of your visitors (since the gallery is still usable when "zoom" isn't supported).

Otherwise, I think you'd need to switch the Multiple Photos block to grid mode. Then you could add this CSS to show the thumbnails at their original aspect ratios:

.sm-user-ui .sm-page-widget-images .sm-tiles-grid img {
	max-width:100%;
	max-height:100%;
}

Then add this CSS to add one extra column of images:

/* Add one column to image icons */
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-10 .sm-tile-wrapper {
	width:9.09%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-9 .sm-tile-wrapper {
	width:10%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-8 .sm-tile-wrapper {
	width:11.11%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-7 .sm-tile-wrapper {
	width:12.5%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-6 .sm-tile-wrapper {
	width:14.28%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-5 .sm-tile-wrapper {
	width:16.66%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-4 .sm-tile-wrapper {
	width:20%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-3 .sm-tile-wrapper {
	width:25%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-2 .sm-tile-wrapper {
	width:33.33%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-1 .sm-tile-wrapper {
	width:50%;
}

Or this CSS to add two columns:

/* Add two columns to image icons */
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-10 .sm-tile-wrapper {
	width:8.33%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-9 .sm-tile-wrapper {
	width:9.09%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-8 .sm-tile-wrapper {
	width:10%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-7 .sm-tile-wrapper {
	width:11.11%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-6 .sm-tile-wrapper {
	width:12.5%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-5 .sm-tile-wrapper {
	width:14.28%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-4 .sm-tile-wrapper {
	width:16.66%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-3 .sm-tile-wrapper {
	width:20%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-2 .sm-tile-wrapper {
	width:25%;
}
.sm-page-widget-images .sm-tiles-grid.sm-tiles-col-1 .sm-tile-wrapper {
	width:33.33%;
}

mbridge87

Hey Lamah,

Thanks so much for all of this,

I've gotta pop out for a mo but will try it all when I get back. The reason I had it on Collage was because it was the only way I could use the "click" scroll option. I wanted to use that as it stops all of the thumbnails being viewed straight away.

If anyone thinks this is too confusing for users please let me know. I thought it worked pretty well...

I've deleted that test page now. so you can view an example on this one:

http://www.maxbridge.co.uk/Pages/Sub-Pages/HomePage/Location

Thanks.

mbridge87

Hi Lamah,

Thanks again for that.

I've given it a go but unfortunately the "zoom" function reduces the size of the entire widget rather than adding an extra column into the "collage" style layout. I tried it with the grid view but was not too keen on the aesthetics like that.

Really really appreciate your help though.

If you have any other ideas please let me know...even if they're totally different to this ha ha ha...all I want is a film strip style gallery that works well on mobile as well

mbridge87

bump