Image with hotspots that open image in lightbox

Hi Mike

It exactly is the problem that the lightbox has an empty title field. Even though I add text in the image title field in the media library, that text won’t be displayed as a caption in the lightbox.

Just to be clear how the image with hotspots media element opens image-links in the lightbox. Within the settings of a specific hotspot I set under “Anvanced” the hotspot link to manually, add the link of the image that has to be opened in the lightbox and set the link to be opened in the same window (see screenshot in private content).

On the frontend the link of hotspot number 7 looks for example like this:
<a href="https://www.mydomain.com/wp-content/uploads/2021/10/seminarraum.jpg" class="av-image-hotspot_inner lightbox-added">7</a>
If the link is an image, Enfold adds automatically the class lightbox-added by default.
If the link is a webpage…
<a href="https:// www.mydomain.com " class="av-image-hotspot_inner">7</a>
…then there is no class lightbox-added.
So, the class lightbox-added triggers the lightbox.

The whole concept of the image with hotspots media element is different to the masonry gallery media element where you have thumbnail images with the title attribute – taken from the media library – that is obviously sent to the lightbox. The image with hotspots media element only shows hotspots made with CSS that have no title attribute of the image they are linking to. That’s why no title can be sent to the lightbox.

At least this is my interpretation of what’s going on and it seems to be complicated.

Is there still a way to have captions if I link from a hotspot to an image that opens in the lightbox?

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, 4 months ago by Ueli.

@guenni007: PAGE ID 1, PAGE ID 2 and PAGE ID 3 are just placeholders!

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

Thanks Guenni007
I can live with Mike‘s solution.
Kind regards
Ueli

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