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" />