jQuery ile Animasyonlu Sayfalama Yapımı | jPages

Merhaba arkadaşlar, bu dersimizde jQuery ile animasyonlu olarak sayfalama yapacağız. Bunun için jPages kütüphanesini kullanacağız. Bu hazır kütüphane ile kaliteli animasyonlu sayfalama yapabiliriz. Bir nevi slider gibi ama bu biraz daha değişiği. Yani tek image yada tek yazı yerine yan yana veya alt alta resimleri veya divleri sayfalama yapıyoruz. Şuana kadar araştırdığım en kaliteli özelleştirilebilir kütüphane bence kullanmanızı şiddetle öneririm…

İlk önce demo adresini verelim ;
http://www.atknuludag.com/demo/jPages/

Ardından jPages kütüphanesinin adresini verelim ;
http://luis-almeida.github.io/jPages/

Ayrıca şunu belirtmekte fayda var. Animate.css dosyası isteğe bağlı kullanabilirsiniz bu css ile birçok geçiş efekti verebilirsiniz. Geçiş efektleri ve css dosyası için aşağıdaki siteye bakabilirsiniz;
http://daneden.github.io/animate.css/

Ardından html dosyamızı oluşturalım. İlk önce bildiğiniz gibi head kodları arasına jQuery kütüphanesini, jPages kütüphanesini, Animate.css dosyamızı ve diğer stil dosyamızı ekleyelim.

<!-- jQuery Tanımlamaları -->
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="./js/jPages.js"></script>
<!-- End jQuery Tanımlamaları -->

<!-- Animate.css -->
<link rel="stylesheet" href="./css/animate.css" />

<!-- Stil-->
<link rel="stylesheet" href="./css/style.css" />

Ardından jPages kütüphanesini kullanmaya başlayalım.

<script type="text/javascript">
	  $(function(){
		$(".page").jPages({
			containerID : "sayfalamaSlider",
			pause       : 5000, //5 Sn'de bir değişsin.
			clickStop   : true, //Sayfalama tuşlarından herhangi birine basınca durmasını istiyorsak true istemiyorsak false yazmalıyız.
			perPage     : 4, //Her Sayfada kaç adet li olacağı
			previous: "← Geri", //Geri yazının adı
			next: "İleri →", //İleri Yazısının Adı
			animation: "fadeInDownBig", //Geçiş Animasyonu adı. Diğer animasyonlar için ; http://daneden.github.io/animate.css/
		});
	  });
	</script>

Yukarıdaki kodda tanımladıklarımızı sayfalama yapacağımız kısma da tanımlıyoruz. Gördüğünüz gibi ul tagımızın id’sini yukarıda belirttiğimiz “containerID” kısmında yazan id adını yazıyoruz. Ayrıca yine yukarıda saylama butonlarımızı eklemek için page adında bir class atadık. Bu classı aşağıda div tagların classına yazıyoruz ve içini boş bırakıyoruz.

<div class="slider">
		<ul id="sayfalamaSlider">
			<li><a href="#" title=""><img src="image/1.jpg" alt="" /></a></li>
			<li><a href="#" title=""><img src="image/2.jpg" alt="" /></a></li>
			<li><a href="#" title=""><img src="image/3.jpg" alt="" /></a></li>
			<li><a href="#" title=""><img src="image/4.jpg" alt="" /></a></li>
			
			<li><a href="#" title=""><img src="image/5.jpg" alt="" /></a></li>
			<li><a href="#" title=""><img src="image/6.jpg" alt="" /></a></li>
			<li><a href="#" title=""><img src="image/7.jpg" alt="" /></a></li>
			<li><a href="#" title=""><img src="image/8.jpg" alt="" /></a></li>
		</ul>
	</div>
	
	<div class="page"></div>
jQuery
JPages
İndirilme : 383 | Dosya Tipi : rar

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.