Hi Mike and Guenni007

Thanks a lot for your help and contributions.

Reply on Mike’s https://kriesi.at/support/topic/image-with-hotspots-that-open-image-in-lightbox/#post-1355277
This solution also works well.

Your new approach in using the tooltip text is a very nice idea. It’s more convenient to write and edit this text within the hotspot element than editing it in the child’s functions.php. WP authors without access to the functions.php would not able to edit this text if I used the initial approach.

I implemented Mike’s version (https://kriesi.at/support/topic/image-with-hotspots-that-open-image-in-lightbox/#post-1355413) on my website:

function popup_tooltips_with_links_erdgeschoss() { 
if(is_page(559)) {
?>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
(function($){
   $('#top.page-id-559 .av-image-hotspot_inner').each(function () {
   	var toolTip = $(this).closest('.av-image-hotspot').attr('data-avia-tooltip');
    var cleanTitle =  $(toolTip).text();
	$(this).attr('title', cleanTitle );
	$(this).magnificPopup({
    type: 'image',
    image: {
        titleSrc: 'title' 
    }
});
});
})(jQuery);
});
</script>
<?php }
									 }
add_action('wp_footer', 'popup_tooltips_with_links_erdgeschoss');

function popup_tooltips_with_links_obergeschoss() { 
if(is_page(561)) {
?>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
(function($){
   $('#top.page-id-561 .av-image-hotspot_inner').each(function () {
   	var toolTip = $(this).closest('.av-image-hotspot').attr('data-avia-tooltip');
    var cleanTitle =  $(toolTip).text();
	$(this).attr('title', cleanTitle );
	$(this).magnificPopup({
    type: 'image',
    image: {
        titleSrc: 'title' 
    }
});
});
})(jQuery);
});
</script>
<?php }
									 }
add_action('wp_footer', 'popup_tooltips_with_links_obergeschoss');

function popup_tooltips_with_links_dachgeschoss() { 
if(is_page(563)) {
?>
<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function() {
(function($){
   $('#top.page-id-563 .av-image-hotspot_inner').each(function () {
   	var toolTip = $(this).closest('.av-image-hotspot').attr('data-avia-tooltip');
    var cleanTitle =  $(toolTip).text();
	$(this).attr('title', cleanTitle );
	$(this).magnificPopup({
    type: 'image',
    image: {
        titleSrc: 'title' 
    }
});
});
})(jQuery);
});
</script>
<?php }
									 }
add_action('wp_footer', 'popup_tooltips_with_links_dachgeschoss');

Actually, there are three floor plans. That’s why I use the script three times (with slightly different function names) and address it to the corresponding page id.

For all of those who want to see how a house tour with floor plans might be realized with Enfold’s image with hotspots media element, here is the link:
http://www.ferienhaus-alpina.ch/hausbesichtigung

@Guenni007: I’ve also tried your version (https://kriesi.at/support/topic/image-with-hotspots-that-open-image-in-lightbox/#post-1355426) but it didn’t work. Like Mike’s report, the lightbox opens but no image is shown. Any idea how your version could run on my site?

Kind regards
Ueli

Yes, I would like it exactly like this site but in the middle

How do I achieve this? Is this a default enfold feature? If you can tell me the steps, that would be great.

Also, I know this is a new enfold 5.0 template but can I apply those animations to my existing site https://alexandere77.sg-host.com/ if i update to enfold 5.0? I love the animations

Hi Rikard,
I have tried restoring but I get critical errors. The host 123-reg say the problem is with the child theme I created for Enfold. Please can you look at my child theme functions,php code and see if it has errors. Apparently it is line 23. My child theme is called Orion I.T. Theme:
<?php

/*
* Add your own functions here. You can also copy some of the theme functions into this file.
* WordPress will use those functions instead of the original functions then.
*/
//set builder mode to debug
add_action(‘avia_builder_mode’, “builder_set_debug”);
function builder_set_debug()
{
return “debug”;
}

/* Add Custom class to all ALB elements */
add_theme_support(‘avia_template_builder_custom_css’);

/*
Woocommerce 3.0.0 Compatibility Fix
Remove Enfold’s custom functions that conflict with the new image display in WooCommerce 3.0.0
*/
global $woocommerce;
if( version_compare( $woocommerce->version, ‘3.0.0’, “>=” ) ) {
function avia_woocommerce_gallery_thumbnail_description($img, $attachment_id, $post_id, $image_class ) {
return $img;
}
function avia_woocommerce_post_thumbnail_description($img, $post_id){
return $img;
}
}

add_action( ‘woocommerce_single_product_summary’, function() {
echo ” – FREE SHIPPING IN THE UK!”;
}, 10);

Hi Nikko,
thx fory lour quick reply – I´ve tried e.g. Envira Gallery, Portfolio Filter gallery and other plugins. But they either they don´t have a good masonry display option or they do not to work with Enfold. Another WP plugin, “cube portfolio” did the job, but is not longer available. Also a workaround via portfolio like described here https://kriesi.at/support/topic/gallery-with-category-filter/ does not work for my purpose. I still need to filter just pics, not portfolio entries.

A simple filter function for the masonry portfolio is what I still need. And I know a lot of other enfold users who would really appreciate this as well. Would be great if you / somebody else can provide a solution acc.

In this context a question/idea: I use the plugin “Real Media Gallery” from devowl.io. With this I can assign images to multiple folder collections. May be there is a way to define within enfold masonry: “Use onle pics allocated to RM Gallery xyz”?

Thx again for your efforts & best regards Tilman

• This reply was modified 3 years, 10 months ago by oestersund.
• This reply was modified 3 years, 10 months ago by oestersund.

Thanks a lot! I thought it was may be an Enfold-setting, but you’re correct. Thanks for helping me out!

Thank you very much – got it. did not see that!
Great support as always from Enfold.
Anne

Hi Rikard,

Sorry but it still doesn’t work, the width of the main content is still 100% even if I have settled it at 70% in Enfold->General Layout->Dimensions.

Any other idea to fix this?

Thank you so much,

Kind regards,

Olivier

So that we don’t have any changes in the core of Enfold, everything has been restored back to original. We click through each page to restore the deleted entries in the post_meta. For this to work, we had to disable Custom Elements in the Settings (because otherwise some pages wouldn’t open even in the backend). We don’t really need the custom elements.

Still asking for control/feedback, gladly also in a test environment. We want to make sure that our solution strategy does not lead to further discrepancies in the database.