Magnific Popup Kullanımı

Merhaba arkadaşlar, bugün Magnific Popup kullanarak basit bir şekilde fotoğraf galerisi oluşturmayı göreceğiz. Sizi fazla tutmadan uygulamamıza geçelim.

Magnific Popup githup sayfasına giderek CSS ve JavaScript dosylarını indirip projemize dahil edelim. 

<link rel="stylesheet" href="magnific-popup/magnific-popup.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="magnific-popup/jquery.magnific-popup.js"></script>

Not: Eğer uygulama çalışmaz ise mevcut jquery.min.js kısmını silip aşağıda ki kodu web sitenize dahil edin.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Şimdi ise custom.js adlı bir dosya oluşturalım ve içine aşağıda ki kodları dahil edelim.

$('.gallery').each(function() {
  $(this).magnificPopup({
    delegate: 'a',
    type: 'image',
    gallery: {
      enabled:true
    }
  });
});

ardından galerimizi HTML kısmında oluşturalım.

    <div class="gallery">
        <a href="resim.jpg">
          <img src="resim-1.jpg" alt="">
        </a>
        <a href="resim.jpg">
          <img src="resim-2.jpg" alt="">
        </a>
        <a href="resim.jpg">
          <img src="resim-3.jpg" alt="">
        </a>
      </div>

işte bu kadar, beni dinlediğiniz için teşekkür ederim.