Akıllı telefonların kullanımı gün geçtikçe arttığından dolayı mobil cihazlar üzerinden internet kullanımı da bir o kadar artış gösterdi haliyle. Oturduğun yerden uzanıp rahatça internet kullanmak bilgisayar sandalyesine oturup iki büklüm olmaktan daha rahattır. Biz web sitesi sahipleri olarak tarayıcıların uyuşmazlık sorunları yetmezmiş gibi bir de web sitelerimizi mobil cihazlara uyumlu hale getirmek zorundayız.

Ne kadar can sıkıcı değil mi ? Bir de ücretsiz olan açık kaynaklı yazılımların olmadığı bir dünyada yaşasaydık ne yapardık. Bir an gözüme internetin yeni yeni yayıldığı dönemler geldi. Html ile hazırlanmış tek sayfalık web sitesi, footer bölümüne eklenmiş küçük küçük reklam kutuları, kırmızı kocaman metin başlığı gibi içerikler olurdu sitelerde.  Neyse ki  her cihaz  için geliştirilmiş açık kaynaklı olan uygulamalar var. SwipeBox ta bunlardan bir tanesidir.  Sadece mobil cihazlar için geliştirilmiş bir yazılım olmadığı gibi Chrome, Safari, Firefox, Opera, IE8+, IOS4+, Android, Windows phone üzerinden sorunsuz çalışabiliyor.

SwipeBox’un çalışma şekli biraz  lightbox ( tıkladığınızda resimleri aynı pencerede başka bir çerçevede açan eklentiler) tarzı eklentileri andırıyor ama biraz daha değişik bir yapıya sahip. Tıklamış olduğunuz resim tam ekran olarak büyüyor, boşta kalan bölümlerin arka plan rengi de siyah oluyor. Dokunmatik özelliğini denemek için mouse ile sürükleyip değiştiremiyorsunuz resimleri. Bilgisayarlarda resimler arası geçiş işlemini klavye yön tuşlarını ve sağ sol ok işaretlerini kullanarak yapabilirsiniz. Ayrıca tam ekran siyah pencere içinde Youtube videolarının da açılmasını sağlayabilirsiniz.

Kullanım

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

Js ve Css dosya adresleri : 

<script src="lib/jquery-2.0.3.js"></script>
<script src="source/jquery.swipebox.js"></script>
<link rel="stylesheet" href="source/swipebox.css">

JavaScript : 

<script type="text/javascript">
jQuery(function($) {
	$(".swipebox").swipebox();
});
</script>

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

Html : 

<!-- Gallery 1 -->
<a rel="gallery-1" href="big/image1.jpg" class="swipebox">
	<img src="small/image1.jpg" alt="image">
</a>
<a rel="gallery-1" href="big/image2.jpg" class="swipebox">
	<img src="small/image2.jpg" alt="image">
</a>
<!-- Gallery 2 -->
<a rel="gallery-2" href="big/image3.jpg" class="swipebox">
	<img src="small/image3.jpg" alt="image">
</a>
<a rel="gallery-2" href="big/image4.jpg" class="swipebox">
	<img src="small/image4.jpg" alt="image">
</a>

Youtube video ekleme kodu : 

<a class="swipebox-video" rel="youtube" href="https://www.youtube.com/watch?v=XSGBVzeBUbk">My Videos</a>