CODEWITHSUNDEEP
javascriptjquery
patrick
patrick

Reputation: 117

How to create a zoom effect with function call in jquery

i have code in which when user clicks a link named zoom the an alert with a zoom effect is shown to user..

I want the same to happen when i click a button ...

when i try it to button click its not working.

How to achieve this?How to correct the code?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css'>
  <style>
    html,
    body {
      margin: 0;
      padding: 10px;
      -webkit-backface-visibility: hidden;
    }
    /* text-based popup styling */
    
    .white-popup {
      position: relative;
      background: #FFF;
      padding: 25px;
      width: auto;
      max-width: 400px;
      margin: 0 auto;
    }
    /* 

====== Zoom effect ======

*/
    
    .mfp-zoom-in {
      /* start state */
      /* animate in */
      /* animate out */
    }
    
    .mfp-zoom-in .mfp-with-anim {
      opacity: 0;
      transition: all 0.2s ease-in-out;
      transform: scale(0.8);
    }
    
    .mfp-zoom-in.mfp-bg {
      opacity: 0;
      transition: all 0.3s ease-out;
    }
    
    .mfp-zoom-in.mfp-ready .mfp-with-anim {
      opacity: 1;
      transform: scale(1);
    }
    
    .mfp-zoom-in.mfp-ready.mfp-bg {
      opacity: 0.8;
    }
    
    .mfp-zoom-in.mfp-removing .mfp-with-anim {
      transform: scale(0.8);
      opacity: 0;
    }
    
    .mfp-zoom-in.mfp-removing.mfp-bg {
      opacity: 0;
    }
  </style>
</head>

<body>
  <div class="links">
    <div class id="inline-popups">
      <a href="#test-popup" data-effect="mfp-zoom-in">Zoom</a>
      <button onClick="#test-popup" data-effect="mfp-zoom-in">test</button>

    </div>
  </div>

  <!-- Popup itself -->
  <div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Game completed sucessfull</div>

  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js'></script>
  <script src="js/index.js"></script>
</body>

</html>

Upvotes: 1

Views: 696

Answers (2)

Ratheesh
Ratheesh

Reputation: 569

Try the below

var theControl = $("#test-popup");
            $('#clickMe').magnificPopup({
                items: {
                    src: theControl,
                },
                type: 'inline',
                mainClass: 'mfp-with-zoom', // this class is for CSS animation below
                zoom: {
                    enabled: true, // By default it's false, so don't forget to enable it

                    duration: 300, // duration of the effect, in milliseconds
                    easing: 'ease-in-out', // CSS transition easing function

                    // The "opener" function should return the element from which popup will be zoomed in
                    // and to which popup will be scaled down
                    // By defailt it looks for an image tag:
                   
                }
            });
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css'>
    <style>
                html,
                body {
                    margin: 0;
                    padding: 10px;
                    -webkit-backface-visibility: hidden;
                }
                /* text-based popup styling */

                .white-popup {
                    position: relative;
                    background: #FFF;
                    padding: 25px;
                    width: auto;
                    max-width: 400px;
                    margin: 0 auto;
                }
                /*

        ====== Zoom effect ======

        */

                .mfp-zoom-in {
                    /* start state */
                    /* animate in */
                    /* animate out */
                }

                    .mfp-zoom-in .mfp-with-anim {
                        opacity: 0;
                        transition: all 0.2s ease-in-out;
                        transform: scale(0.8);
                    }

                    .mfp-zoom-in.mfp-bg {
                        opacity: 0;
                        transition: all 0.3s ease-out;
                    }

                    .mfp-zoom-in.mfp-ready .mfp-with-anim {
                        opacity: 1;
                        transform: scale(1);
                    }

                    .mfp-zoom-in.mfp-ready.mfp-bg {
                        opacity: 0.8;
                    }

                    .mfp-zoom-in.mfp-removing .mfp-with-anim {
                        transform: scale(0.8);
                        opacity: 0;
                    }

                    .mfp-zoom-in.mfp-removing.mfp-bg {
                        opacity: 0;
                    }
    </style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
 
<button id="clickMe" data-effect="mfp-zoom-in">test</button>
  <div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Game completed sucessfully</div>

Upvotes: 2

tomerpacific
tomerpacific

Reputation: 6475

You need to create a function that the onclick attribute will trigger. In that function, you can do the zoom logic that you prefer.

 <button onclick="zoomLogic" data-effect="mfp-zoom-in">test</button>

Inside your script tag or in your script:

function zoomLogic() {
  //Grab the element you wish the zoom effect to take place and do your logic
}

Upvotes: 1

Related Questions