Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Using Magnific Popup with Wordpress Now, from: http://ajtroxell.com/using-magnific-popup-with-wordpress-now/
/**
* Add title back to images
*/
function pexeto_add_title_to_attachment( $markup, $id ){
$att = get_post( $id );
return str_replace('<a ', '<a title="'.$att->post_title.'" ', $markup);
}
add_filter('wp_get_attachment_link', 'pexeto_add_title_to_attachment', 10, 5);
<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/magnific-popup.css">
$(document).ready(function() {
//Initialize for inline images
$('.pop').magnificPopup({type:'image'});
//Initialize for wordpress galleries
$('.gallery').magnificPopup({
delegate: 'a',
type: 'image',
gallery: {
enabled: true
}
});
});
// initialize magnific popup galleries with titles and descriptions
$('.gallery').magnificPopup({
callbacks: {
open: function() {
$('.mfp-description').append(this.currItem.el.attr('title'));
},
afterChange: function() {
$('.mfp-description').empty().append(this.currItem.el.attr('title'));
}
},
delegate: 'a',
type: 'image',
image: {
markup: '<div class="mfp-figure">'+
'<div class="mfp-close"></div>'+
'<div class="mfp-img"></div>'+
'<div class="mfp-bottom-bar">'+
'<div class="mfp-title"></div>'+
'<div class="mfp-description" style="text-align: left;font-size: 12px;line-height: 16px;color: #f3f3f3;word-break: break-word;padding-right: 36px;"></div>'+
'<div class="mfp-counter"></div>'+
'</div>'+
'</div>',
titleSrc: function(item) {
return '<strong>' + item.el.find('img').attr('alt') + '</strong>';
}
},
gallery: {
enabled: true,
navigateByImgClick: true
}
});
@paaljoachim

This comment has been minimized.

Copy link

commented Aug 26, 2014

Hey

Is there a way to only add code to the functions file + the extra files to get it to work?
As in not having to add code to the header and footer.

@paaljoachim

This comment has been minimized.

Copy link

commented Dec 25, 2015

I am linking to your resource page here:
http://easywebdesigntutorials.com/adding-a-lightbox-to-wordpress-without-using-a-plugin/

Thank you for adding the code!

@MiroEduardo

This comment has been minimized.

Copy link

commented Aug 2, 2016

Nice

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.