
-
AuthorPosts
-
June 27, 2025 at 12:59 am #1485984
hi
I just took over a site that is using another theme together with Site Origin builder. (I am used to using enfold). I was having trouble with the lightboxes not working even though my images are set to open in a media file. Some of them work and some don’t, and sometimes the images seem to default back to no lightbox. I switched the theme to Enfold on a staging site, but the same thing is happening. I still have Site Origin installed since I don’t want to rebuild the whole site. Can you see if there is a conflict or what the issue is?
thanks for your help
NancyJune 27, 2025 at 8:08 am #1485999Hey Munford,
Thank you for the inquiry.
The images on the “mixed-media” page don’t have any links or are not wrapped inside a link tag. Unfortunately, we are not familiar with the SiteOrigin Builder and we are not sure how the images were added to the page, but you may need to edit them and make sure they include links that use the original image URL as the value.
Another option is to switch to the Advance Layout Builder and use image elements such as the Gallery or Masonry.
Best regards,
IsmaelJune 27, 2025 at 9:10 am #1486008Thanks for taking a look.
this is how the image is set up – it’s similar to Enfold (which I have used exclusively for years).
on the mixed media page: https://imgur.com/iqrN3T2 and https://imgur.com/1VgypnI
but on the front end I don’t see the link in the preview or page view.
on the paintings page, the first image is set up the same way, but the link is there –
in the preview it opens in lightbox: https://imgur.com/uYtdXbb and https://imgur.com/RLnBpBQ
but when I save a view the page, it opens the image in another page. The second image on that page is set up the same way but there doesn’t seem to be a link: https://imgur.com/yHRPIj7
I have gone back and forth through all the settings. The lightbox is enabled.
Any advice?
thanks
NancyJune 27, 2025 at 9:13 am #1486011Hi,
Thank you for the update.
The issue is with the other page builder. You have to edit the images there and set the URL or link. If it’s not available, you may need to manually wrap the images in a link tag then use the image URL as value. Please contact the plugin developer for additional assistance.
Best regards,
IsmaelJune 27, 2025 at 9:16 am #1486012thanks for your reply
but if you look at the images they are set with the url and media link. it’s just not working.June 27, 2025 at 9:26 am #1486013Hi,
The screenshots https://imgur.com/1VgypnI and https://imgur.com/iqrN3T2 were taken from the Media > Library, if we are not mistaken. The details or URL values shown there will not be automatically applied to a page created with the SiteOrigin builder.
Best regards,
IsmaelJune 27, 2025 at 10:20 am #1486018Those screenshots were from the image element itself, inside the page builder.
June 27, 2025 at 1:00 pm #1486035the enfold is working with anchors as icons and the corresponding href.
but you can have your own lightbox script for those pages – using the magnificPopup :
function mixed_media_lightbox() { ?> <script type="text/javascript"> window.addEventListener("DOMContentLoaded", function () { (function($){ $('.widget_media_image').magnificPopup({ delegate: 'img', type: 'image', removalDelay: 500, // to allow animated closing in ms mainClass: 'avia-popup mfp-zoom-in mfp-image-loaded mixed-media', midClick: true, gallery: { enabled:true }, image: { titleSrc: false, 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>'+ '</div>', }, callbacks: { elementParse: function(item) { item.src = item.el.attr('src').replace( /-\d*x\d*\./, '.' ); }, markupParse: function (template, values, item) { if ( item.el.closest('.panel-grid-cell').find('.widget_text').length ) { values.title = '<h3 class="heading">' + item.el.closest('.panel-grid-cell').find('.widget_text').html() + '</h3>'; } else { values.title = '<h3 class="heading">' + item.el.find('img').attr('title') + '</h3>'; } }, }, }); })(jQuery); }); </script> <?php } add_action('wp_footer', 'mixed_media_lightbox', 9999);
your img tags have no title nor alt attributes – but we can use the following description.
June 27, 2025 at 1:01 pm #1486036this is the main crux:
elementParse: function(item) { item.src = item.el.attr('src').replace( /-\d*x\d*\./, '.' ); },
in the callback function. The image link comes now from the src attribute.
because of that extra class on mainClass you can individually set :
#top .mixed-media .mfp-image-holder .mfp-content { max-width: 1200px; } #top .widget_media_image img { cursor: pointer; }
June 27, 2025 at 1:21 pm #1486038Now – what you have to do. : not all your images do have that widget_text
See Paintings Page. Or you have tried to do it with enfold lightbox implementation there. ?the script is working – but the shown title is not allways defined. the reason – see above.
Best would be to set an alt or title tag as fallback to all of your images. For SEO purpose it might be better to use the alt tag.
then you had to change the else condition to:values.title = '<h3 class="heading">' + item.el.find('img').attr('alt') + '</h3>';
June 27, 2025 at 2:16 pm #1486040thanks for your help. I will look into the options, I don’t really understand all.
I would like to know if it’s possible to globally make all the images open in a lightbox, based on a category maybe, so I don’t have to do into each image manually and change the settings. The site is not built properly (they should have used a masonry gallery) but I do think they want the whole thing rebuilt.
thanks for taking a look,
Nancy -
AuthorPosts
- You must be logged in to reply to this topic.