Masonry Gallery

Overview

Similar to the default Masonry Element in design and options. The big difference is that this Gallery it is not meant to display WordPress entries but images. The element can be displayed fullwidth (see Portfolio Masonry examples) or adapt to the content size.

View example Masonry Gallery element.

Code Snippet

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

 [av_masonry_gallery ids='' items='24' columns='flexible' paginate='yes' size='flex' orientation='' gap='large' overlay_fx='1px' container_links='active' id='' caption_elements='title excerpt' caption_styling='always' caption_display='always' color='' custom_bg='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-columns='' av-small-columns='' av-mini-columns='' av_uid='av-2r87sv'][/av_masonry_gallery] 

Customization

Caption style

Caption font: Caption font size can be set in the element options however if you choose to add custom style please use the CSS below.

/* caption font */
#top .av-masonry h3.av-masonry-entry-title.entry-title {
	font-size: 12px;
	font-family: 'Encode Sans Expanded', sans-serif;		
	color:#ff0092;
}

Caption background To add custom color to the caption area please use the below CSS.

/* Background color */
#top .av-masonry figcaption.av-inner-masonry-content,
#top .av-masonry .av-inner-masonry-content .avia-arrow {
    background: #caccd1!important;
}

Remove default overlay

To remove the default overlay of the image please use the CSS below.

/* Remove overlay */
#top .av-hover-overlay-active .av-masonry-image-container {
    opacity: 1!important;
}

Masonry gallery pagination

To add custom style to the masonry gallery pagination please use the CSS below.

/*----------------------------------------
// CSS - Masonry Gallery pagination
//--------------------------------------*/

/* Pagination */
.av-masonry-pagination, 
.av-masonry-pagination:hover {
	background-color: #ffc845!important;
}

/* active pagination */
#top .av-masonry .pagination .current {
	background: #334858;
	color:#fff;
}

/* inactive pagination */
#top .av-masonry .pagination a.inactive {
	background: #222222;
	color:#fff;
}

Open gallery image links in new window

By default, the links assigned to the gallery image will open in the same window. If you wish to open the links in a new window please use the below function.

Code snippets:

//---------------------------
// Open masonry gallery links in new window
//---------------------------
function add_custom_target(){
?>
<script>
jQuery(window).load(function(){
jQuery('.av-masonry-container a ').attr('target','_blank');
});
</script>
<?php
}
add_action('wp_footer', 'add_custom_target');

Resource