jQuery Flip 3 boyutlu sürükleyince defter yaprağı gibi dönen bir galeri örnekleri oluşturabilmeniz için Hiro Inami tarafından geliştirilmiş bir uygulamadır . Asıl amacı mobil tarayıcılar için olsada masaüstü cihazlar içinde kullanılabiliyor. Webkit 3D dönüşümlerle birlikte hazırlanan Flip uygulaması webkit destekli bütün tarayıcılar üzerinde sorunsuz şekilde çalışıyor. Webkit desteklemeyen tarayıcılarda ise bir resimden diğer resime geçiş slayt olarak gerçekleşiyor. Sadece resimlere odaklı bir eklenti değil. Herhangi bir html element ile ilişkilendirip kullanabilmeniz mümkün. İsterseniz Flip eklentisini kullanarak defter yaprağı gibi dönen websayfaları da tasarlayabilirsiniz.
Kullanım
- Head etiketleri arasına eklemeniz gereken bölümler.
Js ve css dosya adresleri :
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <link rel="stylesheet" href="../jquery.mobile.flip.min.css" /> <script src="https://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script type="text/javascript" src="../jquery.mobile.flip.js"></script>
JavaScript :
<script type="text/javascript">
$(document).ready(function() {
$("#flipRoot").flip({
forwardDir: "ltor",
height: "340px",
showpager: true,
loop: true}));
});
</script>- Body etiketleri arasına eklemeniz gereken bölüm.
Html :
<div id="flipRoot" data-role="flip"> <div> Flip Content 1 </div> <p> Flip Content 2 </p> <section> Flip Content 3 </section> </div>