It’s possible to reutilize bricks lightbox with gutemberg posts posts are with media link?
I want to show automatically the image link with modals.
thanks
2 Likes
Hi
I implemented Itchys code, see my post with the first version.
Everything worked, except that when I clicked on an image from the gallery, always the largest image was opened (the first image) and not the image that I clicked on. Instead, I then had to use the arrows in the lightbox to move to the image I clicked on. It might be a problem because I used an ACF gallery, I don’t know.
Here is the script from Itchy (slightly modified) that I used, but with the problem mentioned above:
//javascript
(()=>{
document.addEventListener( 'DOMContentLoaded', ()=>{
// Define my lightbox / PhotoSwipe element from DOM
const lightbox = document.querySelector(".pswp");
// Do some checking if PhotoSwipe loaded and lightbox element exists
if( 'function' === typeof PhotoSwipe && 'function' === typeof PhotoSwipeUI_Default && lightbox) {
// Function to get the largest image from my img srcset
const getLargestImage = (srcsetArray)=>{
let largestSet = srcsetArray.reduce((previousSet, currentSet)=>{
let temp_p = previousSet.trim().split(' ');
let width_p = parseInt(temp_p[1].replace('w',''));
let temp_c = currentSet.trim().split(' ');
let width_c = parseInt(temp_c[1].replace('w',''));
return (width_c > width_p)? currentSet: previousSet;
});
return largestSet.trim().split(' ');
}
// Function to open the lightbox
const openLightbox = (event)=>{
const options = {
"bgOpacity" : .9,
"showHideOpacity" : true,
"index" : 0,
"closeOnScroll" : false,
"closeOnVerticalDrag" : false
};
const wpImg = event.target;
const otherImages = wpImg.closest('.galleryid-47550').querySelectorAll('img');
let items = [];
if( otherImages ) {
otherImages.forEach( otherImg => {
let imgSrc = otherImg.getAttribute('src');
let imgW = otherImg.getAttribute('width');
let id = otherImg.getAttribute('data-id');
if( otherImg.getAttribute('srcset') ) {
let srcsetArray = otherImg.srcset.split(',');
let largestSetArry = getLargestImage(srcsetArray);
imgSrc = largestSetArry[0];
imgW = parseInt(largestSetArry[1].replace('w',''));;
}
items.push({
"src": imgSrc,
"w": otherImg.getAttribute('width'),
"h": otherImg.getAttribute('height'),
// "id": wpImg.getAttribute('data-id')
})
})
}
// Get the index of the clicked image
let index = 0;
for( let i = 0; i < items.length; i++ ) {
if( items[i].id === wpImg.getAttribute('data-id') ) {
index = i;
break;
}
}
// Rearrange the images to match the order of the gallery
let arrangedImgs = [];
if( index > 0 ) {
arrangedImgs = items.splice( index, items.length - index )
items.forEach( item => {
arrangedImgs.push(item);
} )
} else {
arrangedImgs = items;
}
(new PhotoSwipe(lightbox, PhotoSwipeUI_Default, arrangedImgs, options)).init();
}
// Important! Please use your own selector!
const wpImages = document.querySelectorAll('.galleryid-47550 img');
if( wpImages ) {
wpImages.forEach( wpImg => {
wpImg.addEventListener( 'click', openLightbox.bind(event), false );
})
}
}
})
})()
I just didn’t have time to look what was wrong with the script.
I then changed to use the Bricks element “Image-gallery” instead (also learned this from Itchys tutorial) and with this I didn’t need to implement the lightbox routine and scripts myself anymore. That is the second code in the post above. Much easier I think. That has been working flawlessly.
Cheers
Patric
1 Like
Thank you for the support.
Is working as expected!
Anyone got that updated and working with a single gallery for all Gutenberg images. Like single ones and galleries?
Additionally anyone found a plugin or code snippet, that sets all image to link to media?
Hi
WordPress 6.4 has now a built-in lightbox for images.
Cheers
Patric
1 Like
I have seen it, but is there a global setting, that enables it by default?
See this:
To enable the lightbox feature for Image blocks used throughout the site, you must set settings.blocks.core/image.lightbox.enabled to true in theme.json :
{
"version": 2,
"settings": {
"blocks": {
"core/image": {
"lightbox": {
"enabled": true
}
}
}
}
}
You can basically copy/paste the lines above into a code editor and save it as “theme.json”. Then copy that file into the Bricks Child Theme Directory.
Cheers
Patric
1 Like
But it’s not on par, with other solutions. Seems like there’s no gallery feature and every images, needs to be opened and closed on their own. I also see no caption support.
For my tutorial site, it’s not good enough, except I missed functionality.
Yes, I also think the functionality of this new native Wordpress function is not yet where we need it. Maybe they will improve it in the next few WordPress versions.
For time being, I stick to this very small and fast plugin:
Cheers
Patric
1 Like
Using the same now. A better alternative, yes.
I love Bricks, but I hate JS libraries that they are choosing. Almost non-functional Codemirror instead of Ace, buggy Splide instead of Swiper. And now I bumped into this ridiculous library that requires to pass width and height of an image. I guess I’ll have to hook Fancybox to WP posts now.
You don’t need a plugin for that, here’s how you do it:
(I use jQuery on my sites, so sorry native JS lovers)
- Download Fancybox 3 from here.
- Add this code to your child theme:
- Chech documentation if you want to add some extra stuff in your script.
if (!is_admin()) {
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_script('jquery');
wp_enqueue_style(
'fancybox',
'/wp-content/themes/bricks-child/jquery.fancybox.min.css',
array(),
'3.5.7'
);
wp_enqueue_script(
'fancybox',
'/wp-content/themes/bricks-child/jquery.fancybox.min.js',
array('jquery'),
'3.5.7',
false
);
wp_enqueue_script(
'fancybox-hook',
'/wp-content/themes/bricks-child/fancybox-hook.js',
array('fancybox'),
'1',
false
);
}, 10 );
}
Content of fancybox-hook.js:
(function ($) {
$(document).ready( function () {
// Making it work on the fly with ajax'ed posts
// I don't need galleries, so it works only with single images
$(document).on('click', '.wp-block-image a', function (e) {
e.preventDefault();
$.fancybox.open( $(this), {
buttons: [
"close"
],
});
});
});
}(jQuery));
Also you can add some CSS to make it look more like default “Photoswipe” in Bricks.
.fancybox-container {
z-index: 100000;
}
.fancybox-button {
width: 60px;
height: 60px;
background: transparent;
}
.fancybox-bg {
background: rgba(0, 0, 0, 0.8);
}
.fancybox-toolbar {
opacity: 1 !important;
visibility: visible !important;
}
Using one JS gallery on top of another JS gallery is bad, I know. But it’s better than using “Lightbox for Gallery & Image Block” plugin for sure. Because it embeds “Photoswipe Lightbox” library twice and it uses regular expression to parse all your page content on back-end, just to add “width” and “height” data attributes for links with images.
1 Like