ScrollGallery.js

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

 

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-01-31 tarihinde yayınlandı,Toplam 2849 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...