Tagged: , , , ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • October 16, 2016 at 4:48 pm #699644
    elisabeth

    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?

    October 18, 2016 at 2:29 pm #700656
    Yigit

    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

    November 7, 2016 at 11:04 pm #709539
    elisabeth

    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 8 years, 1 month ago by elisabeth.
    November 7, 2016 at 11:08 pm #709540
    Yigit

    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

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