Thank you for reading my post.

I am using Magnific Popup - zoom function. I wanna know how to set the zoom in %, and how to have 3 different degrees of zooming-in by clicking on the popup image.

Just want to clarify my obstacle: For example, I want to click on the magnific popup image then zoom-in to 120%, second click, zoom-in to 150%, third click, zoom-in to 180%, then the fourth click, will zoom-out back to 100%.

Does anyone know how to do that? If does, it helps me a lot. Thank you so so much!

The original code (works):

$('#img').magnificPopup({ 
          delegate: 'a',
          type: 'image',
          callbacks: {
              open: function() {
                $(".mfp-figure figure").css("cursor", "zoom-in");
                $(".mfp-figure figure").zoom({ 
                    on: "click",
                    onZoomIn: function () {
                        $(this).css("cursor", "zoom-out");
                    },
                    onZoomOut: function () {
                        $(this).css("cursor", "zoom-in");
                    }
                });
              },
              close: function() {
                // Will fire when popup is closed
              }
              // e.t.c.
            }
        });

My code (didn't work):

$('#img').magnificPopup({ 
          delegate: 'a',
          type: 'image',
          callbacks: {
              open: function() {
                $(".mfp-figure figure").css("cursor", "zoom-in");
                $(".mfp-figure figure").zoom({ 
                    on: "click",
                    onZoomIn: function () {
                        $(this).zoom({
                            on: "click",
                            onZoomIn: function(){
                            },
                            onZoomOut: function(){
                            }
                        });
                        $(this).css("cursor", "zoom-out");
                    },
                    onZoomOut: function () {
                        $(this).css("cursor", "zoom-in");
                    }
                });
              },
              close: function() {
                // Will fire when popup is closed
              }
              // e.t.c.
            }
        });

Thank you for reading my post.

I am using Magnific Popup - zoom function. I wanna know how to set the zoom in %, and how to have 3 different degrees of zooming-in by clicking on the popup image.

Just want to clarify my obstacle: For example, I want to click on the magnific popup image then zoom-in to 120%, second click, zoom-in to 150%, third click, zoom-in to 180%, then the fourth click, will zoom-out back to 100%.

Does anyone know how to do that? If does, it helps me a lot. Thank you so so much!

The original code (works):

$('#img').magnificPopup({ 
          delegate: 'a',
          type: 'image',
          callbacks: {
              open: function() {
                $(".mfp-figure figure").css("cursor", "zoom-in");
                $(".mfp-figure figure").zoom({ 
                    on: "click",
                    onZoomIn: function () {
                        $(this).css("cursor", "zoom-out");
                    },
                    onZoomOut: function () {
                        $(this).css("cursor", "zoom-in");
                    }
                });
              },
              close: function() {
                // Will fire when popup is closed
              }
              // e.t.c.
            }
        });

My code (didn't work):

$('#img').magnificPopup({ 
          delegate: 'a',
          type: 'image',
          callbacks: {
              open: function() {
                $(".mfp-figure figure").css("cursor", "zoom-in");
                $(".mfp-figure figure").zoom({ 
                    on: "click",
                    onZoomIn: function () {
                        $(this).zoom({
                            on: "click",
                            onZoomIn: function(){
                            },
                            onZoomOut: function(){
                            }
                        });
                        $(this).css("cursor", "zoom-out");
                    },
                    onZoomOut: function () {
                        $(this).css("cursor", "zoom-in");
                    }
                });
              },
              close: function() {
                // Will fire when popup is closed
              }
              // e.t.c.
            }
        });

• javascript
• jquery
• magnific-popup

• please show your code – Shailendra Sharma Commented Oct 30, 2015 at 8:33
• Added. Thanks for your remind. :) I am new on this platform. – Po Wong Commented Oct 30, 2015 at 8:57

2 Answers 2

At last, I gave up the Magnifier Popup - zoom function, and replace it with css - zoom function.

The solution:

`var zoom_percent = "100";
        function zoom(zoom_percent){
            $(".mfp-figure figure").click(function(){
                switch(zoom_percent){
                    case "100":
                        zoom_percent = "120";
                        break;
                    case "120":
                        zoom_percent = "150";
                        break;
                    case "150":
                        zoom_percent = "200";
                        $(".mfp-figure figure").css("cursor", "zoom-out");
                        break;
                    case "200":
                        zoom_percent = "100";
                        $(".mfp-figure figure").css("cursor", "zoom-in");
                        break;
                }
                $(this).css("zoom", zoom_percent+"%");
            });
        }

        $('#img').magnificPopup({ 
          delegate: 'a',
          type: 'image',
          callbacks: {
              open: function() {
                  $(".mfp-figure figure").css("cursor", "zoom-in");
                  zoom(zoom_percent);
              },
              close: function() {
                // Will fire when popup is closed
              }
              // e.t.c.
            }

        });`

Hope this helps someone who is also looking for it.

You can use something like the below code. It is a simple example which you can modify according to your code.

$("img").click(function(){
    var zoom = parseInt($(this).css("zoom"));
    if(zoom==180){
        $(this).css("zoom","100%");
    }else{
        $(this).css("zoom",zoom+20+"%");
    }
});

Hope it helps.