ScrollGallery.js

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 :

1. Default
2. With Auto Scroll
3. With Caption
4. With Thumbs_Down_Caption_Autoscrollz

Download  : Mootools ScrollGallery Plugin

• Kullanım :

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