# Cannot use zoom for lightbox images on phones

**URL:** <https://meta.discourse.org/t/cannot-use-zoom-for-lightbox-images-on-phones/19646>\
**Category:** Feature\
**Created:** [2014年九月4日 20:20 UTC](https://meta.discourse.org/t/cannot-use-zoom-for-lightbox-images-on-phones/19646 "2014-09-04T20:20:47Z")\
**Posts on this page:** 11\
**Page:** 2

<div class="post-metadata">

**Author:** ![Lid](https://avatars.discourse-cdn.com/v4/letter/l/2bfe46/32.png) [@Lid](https://meta.discourse.org/u/Lid)\
**Post date:** [2014年九月25日 06:13 UTC](https://meta.discourse.org/t/cannot-use-zoom-for-lightbox-images-on-phones/19646/22 "2014-09-25T06:13:55Z")

</div>

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

> <https://gist.github.com/lidlanca/69e7c596d3af8956275d>

```plaintext
/**
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', '&times;'),
                '<a class="image-source-link" href="' + item.src + '" target="_blank">' + I18n.t("lightbox.download") + '</a>'
              ].join(' &middot; ');
            }
          }
 
        });
      });
    });
  }
};

```

---

<div class="post-metadata">

**Author:** ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)\
**Post date:** [2014年九月25日 12:06 UTC](https://meta.discourse.org/t/cannot-use-zoom-for-lightbox-images-on-phones/19646/23 "2014-09-25T12:06:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![solhuebner](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/solhuebner/32/34652_2.png) [@solhuebner](https://meta.discourse.org/u/solhuebner)\
**Post date:** [2014年十月21日 19:51 UTC](https://meta.discourse.org/t/cannot-use-zoom-for-lightbox-images-on-phones/19646/24 "2014-10-21T19:51:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)\
**Post date:** [2014年十月21日 20:39 UTC](https://meta.discourse.org/t/cannot-use-zoom-for-lightbox-images-on-phones/19646/25 "2014-10-21T20:39:28Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![lucas\_maximus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lucas_maximus/32/114869_2.png) [@lucas\_maximus](https://meta.discourse.org/u/lucas_maximus)\
**Post date:** [2014年十月21日 20:47 UTC](https://meta.discourse.org/t/cannot-use-zoom-for-lightbox-images-on-phones/19646/26 "2014-10-21T20:47:12Z")

</div>

I changed the settings on my phone.

---

<div class="post-metadata">

**Author:** ![solhuebner](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/solhuebner/32/34652_2.png) [@solhuebner](https://meta.discourse.org/u/solhuebner)\
**Post date:** [2014年十月21日 21:02 UTC](https://meta.discourse.org/t/cannot-use-zoom-for-lightbox-images-on-phones/19646/27 "2014-10-21T21:02:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2014年十月21日 22:25 UTC](https://meta.discourse.org/t/cannot-use-zoom-for-lightbox-images-on-phones/19646/28 "2014-10-21T22:25:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)\
**Post date:** [2014年十月21日 22:40 UTC](https://meta.discourse.org/t/cannot-use-zoom-for-lightbox-images-on-phones/19646/29 "2014-10-21T22:40:02Z")

</div>

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). ☹

---

<div class="post-metadata">

**Author:** ![codinghorror](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/codinghorror/32/110067_2.png) [@codinghorror](https://meta.discourse.org/u/codinghorror)\
**Post date:** [2014年十月21日 22:41 UTC](https://meta.discourse.org/t/cannot-use-zoom-for-lightbox-images-on-phones/19646/30 "2014-10-21T22:41:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)\
**Post date:** [2014年十月21日 22:43 UTC](https://meta.discourse.org/t/cannot-use-zoom-for-lightbox-images-on-phones/19646/31 "2014-10-21T22:43:53Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Luisa\_V](https://avatars.discourse-cdn.com/v4/letter/l/71e660/32.png) [@Luisa\_V](https://meta.discourse.org/u/Luisa_V)\
**Post date:** [2022年八月8日 13:56 UTC](https://meta.discourse.org/t/cannot-use-zoom-for-lightbox-images-on-phones/19646/32 "2022-08-08T13:56:52Z")

</div>

大家好  
我用这个样式修改了 CSS，它奏效了！

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

```

[上一頁](https://meta.discourse.org/t/cannot-use-zoom-for-lightbox-images-on-phones/19646.md?page=1)