checkbox to show lightbox or not - Support | Kriesi.at

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts

September 17, 2018 at 9:00 pm #1010973

you can see here how i have done it with conditional load on google maps.
https://webers-testseite.de/weber/youtube-links/

now i like to have it with image links showing youtube videos in a lightbox.
so if checkbox is checked the link is active – if not – no lightbox is shown.

I guess I’m a little out of line today. Can you help me ?

this is my code sofar – and i thought i can do it this way – but all i tested does not work:

function youtube_lightbox_script() { 
?>
<script>
(function($){
	$('<label><input class="youtube-privacy" type="checkbox" /> ja - ich habe die <a href="/datenschutz/">Datenschutzhinweise</a> bezüglich Youtube gelesen</label>').insertBefore('.youtube-link');
	$('.youtube-privacy').css({
		"width": "30px",
		"height": "30px",
		"position": "relative",
		"top": "7px",
		"padding-bottom": "10px"
	});
	$('.youtube-privacy:checkbox').prop('checked', false);

	$('.youtube-privacy:checkbox').change(function() {
		    if (this.checked) {
		              // link is active
			} else {
				// link does not work
			}
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'youtube_lightbox_script');

September 18, 2018 at 9:09 am #1011151

Dude

Participant

Hey Guenter,

Probably the easiest solution to make the link not clickable would be to use a css class. Use this css code:


#top .youtube-link a.lightbox-added{
  pointer-events: none;
  cursor: default;
}

to deactivate the link event by default. Then this code:


$('.youtube-privacy:checkbox').change(function() {
		    if (this.checked) {
		        $('#top .youtube-link a.lightbox-added').css({"pointer-events" : "auto", "cursor" : "auto" }); 
			} else {
		        $('#top .youtube-link a.lightbox-added').css({"pointer-events" : "none", "cursor" : "default" }); 
			}

to change it based on the checkbox state.

Best regards,
Peter

September 18, 2018 at 12:55 pm #1011239

Guenni007

Participant

That is what i said with :
I guess I’m a little out of line today.

i forgot to set the startpoint when page is loading for the pointer-event! ( like for the check-box that it is unchecked )
And i have to surround it with window load function – otherwise the pointer-event was not set because lightbox-added seems to be inserted later.

Thanks – can be closed and see Results here: https://webers-testseite.de/weber/youtube-links/

This is now realy GDPR ( DSGVO ) – conform!

September 18, 2018 at 12:58 pm #1011241

Guenni007

Participant

For those who are looking for a solution like this here is the final code:

function youtube_lightbox_script() { 
?>
<script>
(function($){
        $('<label><input class="youtube-privacy" type="checkbox" /> ja - ich habe die <a href="/weber/datenschutz/#youtube">Datenschutzhinweise</a> bezüglich Youtube gelesen</label>').insertBefore('.youtube-link:first');
     
        $('.youtube-privacy').css({
            "width": "25px",
            "height": "25px",
            "position": "relative",
            "top": "5px",
        });
    
    $(window).load(function(){
        $('.youtube-privacy:checkbox').prop('checked', false);
        $('#top .youtube-link a.lightbox-added ').css({
            "pointer-events": "none",
            "cursor": "default"
        })
        
        $('.youtube-privacy:checkbox').change(function() {
            if (this.checked) {
                $('#top .youtube-link a.lightbox-added').css({
                    "pointer-events" : "auto", 
                    "cursor" : "auto" 
                }); 
            } else {
                $('#top .youtube-link a.lightbox-added').css({
                    "pointer-events" : "none", 
                    "cursor" : "default" 
                }); 
            }
        });
    });
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'youtube_lightbox_script');

and here are the results which resources are loaded at page opening: