Tagged: image with hotspots
-
AuthorPosts
-
June 12, 2022 at 10:13 pm #1354991
Dear Enfold support
I created a house tour with the image with hotspots media element. The image is a svg file that shows a floor plan and the hotspots are placed on the different rooms. If you click on a hotspot, Enfold‘s native lightbox opens an image of the corresponding room. Everything works well. See link to website in private content.
Is there a way that the lightbox also shows a caption like it does in a masonry gallery for example? From inside the element’s settings it‘s not possible but you might have an idea how to customize the code.
Kind regards
UeliJune 12, 2022 at 10:39 pm #1354995Hey Ueli,
Thanks for your question, the lightbox has an empty title field for your hotspot images, please try adding your text in the image title field in the media library, or if the hotspot image links were added as html you could add the title attributetitle="your title text"
Best regards,
MikeJune 13, 2022 at 6:12 pm #1355078Hi 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
UeliJune 14, 2022 at 2:05 am #1355114Hi,
Thank you for the feedback, I examined closer on my demo site and found that by entering the image URL directly the WordPress media library meta fields are not called like they are when a gallery element is, so I don’t see a way to get the title from the link.
But the following script will allow you to add specific titles to each hotspot and show it in the lightbox.
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:function custom_hotspot_title_script() { ?> <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');
and adjust the titles to suit, for example for hotspot 1, change
$('.av-image-hotspot-1 a').attr('title','hotspot-1');
to$('.av-image-hotspot-1 a').attr('title','custom title for hotspot 1');
I assume that this is your only hotspot element on your site, if not them we can make this script work on this one page only by adding page IDs to it.Best regards,
MikeJune 14, 2022 at 11:41 pm #1355259Hi 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.
June 15, 2022 at 12:18 am #1355262but this
(is_page(PAGE ID 3))
really works ?
guess this will be the correct way:(is_page(3))
or if you got names for those pages :(is_page('contact'))
June 15, 2022 at 1:01 am #1355272@guenni007: PAGE ID 1, PAGE ID 2 and PAGE ID 3 are just placeholders!
June 15, 2022 at 2:09 am #1355277Hi,
Thanks for the feedback, your approach seems fine, another way would be to add the page ID to the title attribute lines like this:function custom_hotspot_title_script() { ?> <script> (function($){ $('#top.page-id-1 .av-image-hotspot-1 a').attr('title','hotspot-1'); $('#top.page-id-1 .av-image-hotspot-2 a').attr('title','hotspot-2'); $('#top.page-id-1 .av-image-hotspot-3 a').attr('title','hotspot-3'); $('#top.page-id-1 .av-image-hotspot-4 a').attr('title','hotspot-4'); $('#top.page-id-1 .av-image-hotspot-5 a').attr('title','hotspot-5'); $('#top.page-id-1 .av-image-hotspot-6 a').attr('title','hotspot-6'); $('#top.page-id-1 .av-image-hotspot-7 a').attr('title','hotspot-7'); $('#top.page-id-1 .av-image-hotspot-8 a').attr('title','hotspot-8'); $('#top.page-id-2 .av-image-hotspot-1 a').attr('title','hotspot-1'); $('#top.page-id-2 .av-image-hotspot-2 a').attr('title','hotspot-2'); $('#top.page-id-2 .av-image-hotspot-3 a').attr('title','hotspot-3'); $('#top.page-id-2 .av-image-hotspot-4 a').attr('title','hotspot-4'); $('#top.page-id-2 .av-image-hotspot-5 a').attr('title','hotspot-5'); $('#top.page-id-2 .av-image-hotspot-6 a').attr('title','hotspot-6'); $('#top.page-id-2 .av-image-hotspot-7 a').attr('title','hotspot-7'); $('#top.page-id-2 .av-image-hotspot-8 a').attr('title','hotspot-8'); $('#top.page-id-2 .av-image-hotspot-9 a').attr('title','hotspot-9'); $('#top.page-id-2 .av-image-hotspot-10 a').attr('title','hotspot-10'); $('#top.page-id-2 .av-image-hotspot-11 a').attr('title','hotspot-11'); $('#top.page-id-2 .av-image-hotspot-12 a').attr('title','hotspot-12'); $('#top.page-id-2 .av-image-hotspot-13 a').attr('title','hotspot-13'); $('#top.page-id-2 .av-image-hotspot-14 a').attr('title','hotspot-14'); $('#top.page-id-2 .av-image-hotspot-15 a').attr('title','hotspot-15'); $('#top.page-id-2 .av-image-hotspot-16 a').attr('title','hotspot-16'); $('#top.page-id-2 .av-image-hotspot-17 a').attr('title','hotspot-17'); $('#top.page-id-3 .av-image-hotspot-1 a').attr('title','hotspot-1'); $('#top.page-id-3 .av-image-hotspot-2 a').attr('title','hotspot-2'); $('#top.page-id-3 .av-image-hotspot-3 a').attr('title','hotspot-3'); $('#top.page-id-3 .av-image-hotspot-4 a').attr('title','hotspot-4'); $('#top.page-id-3 .av-image-hotspot-5 a').attr('title','hotspot-5'); $('#top.page-id-3 .av-image-hotspot-6 a').attr('title','hotspot-6'); $('#top.page-id-3 .av-image-hotspot-7 a').attr('title','hotspot-7'); $('#top.page-id-3 .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');
but I can’t say that one way is better than the other, I guess it’s just preference.
Best regards,
MikeJune 15, 2022 at 12:00 pm #1355322and hotspot-i is a placeholder in
attr('title','hotspot-i')
too?June 15, 2022 at 1:42 pm #1355340Hi,
Yes, I didn’t know what title he would want for each image and I wanted a different title for each image when I tested so that I knew it was working correctly.
I had thought of getting the tooltip text (data-avia-tooltip) and adding it to the lightbox title, but he is not using the tooltip field so “data-avia-tooltip” was empty.
I believe getting each hotspot tooltip and adding it to the lightbox title should be something like this:(function($){ $('.av-image-hotspot a').each(function () { var toolTip = $(this).parents('div').eq(1).find('.av-image-hotspot').attr('data-avia-tooltip'); $(this).attr('title', toolTip ); $(this).magnificPopup({ type: 'image', image: { titleSrc: 'title' } }); }); })(jQuery);
but it’s not working quite as expected, do you have any ideas? Thanks Guenni007
Best regards,
MikeJune 15, 2022 at 10:18 pm #1355407i had to see the page it belongs. When seeing numbers on recurring elements i tend to use an index in each function.
But it is hard to give advice without the concrete page – so maybe Ueli send me an email if he does not like to make the link public.Is it similiar to that demo page: https://kriesi.at/themes/enfold-restaurant/reservations/ but with links on the tooltips ?
try something like this:
function popup_tooltips_with_links() { ?> <script type="text/javascript"> (function($){ $(window).on('load', function(){ $('.av-image-hotspot_inner').magnificPopup({ type: 'image', mainClass: 'avia-popup', closeOnContentClick: false, midClick: true, gallery: { enabled: true }, callbacks: { markupParse: function (template, values, item) { values.title = item.el.closest('.av-image-hotspot').attr('data-avia-tooltip'); }, }, }); $(document).on('click', '.popup-modal-dismiss', function (e) { $.magnificPopup.close(); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'popup_tooltips_with_links');
See: https://enfold.webers-webdesign.de/tooltips/
( i did not want on that lightbox a counter – so i got my own markup here )If you do not like to show the tooltip:
.avia-tooltip.av-tt-hotspot { display: none !important; }
June 16, 2022 at 2:13 am #1355413Hi,
Thanks for sharing Guenni007, I see this working on your site, but on my site, it was opening the overlay but not the image, but I didn’t get any error messages.
But thanks to you I was able to use some of your code to adjust mine and get it working to use the hotspot tooltip as the lightbox title.function popup_tooltips_with_links() { ?> <script type="text/javascript"> window.addEventListener('DOMContentLoaded', function() { (function($){ $('#top.page-id-1386 .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');
In the above code you’ll see that I added
window.addEventListener('DOMContentLoaded', function() { });
this is because on my test site I’m loading the scripts in the header before jQuery, I included it here should someone in the future be loading jQuery in the footer.
I also added a page ID so it will only work on my test page.
I also wanted to remove the tags from the titles so I added another variablevar cleanTitle = $(toolTip).text();
Best regards,
MikeJune 16, 2022 at 4:49 am #1355426As said above – i had to see the concerning DOM to give exact advice.
i actually found the takeover of the tags quite nice. So you have even more design options.
i don’t know why my code is not working on your test page, because the structure has not been changed to Enfold5.
The difference is – that i use the magnificPopup api to give the popup title a different source.Maybe it is because i set the titleSrc to false and have my own markup ( to avoid lightbox counter )
function popup_tooltips_with_links() { ?> <script type="text/javascript"> (function($){ $(window).on('load', function(){ $('.av-image-hotspot_inner').magnificPopup({ type: 'image', mainClass: 'avia-popup', closeOnContentClick: false, 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: { markupParse: function (template, values, item) { values.title = item.el.closest('.av-image-hotspot').attr('data-avia-tooltip'); }, }, }); $(document).on('click', '.popup-modal-dismiss', function (e) { $.magnificPopup.close(); }); }); })(jQuery); </script> <?php } add_action('wp_footer', 'popup_tooltips_with_links');
June 16, 2022 at 12:29 pm #1355481Hi,
I see this makes sense, using the magnificPopup api and your own markup is a good solution, thanks for sharing.Best regards,
MikeJune 17, 2022 at 4:00 pm #1355617Hi 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
UeliJune 17, 2022 at 6:22 pm #1355631this is not important – if something is running – do not change it
on my page that works – but it seems to be easier to setup a new magnificPopup than to overwrite an existing one. i tried to redifine that popup – and mikes code let the code untouched and only give the av-image-hotspot_inner a title- This reply was modified 2 years, 4 months ago by Guenni007.
June 19, 2022 at 1:14 am #1355743Thanks Guenni007
I can live with Mike‘s solution.
Kind regards
UeliJune 19, 2022 at 10:19 am #1355750Hi,
Thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.
Best regards,
RikardJune 25, 2022 at 11:46 pm #1356504Hi Rikard
You can close the topic. Thanks for Mike’s and Guenni007’s support.
Kind regards
UeliJune 26, 2022 at 12:51 am #1356507Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Image with hotspots that open image in lightbox’ is closed to new replies.