Glisse.js – Tam ekran fotoğraf albümü

Google+ sitesinde resim albümleri oluşturduğunuz zaman galeri ana sayfasında yüklemiş olduğunuz resimler üst üste yığılır ve mouse ile üzerine geldiğinizde dört tarafa bütün resimler birazcık çapraz kayarak albümdeki fotoğrafşar görünür. Tıkladığınızda ise resim büyür. Glisse.js uygulaması da buna benzer olarak hazırlanmış olup daha gelişmiş özelliklere sahiptir. Kullanımı oldukça kolay olduğu gibi bir kaç tane parametresi ile de kolay düzenlemeler yapılabilir.

Google+ fotoğraf albümünden farklı olarak tıkladığınız resimler tarayıcı çerçevesi içinde  tam ekran büyür. Bilgisayar ekranının tamamını kapatacak şekilde de büyütme özelliği ekleyebilmeniz mümkün. Hani tıkladığınızda tam ekran açmasına izin ver diye bir uyarı ile karşılaşırsınız ya aynı onun gibi işte. Kullanabileceğiniz geçiş efektleri bounce, fadeBig, fade, roll, rotate, flipX, flipY efektidir. Css3 geçiş efektlerini desteklemeyen tarayıcılarda fotoğraflar arası geçiş işlemi slide olarak gerçekleşmektedir.  

Victor Coulon tarafından yapılmış olan bu uygulamanın özellikleri yukarda bahsettiğim gibidir.  Şuana dek araştırdığım örneklerden bir kaç tanesi için mükemmel kelimesini kullanmıştım. Bu da mükemmel dediklerimden bir tanesidir. Son olarak bahsetmem gereken bir diğer özelliği var onu da arada unutmak üzereydim.  Üst üste yığılmış olan fotoğrafların üst köşesinde albümde kaç adet içerik olduğunu gösteren bir sayaç var. Ul etiketi içine eklemiş olduğunuz içeriklerin sayısının görüntülenmesini istiyorsanız ul etiketi içine data-count=”5″ eklemeniz gerekiyor. Buradaki 5 rakamı ul etiketleri içinde 5 tane li etiketi (fotoğrafların bulunduğu etiket) olduğunu gösterir.

Kullanım

• Head  etiketleri arasına eklenmesi gereken bölümler.

Js ve Css dosya adresleri : 

<link rel="stylesheet" href="css/glisse.css" />
<link rel="stylesheet" href="css/app.css" />
<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="js/glisse.js"></script>

JavaScript :

<script>
  $(function () {
    $('.myphotos').glisse({
	speed: 500, 
	changeSpeed: 550, 
	effect:'roll', 
	fullscreen: false}); 
  });
</script>

•  Body etiketleri  arasına eklenmesi gereken bölüm.

Html : 

Data-Count kısmında  galeride kaç adet  resim var ise  tırnak işaretleri içerisine  o rakamı yazıyorsunuz. Belirlediğiniz  rakama  bağlı  olarak  üst üste  yığılmış resimler mouse  ile karşılaşınca hafif  görünür  oluyor.

<ul class="stack" data-count="4"> <!-- Galerideki Resim adedi -->
 <li><img src="kucuk-resim.jpg" class="myphotos" rel="group1" data-glisse-big="buyuk-resim.jpg" title
 <li><img src="kucuk-resim.jpg" class="myphotos" rel="group1" data-glisse-big="buyuk-resim.jpg" title
 <li><img src="kucuk-resim.jpg" class="myphotos" rel="group1" data-glisse-big="buyuk-resim.jpg" title
 <li><img src="kucuk-resim.jpg" class="myphotos" rel="group1" data-glisse-big="buyuk-resim.jpg" title
</ul>

Resimler arasında  geçiş yapılırken slayt hareketleri  değiştirebileceğiniz diğer değerler.

• bounce
• fadeBig
• fade
• roll
• rotate
• flipX
• flipY

Örnek olarak  yukarıda verdiğimiz  javascript  kod  içerisinde effect:’roll’  diye  bir  bölüm bulunuyor. Eğer  slayt  roll yerine bounce, fadebig, fade, rotate, flipX yada  flipY yazmanız  yeterli olacaktır.

Tarayıcı Desteği 

• Firefox 4+
• Opera 11.6+
• Chrome 14+
• Safari 5+
• iPhone/iPad iOS 4.3+
• BlackBerry OS v6+