MayerAnnamaria
7/10/2017 - 8:45 AM

add magnific popup

add magnific popup

bowerel
kilepsz a gulp watch bol
ctrl + x
es
bower install magnific-popup --save
utanna gulp
es gulp watch
es akkor hozza is adta
csak meg kell hivd

--------
meghivni: http://dimsemenov.com/plugins/magnific-popup/documentation.html

mukodo popup, csak a gallery-t kell kitorolni
https://codepen.io/dimsemenov/pen/vKrqs

-----------------------------------------
a main.js-be be kell illeszteni a js-t

$('#open-popup').magnificPopup({
    items: [

      {
        src: 'https://vimeo.com/123123',
        type: 'iframe' // this overrides default type
      },
      {
        src: $('<div class="white-popup">Dynamically created element</div>'), // Dynamically created element
        type: 'inline'
      },
      {
        src: '<div class="white-popup">Popup from HTML string</div>', // HTML string
        type: 'inline'
      },
      {
        src: '#my-popup', // CSS selector of an element on page that should be used as a popup
        type: 'inline'
      }
    ],

    type: 'image' // this is a default type
});

------------
css-t beilleszteni

#open-popup {padding:20px}
.white-popup {
  position: relative;
  background: #FFF;
  padding: 40px;
  width: auto;
  max-width: 200px;
  margin: 20px auto;
  text-align: center;
}

------------------
 az #open-popup id-ra ugrik elo
 
<button id="open-popup">Open popup</button>

<div id="my-popup" class="mfp-hide white-popup">
  Inline popup
</div>