Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #622491

    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

    #622562

    Ha it works in the support ticket but not in my enfold. Maybe the widget areas do not support the lightbox?

    #622612

    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,
    Yigit

    #622620

    I have updated to the latest version

    #623013

    Hey!

    Do you mind creating a temporary admin login and posting it here privately so we can look into it?

    Best regards,
    Yigit

    #623673

    Here is the log in

    #624684

    Are you guys still here?

    #625530

    Hi,

    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,
    Ismael

    #627569

    ok 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
    }

    #628317

    How do I resize the iframe so the content fits properly?

    #628807

    Hi,

    Set the type from image to iframe. Look for this part:

    type: 'image'
    

    .. replace it with:

    type: 'iframe'
    

    Best regards,
    Ismael

    #629324

    I need the window to open larger than what it is opening at. How do I make the iFrame window larger?

    #629703

    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!
    Ismael

    #629917

    http://kdm-testing.com/stahl/

    Please use this url, I moved it

    #630663

    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,
    Andy

    #630863

    I need to make it wider!!

    #630874

    This 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.

    #631292

    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

    #631477

    Now how do I hide it on mobile devices?

    #632627

    Hey!

    Add this in the Quick CSS field:

    @media only screen and (max-width: 767px) {
    .header_widget { display: none; }
    }
    

    Cheers!
    Ismael

Viewing 20 posts - 1 through 20 (of 20 total)
  • You must be logged in to reply to this topic.