Teknoloji  ilerledikçe web site sahiplerinin de ihtiyaçları bir o kadar artmaya başlar. Google’nin Android işletim sistemini çıkardıktan sonra akıllı telefonlar üzerinden web site ziyaretleri daha da artmaya başladı. Mobil cihazlarla uyumlu olmayan web siteleri ziyaretçilere faydalı olmaktan çok sıkıntıya sebep olurlar.  Küçücük ekranda büyüt, küçült daha sonra uygun birşeyi gördükten sonra tıkladığınızda çalışmaması gibi  durumlar birçoğumuzun başına gelmiştir. Bu yüzden her web sitesinin bir de mobil versiyonu olması hem sizin için hem de ziyaretçileriniz için oldukça faydalı olacaktır.

Henüz mobil cihazlar için her türlü web uygulaması olmasa da yeteri kadar paylaşılmış olan ücretsiz  örnekler mevcut. jQuery PhotoSwipe eklentisi de bu örneklerden bir tanesidir. Hem  mobil cihzlarda hemde bilgisayarlarda sorunsuz çalışabilmektedir. Demo sayfasında resimleri isterseniz mouse ile de sürükleyerek değiştirebilirsiniz.  Dokunmatik cihazlarda parmakla tutup sürükleme işlemini mouse de yapabiliyor.  Ayrıca tıklamış olduğunuz resimler de tam ekran olarak görüntüleniyor. PhotoSwipe’nin en iyi özelliği bütün resimlerin aynı anda yüklenmemesi. Bir sonraki resme geçtiğiniz zaman ajax yolu ile resim yüklenerek  açılır. Bu da resim galerisinin oldukça hızlı açılmasını sağlar.

Resimler arası geçiş işlemi için kullanabileceğiniz özellikler :

1. Dokunarak
2. Mouse tekerleğini döndürerek
3. Mouse ile sürükleyerek
4. Klavye yön tuşlarını

Kullanım :

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

Js dosya adresleri : 

<script type="text/javascript" src="klass.min.js"></script>
<script type="text/javascript" src="code.photoswipe-3.0.4.min.js"></script>

Çağırma :

// Set up PhotoSwipe with all anchor tags in the Gallery container
document.addEventListener('DOMContentLoaded', function(){

	var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false } );

}, false);

Mouse tekerleği ile resim değiştirme kodu :

$(document).ready(function(){

	var myPhotoSwipe = $("#Gallery a").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });

});

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

Html :

<ul id="Gallery">
	<li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
	<li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
	<li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
	<li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
	<li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
	<li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
</ul>

Geri kalan bütün yapılandırma  seçeneklerini buradan inceleyebilirsiniz.

Desteklenen Cihazlar :  iPhone, iPad, Android, Blackberry 6 ve bütün masaüstü cihazlar ile uyumludur.