Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1288493

    Hello,
    on the site: https://protom-education.com/vocabulary_dgs/

    individual vocabulary words can be clicked on to display them in a video as a gesture (Sign Language). Now the respective vocabulary should be displayed above the video (lightbox mode) as a title, so that the context of the video is established. The page is currently being built and there is currently a video as a placeholder for all vocabulary.

    The video is integrated via this code: <span style=”font-size: 14pt; font-family: verdana, geneva, sans-serif;”>abgeschreckt sein</span>

    Anybody there who knows how it works? Thanks : )

    #1289301

    Hey rallegrafix,

    So you want to add the words from the link, above the video in the lightbox? If so, then that might be possible, but if would require heavy customisation to the theme, and would be out of scope of theme support.

    Best regards,
    Rikard

    #1289314

    Hey,
    for me, this is where the question comes in, using the above code (<span style=”font-size: 14pt; font-family: verdana, geneva, sans-serif;”>abgeschreckt sein</span>)
    How can a caption be placed as a short text UNDER the video.

    Is there a solution for this ; )?
    Best regards,
    Gabi

    #1289788

    Hi Gabi,

    My answer above applies to your question as well. It might be possible, but it would be out of scope of theme support.

    Best regards,
    Rikard

    #1289806

    first – to have a high specific selector it might be better to have a unique ID or Class at one parent-element of all those links – f.e. a custom iD to the color-section that is now named : after_submenu and contains all your links.

    can you please post the inserted phrase in the text-block – did you do that all manually?
    i see on all the titel=”Text” – why don’t you give the correct title to each post? – but we don’t need it for a custom lightbox markup

    https://webers-testseite.de/protom/

    After that i will adjust the code for you .

    • This reply was modified 3 years, 9 months ago by Guenni007.
    #1289822

    We will have a top-bar then – and to preserve the default terminology i have in it the mfp-title.
    First insert this to quick css:

    #top .mfp-top-bar {
        position: absolute;
        top: -60px;
        background-color: rgba(0,0,0,0.3);
        padding: 10px 20px 5px;
        z-index: 2000;
    }

    then go to your child-theme functions.php and add:
    (This is the code for your setting now – if you gave to that color-section a unique ID replace the “#after_submenu” )

    function lightbox_fuer_gebaerden_filme() { 
    ?>
    <script type="text/javascript">
    (function($){
    $(window).on('load', function () {
      $('#after_submenu .avia_textblock').magnificPopup({
    	delegate: 'a',
    	type: 'iframe',
    	iframe: {
    		markup: '<div class="mfp-iframe-scaler">'+
    					'<div class="mfp-close"></div>'+
    					'<div class="mfp-top-bar">'+
    						'<div class="mfp-description">'+
    							'<div class="mfp-title"></div>'+
    						'</div>'+
    					'</div>'+
    					'<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+
    				'</div>',
    	},
    	closeOnContentClick:  false,
    	midClick:             true,
    	gallery: { enabled: true, },
    	callbacks: {
    		change: function() {
    			$(this.content).find('.mfp-title').html('<h2>' + $(this.currItem.el).text() +'</h2>');
    		},
    	},
      }); 
    });
    })(jQuery);
    </script>
    <?php 
    }
    add_action('wp_footer', 'lightbox_fuer_gebaerden_filme');

    Now the content of your text will go as h2 above the iframes – if you like to have different tags there – just replace h2

    #1289825

    PS: wenn es sich nur um diese Seite ( bzw ist ja ein single post) könnten wir das ganze noch nur für diese Seite setzen.
    z.b #top.postid-3432 .mfp-top-bar
    und if(is_single(3432)){ … }

    und da du ja ohnehin noch in alle nochmal rein musst (ist momentan ja nur das Angst Video zu sehen) , um die Links zu setzen, – du brauchst hierfür nicht mehr das addendum “?iframe=true” setzen, da wir ja unseren eigenen Trigger zur Auslösung der Lightbox definiert haben. Für SEO wäre es schon besser du würdest dann auch den Title richtig setzen – obwohl wir Ihn ja momentan nicht benötigen.
    Innerhalb der Text Box reicht es wenn du die Begriffe so setzt:

    <a href="/wp-content/uploads/Future-12917-1.mp4" target="_blank" rel="noopener">etwas anderes</a>
    


    PPS:

    – die spans benötigst du auch nicht, das würde ich über quick css auf einmal setzen:

    #after_submenu .avia_textblock p {
    	font-weight: bold;
    	font-size: 14pt; 
    	font-family: verdana, geneva, sans-serif;
    }

    – damit die Video Galerie nun nur innerhalb eines Anfangsbuchstaben rotieren ( loop ) können wir Gruppen setzen.

    #1289850
    This reply has been marked as private.
    #1289855

    Hey Gabi,

    Glad @guenni007 could help. Please note that he is a super helpful participant therefore if you would like him to see your messages, please do not set them to private :)

    Cheers!
    Yigit

    #1289859

    Well Enfold-User – you are not the creator of this topic – so it would be good I could develop some code based on your site. This is actually always the best approach, since as in the case of the example above there was no title at the anchor – a standard markup would not have been useful there.

    Sadly it is closed the issue.
    you had to remove the ?iframe=true addon or better now give to the color-section the custom-class: noLightbox – this hampers the enfold lightbox.

    you can see that on my text-page: https://webers-testseite.de/protom/ on “besorgt” – allthough it got that addendum ?iframe=true – the enfold classes are not built on the anchor.

    #1290076

    Thanks to all. Great that you helped us!

Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Title should be displayed above video’ is closed to new replies.