hsnLightBox Jquery Eklentisi

hsnLightBox Nedir ?

hsnLightBox bir resim, html ve çoklu ortam içeriklerini sayfa üzerinde görüntüleyebilmenizi sağlayan bir araçtır. JQuery kütüphanesi kullanılarak oluşturulmuştur. MIT and GPL licenses altında lisanslıdır. Şuan için beta aşamasındadır.

Paylaş

hsnLightBox ile neler yapılabilir ?

Fotoğraflar ve görselleri gösterebilirsiniz.
Video ve flash dosyaları oynatabilirsiniz.
html içerik yada tasarım gösterebilirsiniz.
Resim galerisi gösterebilirsiniz.
Ajax özelliğini kullanarak çeşitli işlemler yapabilirsiniz.
Kısayol tuşlarını kullanarak kolay kullanım sağlayabilirsiniz.

Nasıl Kullanılır ?

hsnLightBox eklentisini çalıştırabilmeniz için indirmiş olduğunuz hsnLightBox klasörünü sitenizin kök dizinine kopyalamak ve gerekli dosyaları sayfanıza çağırmak yeterli olacaktır. hsnLightBox klasörünü kök dizinine kopyalamak zorunda değilsiniz. Fakat aşağıdaki anlatım sizin hsnLightBox klasörünü kök dizinine kopyamış varsayarak yapılmıştır.

JQuery kütüphanesini çağıralım

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

hsnLightBox eklenti dosyalarımızı çağıralım

<link href="hsnLightBox/hsnLightBox.css?v=beta" rel="stylesheet" type="text/css" media="screen" >
<script type="text/javascript" src="hsnLightBox/hsnLightBox.js?v=beta"></script>

Bir link oluşturun ve hsnLightBox ile açmak istediğiniz içeriğin adresini href paremetresine ekleyin.

<a class="resim" href="http://farm9.staticflickr.com/8183/8362012092_601c3dbf28.jpg"></a>

Daha sonra bu linke eklemiş olduğunuz class yada id paremetresi ile hsnLightBox ı çalıştıran javascript kod bloğunu sayfanıza ekleyin

<script type="text/javascript">
  $(function(){
     $('.resim').hsnLightBox();
  });
</script>

Örnek kullanımlar

<a class="resim" href="http://farm9.staticflickr.com/8183/8362012092_601c3dbf28.jpg">
  <img src="http://farm9.staticflickr.com/8183/8362012092_601c3dbf28.jpg" width="50" height="50"/>
</a>
<a class="resim" href="http://farm9.staticflickr.com/8216/8446443942_b369acc3f9_z.jpg">
  <img src="http://farm9.staticflickr.com/8216/8446443942_b369acc3f9_z.jpg" width="50" height="50"/>
</a>
<a class="resim" href="http://farm8.staticflickr.com/7117/7660910332_d10b4e60c9_c.jpg">
  <img src="http://farm8.staticflickr.com/7117/7660910332_d10b4e60c9_c.jpg" width="50" height="50"/>
</a>
<a class="resim" href="http://farm9.staticflickr.com/8472/8102937726_d12048d08c_z.jpg">
  <img src="http://farm9.staticflickr.com/8472/8102937726_d12048d08c_z.jpg" width="50" height="50"/>
</a>

$(function(){
  $('.resim').hsnLightBox();
});

<a class="galeri" rel="galeri-grup" href="http://farm9.staticflickr.com/8183/8362012092_601c3dbf28.jpg">
  <img src="http://farm9.staticflickr.com/8183/8362012092_601c3dbf28.jpg" width="50" height="50"/>
</a>
<a class="galeri" rel="galeri-grup" href="http://farm9.staticflickr.com/8216/8446443942_b369acc3f9_z.jpg">
  <img src="http://farm9.staticflickr.com/8216/8446443942_b369acc3f9_z.jpg" width="50" height="50"/>
</a>
<a class="galeri" rel="galeri-grup" href="http://farm8.staticflickr.com/7117/7660910332_d10b4e60c9_c.jpg">
  <img src="http://farm8.staticflickr.com/7117/7660910332_d10b4e60c9_c.jpg" width="50" height="50"/>
</a>
<a class="galeri" rel="galeri-grup" href="http://farm9.staticflickr.com/8472/8102937726_d12048d08c_z.jpg">
  <img src="http://farm9.staticflickr.com/8472/8102937726_d12048d08c_z.jpg" width="50" height="50"/>
</a>

$(function(){
  $('.galeri').hsnLightBox(); // Galeri ismini rel niteliğinde belirtmeniz gerekli !
  //Yada
  $('a[rel=galeri-grup]').hsnLightBox();
});

Satır içi html (Otomatik yükseklik/genişlik algılama) Harici html kod Ajax Swf Iframe Video - YouTube

<a id="ornek1" href="#satirici">Satır içi html (Otomatik yükseklik/genişlik algılama)</a>
<a id="ornek2" href="#">Harici html kod</a>
<a id="ornek3" href="hsnLightBox/ornekler/ajax.php">Ajax</a>
<a id="ornek4" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">Swf</a>
<a id="ornek5" href="hsnLightBox/ornekler/iframe.html">Iframe</a>
<a id="ornek6" href="http://www.youtube.com/embed/ngSP5TP99kg?autoplay=1">Video - YouTube</a>

$(function(){
  $('#ornek1').hsnLightBox();
  $('#ornek2').hsnLightBox({
    icerik : '<div style="color:blue;">Merhaba Dünya !!!</div>'
  });
  $('#ornek3').hsnLightBox({
      ajaxVeri: {veri:'Deneme'}	
  });
  $('#ornek4').hsnLightBox({
      otoBoyutlandir: false
  });
  $('#ornek5').hsnLightBox({
      nesneTipi : 'iframe',
      nesneGenislik  :  1150,
      nesneYukseklik :  700
  });
  $('#ornek6').hsnLightBox({
      nesneTipi : 'iframe',
      nesneGenislik  :  600,
      nesneYukseklik :  400
  });
});

Kullanım İpuçları

Tetikleme Manuel resim galerisini açma Manuel içerik açma Manuel video açmak Manuel içerik açma (tip 2)

Mevcut Seçenekler

Seçenek	Açıklama
Saydamlık	Arkaplanın saydamlığını belirler. { saydamlik : 0.5 }
Arkaplan rengi	Arkaplan rengini belirler. { apRengi : '#000' }
Otomatik Boyutlandırma	Açılacak pencerenin, içeriğin boyutlarına göre otomatik boyutlanıp boyutlanmıyacağını belirler. { otoBoyutlandir : false /* Default degeri true dur / nesneGenislik : 560 / Default değer / nesneYukseklik : 340 / Default değer / / iframe ve swf içerik tiplerinde otomatik boyutlandırma yoktur. Belirlediğiniz yükseklik ve genişliğe göre pencere açılır. Bu yüzden bu özelliği kullanmanıza gerek yoktur.*/ }
Ajax Data Type	Ajax işlemleri için veri alış veriş biçimini(dataType) belirler { ajaxDataType : 'html' /Default değeri html dir./ }
Hata Mesajı (Genel)	Ajax işlemleri sırasında 404 hatası dışındaki tüm hatalarda görünecek hata mesajı. Hata kodunu mesajın sonuna ekliyecektir. { hataMesaji : 'Bir hata oluştu ! Hata Kodu:' /Hata kodu mesajın sonuna eklenecektir./ }
Hata Mesajı (404)	Ajax işlemleri sırasında 404 hatalarında görünecek hata mesajı. { hataMesaji404 : 'Sayfa bulunamadı !' }
Animasyon Süresi	Galeri resimlerinin değişimi sırasındaki animasyon süresini belirler. { animasyonSuresi : 500 /milisaniye/ }
Padding	hsnLightBox çerçeve kalınlık değerini belirler. Piksel cinsinden değerler alır. { padding : 10 /Pixel/ }
swf	swf içerik türü için seçenekleri belirler. { wmode: 'transparent', allowfullscreen: 'true', allowscriptaccess: 'always' }
Kapat Butonu	Kapat butonunun gösterilip gösterilmeyeceğini belirler. `true` ve `false` değerleri alabilir. { kapatButonuGoster : true }
Yön Butonları	Resim galerisinde resimler arasında kolayca hareket edebilmenizi sağlayan yön butonlarının gösterilip gösterilmeyeceğini belirler. { yonButonuGoster : true }
Klavye kısayolları	Esc hsnLightBox ı kapatır. > Bir sonraki galeri resminini açar. < Bir önceki galeri resmini açar.