1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Problem with Magnific Popup Dailog css 3 animation effect

Discussion in 'jQuery' started by Rinki12, Aug 11, 2014.

  1. #1
    I just found this searching and its too much good for popup effecr http://dimsemenov.com/plugins/magnific-popup/

    I tried too much applying the same for my own but doesn't work..
    even its working fine on http://codepen.io/dimsemenov/pen/GAIkt on codepen but when creating a blank file the code of the codepen it doesn't work followed all the guidelines but still not working.

    Can anyone give me the short file with the code of the codepen that i have mentioned
     
    Rinki12, Aug 11, 2014 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    The best would be for you to post the content of your files here.
     
    PoPSiCLe, Aug 11, 2014 IP
  3. Rinki12

    Rinki12 Banned

    Messages:
    120
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    53
    #3
    import these libraries
    http://dimsemenov-static.s3.amazonaws.com/dist/magnific-popup.css
    http://dimsemenov-static.s3.amazonaws.com/dist/jquery.magnific-popup.min.js

    
    <div class="links">
      <ul id="inline-popups">
        <li><a href="#test-popup" data-effect="mfp-zoom-in">Zoom</a></li>
     
    <!-- Popup itself -->
    <div id="test-popup" class="white-popup mfp-with-anim mfp-hide">Text that popups with animation</div>
    
    HTML:
    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 */
      .mfp-with-anim {
        opacity: 0;
        transition: all 0.2s ease-in-out;
        transform: scale(0.8);
      }
    
      &.mfp-bg {
        opacity: 0;
          transition: all 0.3s ease-out;
      }
    
      /* animate in */
      &.mfp-ready {
        .mfp-with-anim {
          opacity: 1;
          transform: scale(1);
        }
        &.mfp-bg {
          opacity: 0.8;
        }
      }
    
      /* animate out */
      &.mfp-removing {
      
        .mfp-with-anim {
          transform: scale(0.8);
          opacity: 0;
        }
        &.mfp-bg {
          opacity: 0;
        }
      
      }
    
    }
    
    
    /*
    
    Code (CSS):
    // Inline popups
    $('#inline-popups').magnificPopup({
      delegate: 'a',
      removalDelay: 500, //delay removal by X to allow out-animation
      callbacks: {
        beforeOpen: function() {
           this.st.mainClass = this.st.el.attr('data-effect');
        }
      },
      midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
    });
    
    
    // Image popups
    $('#image-popups').magnificPopup({
      delegate: 'a',
      type: 'image',
      removalDelay: 500, //delay removal by X to allow out-animation
      callbacks: {
        beforeOpen: function() {
          // just a hack that adds mfp-anim class to markup
           this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim');
           this.st.mainClass = this.st.el.attr('data-effect');
        }
      },
      closeOnContentClick: true,
      midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
    });
    
    
    // Hinge effect popup
    $('a.hinge').magnificPopup({
      mainClass: 'mfp-with-fade',
      removalDelay: 1000, //delay removal by X to allow out-animation
      callbacks: {
        beforeClose: function() {
            this.content.addClass('hinge');
        },
        close: function() {
            this.content.removeClass('hinge');
        }
      },
      midClick: true
    });
    
    Code (JavaScript):
     
    Rinki12, Aug 11, 2014 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    PoPSiCLe, Aug 12, 2014 IP
    Rinki12 likes this.