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

    Dear Enfold-Team,

    on creating lustwandler.at I realized, that the Lightbox does not support retina images. My site uses the WP Retina 2x for retina image handling.
    It is fairly easy to add support:

    1. ) avia.js

    (function($)
    {
      $.fn.avia_activate_lightbox = function(variables)
      {
    
       var defaults = {
        groups   :	['.avia-slideshow', '.avia-gallery', '.av-instagram-pics', '.portfolio-preview-image', '.portfolio-preview-content', '.isotope', '.post-entry', '.sidebar', '#main', '.main_menu'],
        autolinkElements:   'a.lightbox, a[rel^="prettyPhoto"], a[rel^="lightbox"], a[href$=jpg], a[href$=png], a[href$=gif], a[href$=jpeg], a[href*=".jpg?"], a[href*=".png?"], a[href*=".gif?"], a[href*=".jpeg?"], a[href$=".mov"] , a[href$=".swf"] , a:regex(href, .vimeo\.com/[0-9]) , a[href*="youtube.com/watch"] , a[href*="screenr.com"], a[href*="iframe=true"]',
        videoElements	:  'a[href$=".mov"] , a[href$=".swf"] , a:regex(href, .vimeo\.com/[0-9]) , a[href*="youtube.com/watch"] , a[href*="screenr.com"], a[href*="iframe=true"]',
        exclude   :	'.noLightbox, .noLightbox a, .fakeLightbox, .lightbox-added, a[href*="dropbox.com"]',
       },
    
       options = $.extend({}, defaults, variables),
    
       av_popup = {
        type:     'image',
    
            <strong>// Lustwandler.at: adding retina support</strong>
            retina: {
              // ratio: 2, // Increase this number to enable retina image support.
              // Image in popup will be scaled down by this number.
              // Option can also be a function which should return a number (in case you support multiple ratios). For example:
              ratio: function() { return window.devicePixelRatio === 1.5 ? 1.5 : 2  },
    
              replaceSrc: function(item, ratio) {
                return item.src.replace(/\.\w+$/, function(m) { return '@2x' + m; });
              } // function that changes image source
            },
            // end of Modification Lustwandler.at
    
    ….
    

    2.) The Magnific Popup
    The Magnific Popup bundled with Enfold is from 2013; replaced by the latest version. Still, there is a bug in Magnific Popup with retina images and the aspect ratio. Best solution I found up to now is to use the object-fit property.

    In magnificpopup.js:

        if(ratio > 1) {
         _mfpOn('ImageHasSize' + '.' + RETINA_NS, function(e, item) {
          item.img.css({
                  '-o-object-fit': 'contain',    // force aspect ratio
                  'object-fit': 'contain',
                  'max-width': item.img[0].naturalWidth / ratio,
                  'width': '100%'
          });
         });
    

    3.) And finally, my question
    I made these changes directly in the Enfold-theme, so with every update, I will have to apply those again. Do you have plans to update Enfold, so these modifications are not necessary any more or ist there a smart way to add those changes to a child theme without moving massive blocks of enfold code there?

    #700656

    Hey Elisabeth,

    Please use a child theme – http://kriesi.at/documentation/enfold/using-a-child-theme/. Then add following code to Functions.php file of your child theme in Appearance > Editor

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

    and move modified files inside /js folder

    We have informed our devs about your request :)

    Best regards,
    Yigit

    #709539

    Thanks, that worked out fine.

    Edit some days later:
    The solution was not quite perfekt, because in the admin dashboard one could not switch to the plaintext editor anymore. It seems to be necessary to add a !is_admin():

    // Load avia.js and the current version of magnific popup directly from our child theme
    function wp_change_aviajs() {
      if(!is_admin()){   // not for the WP Admin dashboard
        wp_dequeue_script( 'avia-default' );
        wp_dequeue_script( 'avia-popup' );
        wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true );
        wp_enqueue_script( 'avia-popup-child', get_stylesheet_directory_uri().'/js/aviapopup/jquery.magnific-popup.min.js', array('jquery'), 2, true );
      }
    }
    add_action( 'wp_print_scripts', 'wp_change_aviajs', 100 );
    • This reply was modified 7 years, 8 months ago by elisabeth.
    #709540

    Hey!

    You are welcome!

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Regards,
    Yigit

Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Magnific Popup Lightbox and lacking Retina-Support’ is closed to new replies.