-
Posts
-
I am trying to add a lightbox link to a webpage in the header widget on this site http://kdmstaging.com/stahl/
I am using the extra header widget that displays a widget on the right side of the page.
This is the code I have in the widget,
Click here to contact us.
Why is this not functioning properly?
Thanks
Peter
Ha it works in the support ticket but not in my enfold. Maybe the widget areas do not support the lightbox?
Hey!
Can you please firstly update Enfold to the latest version 3.5.4 – http://kriesi.at/documentation/enfold/updating-your-theme-files/
Best regards,
YigitHey!
Do you mind creating a temporary admin login and posting it here privately so we can look into it?
Best regards,
YigitHi,
Sorry for the delay. Please remove the widget then use this in the functions.php file instead:
add_action( 'ava_after_main_menu', 'enfold_customization_header_widget_area', 1); function enfold_customization_header_widget_area() { $output = ' <div class="header_widget"></div> '; echo $output; } add_action('wp_footer', 'ava_custom_script_hwidget', 1); function ava_custom_script_hwidget() { ?> <script> (function($){ $('.header_widget').append('<a href="http://kdmstaging.com/stahl/wp-content/uploads/2016/03/phone..png" class="custom-widget">Click here to contact us.<img src="http://kdmstaging.com/stahl/wp-content/uploads/2016/03/phone..png"></a>'); $(window).load(function() { $('.custom-widget').magnificPopup({ type: 'image' }); }); })(jQuery); </script> <?php }After that, use the following to style the widget:
.header_widget { position: absolute; z-index: 10000; right: 20px; top: 20px; } .mfp-ready .mfp-figure { opacity: 1; }Best regards,
Ismaelok now what I am really attempting to do is have this page pop up, http://kdm-testing.com/stahl/?page_id=1532
But when I replace the url from what you provided me I get an error that says,
THE IMAGE COULD NOT BE LOADED
add_action( ‘ava_after_main_menu’, ‘enfold_customization_header_widget_area’, 1);
function enfold_customization_header_widget_area() {
$output = ‘
<div class=”header_widget”></div>
‘;
echo $output;
}add_action(‘wp_footer’, ‘ava_custom_script_hwidget’, 1);
function ava_custom_script_hwidget() {
?>
<script>
(function($){
$(‘.header_widget’).append(‘Click here to contact us.‘);$(window).load(function() {
$(‘.custom-widget’).magnificPopup({
type: ‘image’
});
});
})(jQuery);
</script>
<?php
}Hi,
Set the type from image to iframe. Look for this part:
type: 'image'.. replace it with:
type: 'iframe'Best regards,
IsmaelI need the window to open larger than what it is opening at. How do I make the iFrame window larger?
Hey!
We checked the site but the link still points to the phone image instead of the page. Please add the url then we’ll check it again.
Cheers!
IsmaelPlease use this url, I moved it
Hi,
you can increase it’s height by using this code inside Quick CSS field:
.mfp-iframe-scaler iframe { height: 600px; }Adjust as needed.
Best regards,
AndyThis does not function well. Why is this so hard to do. I just want to show all 4 of the locations. But it has to center in the screen and look nice.
Hi,
then why not add a width value to my code? simply use this:
.mfp-iframe-scaler iframe { width: 1025px; max-width: 1025px; }and adjust as needed.
Best regards,
Andy
- You must be logged in to reply to this topic.