Hi Rikard
You can close the topic. Thanks for Mike’s and Guenni007’s support.
Kind regards
Ueli

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

Hi Mike

Excellent! It works like a charm.

I have 3 floor plans on 3 different pages. So, the hotspot element is used three times. That’s why I completed your code with if elseif statements and is_page(PAGE ID) conditionals:

function custom_hotspot_title_script() {
if(is_page(PAGE ID 1)) {
?>
  <script>
(function($){
$('.av-image-hotspot-1 a').attr('title','hotspot-1');
$('.av-image-hotspot-2 a').attr('title','hotspot-2');
$('.av-image-hotspot-3 a').attr('title','hotspot-3');
$('.av-image-hotspot-4 a').attr('title','hotspot-4');
$('.av-image-hotspot-5 a').attr('title','hotspot-5');
$('.av-image-hotspot-6 a').attr('title','hotspot-6');
$('.av-image-hotspot-7 a').attr('title','hotspot-7');
$('.av-image-hotspot-8 a').attr('title','hotspot-8');
$('.av-image-hotspot a').magnificPopup({ 
    type: 'image',
    image: {
        titleSrc: 'title' 
    }
});
})(jQuery);
</script>
  <?php
}
elseif (is_page(PAGE ID 2)) {
?>
  <script>
(function($){
$('.av-image-hotspot-1 a').attr('title','hotspot-1');
$('.av-image-hotspot-2 a').attr('title','hotspot-2');
$('.av-image-hotspot-3 a').attr('title','hotspot-3');
$('.av-image-hotspot-4 a').attr('title','hotspot-4');
$('.av-image-hotspot-5 a').attr('title','hotspot-5');
$('.av-image-hotspot-6 a').attr('title','hotspot-6');
$('.av-image-hotspot-7 a').attr('title','hotspot-7');
$('.av-image-hotspot-8 a').attr('title','hotspot-8');
$('.av-image-hotspot-9 a').attr('title','hotspot-9');
$('.av-image-hotspot-10 a').attr('title','hotspot-10');
$('.av-image-hotspot-11 a').attr('title','hotspot-11');
$('.av-image-hotspot-12 a').attr('title','hotspot-12');
$('.av-image-hotspot-13 a').attr('title','hotspot-13');
$('.av-image-hotspot-14 a').attr('title','hotspot-14');
$('.av-image-hotspot-15 a').attr('title','hotspot-15');
$('.av-image-hotspot-16 a').attr('title','hotspot-16');
$('.av-image-hotspot-17 a').attr('title','hotspot-17');
$('.av-image-hotspot a').magnificPopup({ 
    type: 'image',
    image: {
        titleSrc: 'title' 
    }
});
})(jQuery);
</script>
  <?php
}
elseif (is_page(PAGE ID 3)) {
?>
  <script>
(function($){
$('.av-image-hotspot-1 a').attr('title','hotspot-1');
$('.av-image-hotspot-2 a').attr('title','hotspot-2');
$('.av-image-hotspot-3 a').attr('title','hotspot-3');
$('.av-image-hotspot-4 a').attr('title','hotspot-4');
$('.av-image-hotspot-5 a').attr('title','hotspot-5');
$('.av-image-hotspot-6 a').attr('title','hotspot-6');
$('.av-image-hotspot-7 a').attr('title','hotspot-7');
$('.av-image-hotspot-8 a').attr('title','hotspot-8');
$('.av-image-hotspot a').magnificPopup({ 
    type: 'image',
    image: {
        titleSrc: 'title' 
    }
});
})(jQuery);
</script>
  <?php
}
}
add_action('wp_footer', 'custom_hotspot_title_script');

The code seems to work well but I’m not sure if it is state of the art. Maybe you can provide a shorter version that does the same job?

Kind regards
Ueli

• This reply was modified 2 years, 5 months ago by Ueli.

Hi Ismael

Right now, I can live with the current state. It might be a claim or a goal for Enfold‘s developers to bring the accordion‘s behavior to perfection in a future update.

Thank you very much for your help and your patience with a picky customer.

Kind regards
Ueli

Hi Guenni

Do I understand you correctly? I just have to make my customizations in a copy of the new class-avia-masonry.php and upload that altered file to the enfold-child/shortcodes folder and then it is used instead of the original file? Do I also have to create a subfolder avia-shortcode-helpers because the original file is in a directory called like that?

And what exactly do you want to explain with…
if ( ! class_exists( 'avia_masonry_old' ) )
…in the older file? I found that code but what exactly does it? If I have to work with the new file, why does the older file still exist?

Sorry, I just know little basics of PHP and don’t understand the concept of classes yet.

Kind regards
Ueli

Hi Ismael
The code looks now like this…

 //check if toggle title is in viewport. if not scroll up
				    var el_offset = content.offset().top,
				        scoll_target = el_offset - 50 - parseInt($('html').css('margin-top'),10);
				    
				        $scoll_target_offset = $(window).width() < 768 ? 10 : 100;
$('html:not(:animated),body:not(:animated)').animate({scrollTop: scoll_target - $scoll_target_offset},200);

…but it doesn’t work. I can open and close one toggle but no other toggle can be opened.
Kind regards
Ueli

Hi Mike

OK, I prefer the first approach while assigning the script to the pages where it is needed.
Thanks for your and Ismael’s help.

Kind regards
Ueli

Hi Mike

That approach also works well. How does the code look like if I want to affect a second and third anchor – e. g. #beitraege and #berichte?

Kind regards
Ueli

Hi Mike

Thanks! Your solution seems to work on all major browsers and I might live with that scrolling approach. But if the header isn’t sticky, like on smaller screens (width less than 768px), there must be a smaller offset. The code needs to be completed with a dependency of the screen width. For example, if the screen width is 768px or more then the offset is 80px and if the screen width is less than 768px then the offset is 10px. How can this be achieved?

Kind regards
Ueli

Hi Ismael

Thanks for your clarification. The modified JS file is now loaded correctly from my Child Theme directory.

I will open a new thread for my additional question even though I see it as a part of this topic because it is caused by the solution you have provided.

Kind regards
Ueli

Hi Ismael

It’s definitely not working correctly! Of course, I always purge the cache or remove the browser history before checking the page.

Based on your screenshot, I assume you were using the Chrome browser and you were logged in the WordPress backend while testing the site. I’ve just found out if you do so, the issue seems gone. But if you are not logged in the backend while testing the site, the sticky header covers the title most of the time. However, if I repeat the test over and over again, it very rarely works. This observation applies to Chrome. With Firefox it doesn’t really matter if you are logged in the backend or not. Most of the times, the title stays covered.

So please test the site again without being logged in the backend.

Kind regards
Ueli

Hi Ismael

I put the content into a color section, removed the ID “webcams” from the h2 title tag and applied it to the color section. The issue still consists.

I have just realized that on Enfold’s Support Website anchor IDs seem to work properly with the sticky header. See further details in Private Content.

I guess that Enfold’s Support Forum also runs with the Enfold Theme. So why does it work there but not on my website?

Kind regards
Ueli

Hi Rikard
You can close the topic
Kind regards
Ueli

Hi Ismael

Thanks for your new approach but it’s still not really working reliably. If I click from toggle to toggle, sometimes the toggle is below the sticky header but sometimes it’s still covered. I tested on incognito mode with the latest Firefox and Chrome desktop browsers on Windows 10. Interestingly, the two browsers do not behave identically. That means the same toggle can be covered in Firefox whereas it’s visible on Chrome and vice versa. It becomes even stranger if I repeat the test several times. Toggles that have been visible are covered now. At least, it seems to work on the Safari browser with iPadOS.

I made two screen videos with Firefox and Chrome. Please see links in Private Content.

Kind regards
Ueli

Hi Ismael
The confusion’s getting bigger!
Your last post refers to the first issue I’ve mentioned in this topic. This was already solved by your post from September 23 (https://kriesi.at/support/topic/accordion-toggles-deeplinking/#post-1322006).
Since weeks I’m talking about the second issue within this topic which I explained firstly on my post from October 15 and November 1 (https://kriesi.at/support/topic/accordion-toggles-deeplinking/#post-1327294). You provided then a solution with a PHP function (avf_header_setting_filter_mod), that doesn’t work so far. In my post from December 3, I specified the issue with a video, because your team member Mike got involved in this thread (https://kriesi.at/support/topic/accordion-toggles-deeplinking/#post-1331474).
On March 9, you specified your solution but it hasn’t the expected impact yet. On desktop browsers, the sticky header still covers the toggles (anchor link) of the accordion. In my last post from March 13 I’ve tried to point out that your PHP function might not be reloaded or reinitialized properly if you click from toggle to toggle within the same browser window/tab. It only seems to work properly if you copy the URL of a toggle in the address bar of a new browser window/tab. Then the toggle is at the defined scroll-offset position (according to the PHP function) below the sticky header.
I hope that it is clear now, what I mean and I really hope that there is a reliable solution very soon.
Kind regards
Ueli