Felix Gnass  tarafından dokunmatik  telefonlar  için geliştirilen TouchGallery uygulaması  resimlere  tıklandığı  anda  slayt  bir şekilde  resmi  büyüterek  tam ekranda  incelemenizi  sağlıyor.  TouchGallery  her ne kadar  mobil  tarayıcılar için geliştirilmiş olsa da  bir çok  modern tarayıcı  üzerinde  sorunsuz  çalışıyor.  Eski internet  explorer  ve firefox  4  sürümlerinde  galeri  görünüyor  fakat geçiş  efektleri  çalışmıyor.

Resimlerin çok  olduğu  sayfalar resimlerin boyutuna bağlı  olarak  geç  yüklenebiliyor. TouchGallery bu  konuda  bir kolaylık  sağlamış  durumda.  Galeride  görülebilmesi için bir tane  küçük  resim tıklandığında  ise  tam ekranda  açılması  için büyük bir  resim kullanıyorsunuz. Ziyaretçi küçük resmi tıkladığında  loading  iconu devreye  giriyor  ve resim yükleme işlemi  bittikten sonra slayt  bir şekilde  büyüyerek  tam ekran konumuna geçiyor ve bu arada  arkplan rengide  siyaha dönüşüyor. Resimler  büyüdükten sonra   mouse  ile  resimler  arası  geçiş yapılamıyor  ama  klavye  yön tuşlarını  kullanılarak  resimler  arasında geçiş yapabilirsiniz.

Kullanım

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

Js dosya adresleri :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="activity-indicator.js"></script>
<script type="text/javascript" src="transform.js"></script>
<script type="text/javascript" src="touch-gallery.js"></script>

JavaScript :

<script>
  $('img[data-large]').touchGallery({
    getSource: function() { 
      return $(this).attr('data-large');
    }
  });
</script>

Css :

<style type="text/css">

#content {
	padding: 50px 0 0 0;
	width: 600px;
}
#gallery {
	width: 300px;
	overflow: hidden;
}
#gallery div,
#gallery a {
	display: block;
	float: left;
	color: #fff;
	width: 75px;
	height: 75px;
	margin: 0 8px 8px 0;
}

</style>

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

Html :

<img src="thumb1.jpg" data-large="image1.jpg" />
<img src="thumb2.jpg" data-large="image2.jpg" />
<img src="thumb3.jpg"  data-large="image3.jpg" />