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ı birinci bölümde ki kaldığımız yerden 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.
<!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
0 Comments
Yorum Gönder