Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • November 6, 2017 at 12:30 pm #873003
    kushtevatia

    Hey,
    On my webpage, I want to display a lightbox/pop-up containing text on clicking on an image. How can it be done on Enfold?

    Cheers

    November 6, 2017 at 11:29 pm #873425
    Yigit

    Hey,

    Please refer to this post – https://kriesi.at/support/topic/lightbox-for-mailchimp-form/#post-582439

    Best regards,
    Yigit

    November 7, 2017 at 8:05 am #873569
    kushtevatia

    Hey Yigit,
    I’m trying to add a lightbox. Similar to what happens when you click on an image. (A lightbox opens and the image is shown in full size.). However, instead of an image I’d like a text block.

    Thanks!

    November 7, 2017 at 8:20 am #873574
    kushtevatia

    I followed the steps you mentioned in the linked post. However, on clicking on the button, nothing comes up. Please let me know if I might have done something wrong.

    Thanks!

    November 7, 2017 at 9:12 am #873576
    Guenni007

    yes – it seem not to work this way. Testing it on Enfold 4.2

    i guess a load event is needed:

    function popup_script() { 
?>
<script type="text/javascript">
jQuery(window).load(function(){
	jQuery('.open-popup-link').magnificPopup({
	  type:'inline',
	  midClick: true
	});
});
</script>
<?php }
add_action('wp_footer', 'popup_script');
    • This reply was modified 7 years ago by Guenni007.
    November 7, 2017 at 9:41 am #873581
    Guenni007

    the first button only has a text-block pure in it
    the second button has the shortcode from the constallation beneath ( 1/2 containers with one heading left – and one textblock right)
    the class white-popup needs more css rules –
    a display:table or flex helps:

    .white-popup {
    position: relative;
    background: #FFF;
    padding: 20px;
    width: auto;
    max-width: 600px;
    margin: 20px auto;
    display: table;
}

    and if you are working with columns in the popup window – it might be a good idea to have some responsive rules for it:

    @media only screen and (max-width: 767px) {
.mfp-content .flex_column {
width: 100%;
padding: 10px !important;
margin: 0 !important
}
}

    https://webers-testseite.de/elegant/team/

    November 7, 2017 at 10:31 am #873593
    kushtevatia

    Hey Guenni007,

    The lightbox is working perfectly now.

    Thanks for your help!

    Could you also let me know how to add the resulting lightbox containing text to an image?

    Cheers!

    November 7, 2017 at 11:31 am #873610
    Guenni007

    well you see on the code element that it is a normal link with special link and class.
    so on code element you even can use avia generated buttons – the only thing to think of is that the wrapper gets the class set on options dialog and not the a-tag.
    So give to the avia button the class. popup

    link='manually,#test-popup3'    -     is the link to the div with the popup info
custom_class='popup'      -    is the class the wrapper of the a-tag gets -

    so what to do is create an avia-button with all you like
    insert in link your popup link ( #test-popup3 here)
    give the button the custom class: popup

    A shortcode of a button might see this way then ( i did this with line-break that you better can see the structure)

    [av_button 
label='PopUp Button …' 
link='manually,#test-popup3'  
size='large' 
position='left' 
icon_select='yes' 
icon_hover='aviaTBicon_hover' 
icon='ue837' 
font='entypo-fontello' 
color='theme-color' 
custom_bg='#444444' 
custom_font='#ffffff' 
custom_class='popup' ]

    so now we had to add the class to the anchor – the whole script is then:

    function popup_script() { 
?>
<script type="text/javascript">
jQuery(window).load(function(){
	jQuery('.popup .avia-button').addClass('open-popup-link');
	jQuery('.open-popup-link').magnificPopup({
	  type:'inline',
	  midClick: true
	});	
});
</script>
<?php }
add_action('wp_footer', 'popup_script');

    see test-page: https://webers-testseite.de/elegant/team/

    • This reply was modified 7 years ago by Guenni007.
    November 7, 2017 at 11:50 am #873616
    Guenni007

    on images the same thing

    create your image file with all you like
    link goes to manually : insert the popup id
    custom class for the image is : popup
    copy the shortcode for the codeblock-element

    but now be careful – i changed the class to the alb you want to use ( buttons , images) to only : popup
    because now an image and a button and and … so code now is:

    function popup_script() { 
?>
<script type="text/javascript">
jQuery(window).load(function(){
	jQuery('.popup .avia-button').addClass('open-popup-link');
        jQuery('.popup .avia_image').addClass('open-popup-link');
	jQuery('.open-popup-link').magnificPopup({
	  type:'inline',
	  midClick: true
	});	
});
</script>
<?php }
add_action('wp_footer', 'popup_script');
    November 7, 2017 at 11:58 am #873620
    Guenni007

    so on code element it might be this for an image:

    [av_image 
	src='https://home_url/wp-content/uploads/abc.jpg' 
	align='left' 
	link='manually,#popup-target4'
	overlay_opacity='0.4' 
	overlay_color='#000000' 
	overlay_text_color='#ffffff' 
	animation='no-animation' 
	custom_class='popup']
[/av_image]

<div id="popup-target4" class="white-popup mfp-hide">

	the shortcode of your popup window

</div>
    November 8, 2017 at 5:02 am #873987
    Rikard

    Hi,

    Thanks for helping out @guenni007, did you have any luck with the suggestions @kushtevatia?

    Best regards,
    Rikard

    November 8, 2017 at 8:11 am #874061
    kushtevatia

    Hey,

    Thanks for the help Guenni007!

    Cheers

    November 8, 2017 at 7:22 pm #874289
    Guenni007

    by the way

    you don’t need to generate the image or the button in the code element.

    Place the code maybe on the bottom of your layout – the mfp-hide makes it invisible.
    than create your alb element (Button or Image) in your layout – Link Target is manuall and the popup-ID
    custom-class has to be popup !

    so in the code-element is only:

    <div id="popup-target5" class="white-popup mfp-hide">
 - Your popup content - could be avia shortcode
</div>
    • This reply was modified 7 years ago by Guenni007.
  • Author
    Posts
Viewing 13 posts - 1 through 13 (of 13 total)
  • You must be logged in to reply to this topic.