Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #820446

    Hi there,
    im using a portfolio raster to feature some VIMEO – videos.
    The portfolioitems use a custom link to vimeo.
    On click a lightbox opens and the video starts to play – works perfect.

    Now my Question:
    How can i display some Information below the video?
    I already read some threads about image captions in lightboxes:
    http://www.kriesi.at/support/topic/caption-within-lightbox-window/
    http://www.kriesi.at/support/topic/ (Purchase code hidden if logged out) /
    (and some others)
    But they are all about items from the media library, not about portfolio items.

    I think this issue has to do with the lightbox “magnific popup”
    http://dimsemenov.com/plugins/magnific-popup/

    When i inspect the rendered site in my brwoser there is no <figcaption> tag (or any child of it) in the DOM.

    Also i messed around a bit with the
    jquery.magnific-popup.js (also the minified version) But did not find the spot to put my monkey wrench on.

    Any suggestions where i can find the spot where the lightbox could display the caption?

    Thanks,
    Daniel

    #821849

    Hey JundG,
    Are you using this type of link to open your video in lightbox?
    http://www.kriesi.at/support/topic/lightbox-for-mailchimp-form/#post-582439

    Please include the url to the page in question so we can take a closer look and try to help.

    Best regards,
    Mike

    #830403

    Hi Mike,

    the site is now available at http://www.akkord-arbeiter.de/
    I build it locally on my computer, it took some time till going online – so sorry for the late reply.

    For opening the lightbox i use a standard portfolio raster with a vimeo-link.
    I am looking for a possibility to add a description under the videos in the lightbox.

    Where could i achive this ?

    Best Regards,
    Daniel

    #830623

    Ok, i am starting to get my hands on it.

    The file to work with isthemes/enfold/js/aviapopup/jquery.magnific-popup.min.js
    wich i think is the minified version of
    themes/enfold/js/aviapopup/jquery.magnific-popup.js
    My (already half fulfilled) plan is to copy the file to my childtheme and change
    it to show captions unter my iframe-vimeo-videos in the lightbox.
    The Lighbox used in enfold is called “magnific-popup” http://dimsemenov.com/plugins/magnific-popup/documentation.html

    So here my steps

    1. copy the themes/enfold/js/aviapopup/jquery.magnific-popup.js to the childtheme (same folder structure) – so the changes are update-save

    2. Edit the functions.php in the childtheme to overwrite the js- file of the parent theme.Add:

    function change_aviapopup() {
       wp_dequeue_script( 'avia-popup' );
       wp_enqueue_script( 'avia-popup-child', get_stylesheet_directory_uri().'/js/aviapopup/jquery.magnific-popup.js', array('jquery'), 2, true );
    }
    add_action( 'wp_enqueue_scripts', 'change_aviapopup', 100 );

    3. Edit thejquery.magnific-popup.js to add figcaption and other needed Elements to the DOM of the lightbox. These elements are normally shown when an image is shown in the lightbox – for iframes they are not. So we have to add them. For me it was in Line 1603:

    '<figcaption>'+
    							'<div class="mfp-bottom-bar">'+
    								'<div class="mfp-title"></div>'+
    								'<div class="mfp-counter"></div>'+
    							'</div>'+
    				'</figcaption>',

    4. Make the script fill the new DOM-Objects with caption Text
    WORK IN PROGRESS

    I’ll update this, when i am done. But it would be nice if you could help of cause.

    Cheers,
    Daniel

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

You must be logged in to reply to this topic.