-
Posts
-
Hey atst,
Have you tried something like this, adding “?iframe=true” to the end of a link to open it in lightbox.
Best regards,
Victoriaset the link of the hotspot as manually link.
see here. https://webers-testseite.de/image-with-hotspost-linking-to-youtube-in-iframes/
link for example with youtube options and at the end with iframe=true:
https://www.youtube.com/watch?v=38cMOweKcxM?autoplay=1&cc_load_policy=1&enablejsapi=1&ecver=2&playsinline=1&rel=0&showinfo=0&color=white&iv_load_policy=3&iframe=truehm – you can see my test-page above. there is the hot-spot and it works – this way.
and even more – the side navigation works on lightbox too ! switching between the videos in the lightboxhttps://webers-testseite.de/image-with-hotspost-linking-to-youtube-in-iframes/
Yes the link on the hotspot iworks, but i would like to add the link inside the tooltip. Link a button or some text.
on this case you had to change to click event and not on hover tooltip.
This is set in avia-modal.js in line 903ff/*highlight the modal sub el when hotspot is hovered*/ _self.hotspot_container.on('mouseenter', '.av-image-hotspot', function() { var el = $(this).data('modal_sub_el'); if(el) el.addClass('av-highlight-subel'); });maybe than it would be possible to have a link in the tooltip window opening on lightbox.
The problem then would be that the tooltip is itself a “popup-window” – but you like to open it in a new lightbox window.Hi,
There could be a popup class also, but I do not think that it will work based on the CSS z-index, right?
Best regards,
Basilisthis is not the solution – it is a styling point of view.
If you set the tooltip alway visible (see link above) the inner link (inner_tooltip) does not link in lightbox – allthough the image has the iframe=true thing.
So for me it would be nice to open the tooltip on click ( you will use than instead of mouseenter the click event) – and then click on the image in the tooltip to oben the lightbox.
But i do not realy know why the link does not open in lightbox.so we can force the links inside the inner_tooltip to open in lightbox by this snippet in functions.php of the child-theme:
add_action( 'wp_footer', 'ava_tooltip_script' ); function ava_tooltip_script() { ?> <script type="text/javascript"> (function($) { function b() { $(".inner_tooltip a").magnificPopup({ type: 'iframe', mainClass: 'avia-popup mfp-zoom-in', }); } $(window).load(function() { b(); }); })(jQuery); </script> <?php }so now see page: https://webers-testseite.de/image-with-hotspost-linking-to-youtube-in-iframes/
next problem i changed in avia-modal.js the ( i tried both lines ) from mouseenter to click
but it does not work (even after clearing all caches)
best solution was in my opinion if we let the mouseenter event – but
the window must stay open till a link is clicked in the inner tooltip.on line 1498 of avia.js :
$.AviaTooltip = function(options)do we have to change something additional to the avia-modal.js?
the thing is that the tooltip window (hotspot image on the bottom of my link) only arises when hovering the tooltip
it does not exist in the DOM till hovering – so my code here: Link has no influence on it.
Even the DOMNodeInserted function does not work hereso the one method works with permanent Tooltip Window open !
so we than go and do the rest with quick css:.avia-tooltip { opacity: 0; display: none !important; } .av-image-hotspot:hover .avia-tooltip { display: block !important; opacity: 1 !important; }this is what comes to functions.php of your child theme:
function ava_tooltip_script() { ?> <script type="text/javascript"> (function($) { function b() { $(".inner_tooltip a").magnificPopup({ type: 'iframe', mainClass: 'avia-popup mfp-zoom-in', }); } $(window).load(function() { b(); }); })(jQuery); </script> <?php } add_action( 'wp_footer', 'ava_tooltip_script' );see here: https://webers-testseite.de/image-with-hotspost-linking-to-youtube-in-iframes/
- You must be logged in to reply to this topic.