Masonry with fixed size
Masonry with description and alt attribute on the bottom bar – and title on the top bar
Via the api you can influence the popup behavior. The documentation is excellent.
And indeed, this is a very powerful lightbox script.
You have to set „title and description“ to permanent and as an overlay.
The title gets its own bar in the markup, and is placed on top. In the bottom bar, the alt attribute is displayed first, and below that, the description. Enfold takes the description from the Media Library, but can also change it permanently here in Masonry.
I would prefer a custom input field here, so that you can use the same image several times with different labels.
As you can see, you can even have the arrows prev./next inside the lightbox.
Show title and description as overlay is better if you don’t want to display anything below the thumbnails in the frontend.
Reason: the calculation of the height of Masonry items includes this height, even if they are set to display: none.
/******* if you do not want to see in frontend page - but only in lightbox - here one by one - you decide **********/
#wrap_all .lightbox-added .avia-arrow,
#wrap_all .lightbox-added .av-masonry-entry-content,
#wrap_all .lightbox-added .entry-title {
display: none;
}
/******* if you do not want to see in frontend page - but only in lightbox - all at once
#wrap_all .lightbox-added .av-inner-masonry-content-pos-content {
display: none;
}
**********/
.mfp-top-bar {
color: #fff;
padding: 10px 20px;
background: -webkit-linear-gradient(left, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(106,166,216,0.7) 80%,rgba(125,185,232,0) 100%);
background: linear-gradient(to right, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(106,166,216,0.7) 80%,rgba(125,185,232,0) 100%);
width: 98%;
}
div .mfp-title {
line-height: 1.4em;
font-size: 1.2em;
}
img.mfp-img {
padding: 10px 0 40px;
}
.mfp-bottom-bar .mfp-description {
color: #fff;
opacity: 1;
line-height: 1.4em;
}
.mfp-bottom-bar {
padding: 0 20px;
background-color: rgba(0,0,0,0.5);
}
/******** choose show title and excerpts - but as overlay - then do this in quick css to have the same hover effect.***********/
#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content {
background: rgba(255,255,255,0.3);
}
#top .av-caption-style-overlay .av-masonry-item-with-image:hover .av-inner-masonry-content {
background: rgba(255,255,255,0);
}On Caption ( description) i like to preserve html tags ( f.e.: br-tags will work then ) we had to change something in the av-helper-masonry.php
Unfortunately anchor-links do not work
// line 629 from:
$loop_excerpt = strip_tags( $entry->post_excerpt );
//to:
$loop_excerpt = $entry->post_excerpt ;This is for the child-theme functions.php
function popup_masonry_gallery() {
?>
<script type="text/javascript">
(function($){
$(window).load(function(){
$('.av-masonry a.av-masonry-entry.lightbox-added').magnificPopup({
type: 'image',
image: {
markup: '<div class="mfp-figure">'+
'<div class="mfp-close"></div>'+
'<div class="mfp-top-bar">'+
'<div class="mfp-title"></div>'+
'</div>'+
'<div class="mfp-img"></div>'+
'<div class="mfp-bottom-bar">'+
'<div class="mfp-description">'+
'<div class="mfp-alt"></div>'+
'<div class="mfp-caption"></div>'+
'</div>'+
'<div class="mfp-counter"></div>'+
'</div>'+
'</div>',
},
mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded',
closeOnContentClick: false,
midClick: true,
gallery: {
enabled: true
},
callbacks: {
markupParse: function (template, values, item) {
values.title = item.el.attr('title') !== "" ? '<h2>' + item.el.attr('title') + '</h2>' : '';
},
change: function() {
var AltItem = $(this.currItem.el).attr('alt') !== "" ? $(this.currItem.el).attr('alt') : '';
var CaptionItem = $(this.currItem.el).find('.av-masonry-entry-content').length > 0 ? $(this.currItem.el).find('.av-masonry-entry-content').html() : '';
$(this.content).find('.mfp-alt').html(AltItem);
$(this.content).find('.mfp-caption').html(CaptionItem);
},
/*** if you like to have the arrows inside the container
buildControls: function() {
// re-appends controls inside the main container
this.arrowLeft.appendTo(this.contentContainer);
this.arrowRight.appendTo(this.contentContainer);
},
*** remove these two lines with asterisk ******/
},
});
// close the iframe window
$(document).on('click', '.popup-modal-dismiss', function (e) {
$.magnificPopup.close();
});
});
})(jQuery);
</script>
<?php }}
add_action('wp_footer', 'popup_masonry_gallery');