Bu makalede Jquery'nin İsotope.js kütüphanesini kullanarak galerimizde ki görselleri animasyonlu bir şekilde değiştirmenin nasıl yapıldığını anlatmaya çalışacağım.
Ayrıca uygulamamızda Bootstrap kullanarak galerimizin reponsive bir şekilde çalışmasını da sağlayacağız.
İsotope kütüphanesi ile web sitenizdeki herhangi bir içeriğin sınıflandırmasını çok kolay bir şekilde yapabilirsiniz.
Bu sayede, kategori şeklinde oluşturacağımız sekmelere (kategorilere) tıklayarak her sekmenin içeriklerini, yani görsellerini animasyonlu olarak görüntülemesini yapabileceğiz.
İstersek aynı görseli, birden fazla kategoride de gösterebiliriz.
Web sitesine buradan ulaşabilirsiniz.
Sekmelerimizi (kategorilerimizi); Hepsini Göster, Web Tasarım, Programlama, Grafik Tasarım, Template ve Logo Tasarım şeklinde oluşturalım. Sonrada hangi görselin hangi sekmede görünmesini istiyorsak kod düzenimizi ona göre yapmamız gerekmektedir.
Önce; https://isotope.metafizzy.co/ sayfasına giderek isotope pluginini ve bootstrap linklerini html sayfamıza aşağıda ki şekilde entegre edelim.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
<title> İsotope Galeri</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
</body>
</html>
</html>
Kaynak Kodları İNDİR:
Bundan sonra ki anlatımı, aşağıda ki videodan veya youtube kanalımdan takip edebilirsiniz.
0 Comments
Yorum Gönder