Benedikt Morschheuser‘in hazırladığı Mootools eklentisi görünüş ve animasyon olarak tahminimce en çok arattırılan örneklerden. Hem küçük resimlere kayma animasyonu eklenmiş hemde büyük resimlere. Durumdan duruma resimlerin kayma hızları da değişebiliyor.
Demolar :
Download : Mootools ScrollGallery Plugin
- Kullanım :
Head head etiketleri araına eklenecek kısım
Javascript dosyaların url adresleri.
<script type="text/javascript" src="mootools-core-1.3.1-full-nocompat.js"></script> <script type="text/javascript" src="mootools-1.3.1.1-more.js"></script> <script type="text/javascript" src="../Source/scrollGallery.js"></script>
Mootools Eklentisini çalıştırmaya yarayan komut.
<script type="text/javascript">
window.addEvent('domready', function() {
var scrollGalleryObj = new scrollGallery();
});
</script>
Body body etiketleri arasına eklenecek olan kısım.
Küçük resimlerin bulunduğu kısım
<div id="scrollGalleryHead">
<div id="thumbarea">
<div id="thumbareaContent">
<img src="fotos/small_image1.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image2.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image3.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image4.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image5.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image6.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image7.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image8.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image9.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image10.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image11.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image12.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image13.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image14.jpg" width="120" height="80" alt="" />
</div>
</div>
</div>
Büyük resimlerin bulunduğu kısım.
<div id="scrollGalleryHead">
<div id="thumbarea">
<div id="thumbareaContent">
<img src="fotos/small_image1.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image2.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image3.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image4.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image5.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image6.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image7.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image8.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image9.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image10.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image11.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image12.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image13.jpg" width="120" height="80" alt="" />
<img src="fotos/small_image14.jpg" width="120" height="80" alt="" />
</div>
</div>
</div>
