Cannot use zoom for lightbox images on phones

Feature
22

Well I guess if we are not going with adding an actual pinch to zoom to the lightbox, which would have been a more elegant solutions. I don’t mind playing the viewport game.

The following code will enable zoom when a lightbox open and disable zoom when lightbox closes.
I tested it on my Nexus 4 by connecting it to my desktop and paste the code in the remote console(which is a neat feature of chrome) .

And it worked quite nicely.

It is not a PR ready, not sure where would you put the helper I wrote setMetaViewport, perhaps
Discourse.Utilities

The viewport meta tag has no affect on desktop browsers as far as I can tell.
would need a check to only call setMetaViewport when it is actually has affect…

The Code Attached below as a Gist

/**
Author: Lidlanca 2014
SetMetaViewport
Update viewport meta tag, to dynamically change scale properties such as 
maximum-scale or minimum-scale or user-scalable
 
Parameters
max_min String "max" | "min"
rate String "1.0"  
userSacleble String "yes" | "no"
 
Example setMetaViewport("max","5.0","yes");
 
**/
function setMetaViewport(max_min,rate,userScaleble){
  if ( !(meta_viewport = $("meta[name='viewport']")) ){ return false; }
  meta_viewport_content = meta_viewport.attr("content");
  if (max_min == "max" || max_min == "min"){
    mm_str = (max_min=="max"? "maximum" : "minimum");
    re = new RegExp( mm_str + "-scale=\\d+.\\d+")
    new_val =  meta_viewport_content.replace(re, mm_str + "-scale=" + rate.toString()); //replace value of min or max
  }
  if (userScaleble && (m = userScaleble.match(/^yes|no$/) ) ){ 
    new_val = new_val.replace(/user-scalable=(no|yes)/,"user-scalable=" + m[0]);
  }
  return $("meta[name='viewport']").attr("content",new_val);
}
 
 
 
//original file 
///app/assets/javascripts/discourse/lib/lightbox.js
Discourse.Lightbox = {
  apply: function($elem) {
    $LAB.script("/javascripts/jquery.magnific-popup-min.js").wait(function() {
      $("a.lightbox", $elem).each(function(i, e) {
        var $e = $(e);
        // do not lightbox spoiled images
        if ($e.parents(".spoiler").length > 0 || $e.parents(".spoiled").length > 0) { return; }
 
        $e.magnificPopup({
          type: "image",
          closeOnContentClick: false,
 
          callbacks: {
            open: function() {
              setMetaViewport("max","4.0","yes"); //allow user to zoom  on open
              var wrap = this.wrap,
                  img = this.currItem.img,
                  maxHeight = img.css("max-height");
 
              wrap.on("click.pinhandler", "img", function() {
                wrap.toggleClass("mfp-force-scrollbars");
                img.css("max-height", wrap.hasClass("mfp-force-scrollbars") ? "none" : maxHeight);
              });
            },
            beforeClose: function() {
              setMetaViewport("max","1.0","no"); //when we close the lightbox we disable zoom and reset to 1.0
              this.wrap.off("click.pinhandler");
              this.wrap.removeClass("mfp-force-scrollbars");
            }
          },
 
          image: {
            titleSrc: function(item) {
              return [
                item.el.attr("title"),
                $("span.informations", item.el).text().replace('x', '×'),
                '<a class="image-source-link" href="' + item.src + '" target="_blank">' + I18n.t("lightbox.download") + '</a>'
              ].join(' &middot; ');
            }
          }
 
        });
      });
    });
  }
};
23

Why is it a problem to allow us to zoom on every page?

I find it difficult for me to click on notifications on mobile and actually open the notification I want to get to. Being able to zoom would greatly solve that problem for me.

However, if it isn’t ideal for core, then I guess I just have to find a different way to get this ability.

2 Likes
24

Hi @cpradio
How did you proceed with your solution?
Kind regards

25

You’d have to add the meta tag in my prior post to your custom html in the admin area (but I think you have to remove the existing tag from core too).

I’m not sure why zooming is disabled, I found that to be one of the more useful things a mobile device can do. We can still do it on a browser, so why block it from mobile (a smaller screen)? However, it is what it is (whether I understand it or not).

26

I changed the settings on my phone.

27

I can not get my users to change settings in their browser ;-)

28

PR welcome in this area as long as it affects lightbox only @cpradio.

29

Sorry, not interested in a lightbox only solution, as for my needs, I need to be able to zoom outside of the lightbox area (so I won’t be working on a PR to core for this). :frowning:

30

Well, the title of the topic is “zoom for lightbox images”, so, y’know…

31

Yeah, no argument there and my initial code reflects why it isn’t working, but won’t cause it to be specific to lightbox (I just didn’t want anyone thinking I was working on such a PR). I don’t have any problem with Discourse wanting it focused on lightboxes.

32

Hello guys
I changed css with this style and worked!

	.slick-slider {
               touch-action: unset !important;
	}