Is it possible to filter thumbnails?

Robin Groenevelt · November 9, 2014

I'm trying to achieve this filter effect:

http://themeforest.net/item/division-fullscreen-portfolio-photography-theme/full_screen_preview/5030589

Is it possible to filter the thumbnails shown in a grid / masonry display based on keywords?

Or alternatively, shows 4 galleries of images together and then click on something to show only the image of one of the galleries.

leftquark · November 19, 2014

Robin Groenevelt wrote: »

I'm trying to achieve this filter effect:

http://themeforest.net/item/division-fullscreen-portfolio-photography-theme/full_screen_preview/5030589

Is it possible to filter the thumbnails shown in a grid / masonry display based on keywords?

Or alternatively, shows 4 galleries of images together and then click on something to show only the image of one of the galleries.

You can use a "multiple photos content block" to place images in a grid or thumbnail view. I'd like to make sure i fully understand your request: when you say you'd like to achieve the filter effect, do you mean the zoom in effect when you place your mouse over the image?

leftquark · November 19, 2014

To achieve the zoom in effect of the site you linked, you can use the following CSS. I used a gallery set to "Thumbnail" style. I then "Made this gallery custom", went into the customizer, and clicked on the wrench above the gallery to edit the thumbnail settings and set the photos to display in medium size. Next, I dropped this into a "CSS Content Block" with the code:

/* Make horizontal (landscape) photos zoom in on hover */
.sm-image-center-horizontal:hover, .sm-tiles-center-image .sm-tile-limit-height:hover {
	-moz-transform: scale(1.15) translate(-40%,0);
	-ms-transform: scale(1.15) translate(-40%,0);
	-o-transform: scale(1.15) translate(-40%,0);
	-webkit-transform: scale(1.15) translate(-40%,0);
	transform: scale(1.15) translate(-40%,0);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

/* Make vertical (portrait) photos zoom in on hover */
.sm-image-center-vertical:hover, .sm-tiles-center-image .sm-tile-limit-width:hover {
	-moz-transform: scale(1.15) translate(0,-40%);
	-ms-transform: scale(1.15) translate(0,-40%);
	-o-transform: scale(1.15) translate(0,-40%);
	-webkit-transform: scale(1.15) translate(0,-40%);
	transform: scale(1.15) translate(0,-40%);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

/* Transition the zoom */
.sm-image-center-vertical, .sm-tiles-center-image .sm-tile-limit-width, .sm-image-center-horizontal, .sm-tiles-center-image .sm-tile-limit-height  {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

/* Center the photo info */
.sm-tiles-grid .sm-tile-info {
	text-align: center !important;
	top: 50%;
	transform: translateY(-50%);
	height: 55px;
	background-color: rgba(0,0,0,0) !important;
}

You can see a live example here: http://aaronmeyers.smugmug.com/Test/Grid-Zoom-Test/

Allen · November 19, 2014

We could use the expand photo popup in the Organizer. Any chance?

Is it possible to filter thumbnails?

Comments