Bir resim galerisi oluşturabilmek için öncelikle büyük resmi göstereceğimiz bir alana ihtiyacımız var.

Resim Galerisi

Bir resim galerisi oluşturabilmek için öncelikle büyük resmi göstereceğimiz bir alana ihtiyacımız var. Bu büyük resmin altında eşit piksellerde 4 ve/veya tercihe göre 5 küçük resim alanı oluşturmalıyız. Bunları oluşturduktan sonra küçük resimlerin bulunduğu div lerin mouseover ve mouseout özelliklerinden faydalanarak büyük resmin içeriğini değiştirmeliyiz. Buraya kadar herşey tamam. Peki ya resimlerin üzerine gelinmediğinde belli bir süre geçtikten sonra resmin kendisinin değişmesini nasıl sağlarız. Bunun için de Javascript in setTimeout özelliğini kullanırak bu işlemi otomatik olarak gerçekleştirmiş olacağız.

Aşağıda örnek javascript i kendi amaçlarınıza göre özelleştirebilirsiniz. Benim tercih ettiğim eklentiler aşağıdaki gibidir.

 

 

    var ThumbPicture = new Object();

    ThumbPicture.PicId = 0;

    ThumbPicture.MaxPic = 4;

    ThumbPicture.Wait = 0;

    ThumbPicture[0] = new Object();

    ThumbPicture[0].pLink = "url(Norm/Haber1.jpg)";

    ThumbPicture[0].tLink = "url(thumb/Haber1.jpg)";

    ThumbPicture[0].hLink = "Hastane.aspx";

    ThumbPicture[0].ToolTip = "Hastanelerimiz sitemizde çevrimiçi sizlerin sorularınızı bekliyor.";

    ThumbPicture[0].HaberId = 0;

    ThumbPicture[1] = new Object;

    ThumbPicture[1].pLink = "url(Norm/Hastane.jpg)";

    ThumbPicture[1].tLink = "url(thumb/Hastane.jpg)";

    ThumbPicture[1].hLink = "Doktor.aspx";

    ThumbPicture[1].ToolTip = "Doktorlarımız sitemizde çevrimiçi sizlerin sorularınızı bekliyor.";

    ThumbPicture[1].HaberId = 0;

    ThumbPicture[2] = new Object;

    ThumbPicture[2].pLink = "url(Norm/Doktor.jpg)";

    ThumbPicture[2].tLink = "url(thumb/Doktor.jpg)";

    ThumbPicture[2].hLink = "Ilac.aspx";

    ThumbPicture[2].ToolTip = "İlaç Firmaları sitemizde çevrimiçi sizlerin sorularını bekliyor.";

    ThumbPicture[2].HaberId = 0;

    ThumbPicture[3] = new Object;

    ThumbPicture[3].pLink = "url(Norm/Eczane.jpg)";

    ThumbPicture[3].tLink = "url(thumb/Eczane.jpg)";

    ThumbPicture[3].hLink = "Harita.aspx";

    ThumbPicture[3].ToolTip = "Tüm sağlık sektörü harita üzerinde";

    ThumbPicture[3].HaberId = 0;

Yukarıda Resimlerimiz ile ilgili javascript değişkenlerimizi tanımladık. Bunları bir xml dosyasından alabileceğimzi gibi c# page_load bölümünden Page.RegisterScriptBlock özelliği ile de bu değişkenlerin içeriğini koddan değiştirebiliriz. Küçük resimlerin mouse ile üzerine gelindiğinde çalışmasını istediğimiz fonksiyon un kodları ise :

 

    function FocusImage(value)

    {

        ThumbPicture.PicId = value;

        ThumbPicture.Wait=1;

        document.getElementById("BigPicture").style.backgroundImage = ThumbPicture[ThumbPicture.PicId].pLink;       

    }

Yukarıdaki script e göstermesini istediğimiz küçük resmin sıra numarasını (0,1,2,3) verdiğimizde büyük resmin bulunduğu yere resmi çağırmış olacak.  Şimdi ise belli sürelerde bu fonksiyonun tetiklenmesini sağlayalım. Bunu da aşağıdaki javascript kodunu yazarak gerçekleştirebiliriz.

 

    function Started() {

        document.getElementById("BigPicture").style.backgroundImage = ThumbPicture[ThumbPicture.PicId].pLink;

       

        ThumbPicture.PicId++;

        if (ThumbPicture.PicId==ThumbPicture.MaxPic)

            ThumbPicture.PicId=0;

        setTimeout('Animation()',5000);

//setTimout('bu alana gitmesini istediğiniz fonksiyonu yazın', bu bölüme ise mili saniye cinsinden süreyi girin);

    }

    function Animation()

    {

        if (ThumbPicture.Wait==1)

            return false;

       

        ThumbPicture.PicId++;

        if (ThumbPicture.PicId==ThumbPicture.MaxPic)

            ThumbPicture.PicId=0;

        setTimeout('Animation()',5000);

    }

Şimdi ise html kodlarımızı şekillendirelim. Öncelikle body de onload olayını Started fonksiyonuna göndermemiz gerekiyor. Böylelikle sayfamız yüklendiği anda belli bir süreyle resimlerin değişimini sağlayacaktır.

 

      <body  onload="Started();">

                    <div class="PictureField">

                        <div class="PictureTab">

                            <div id="BigPicture" class="BigPicture" onmouseover="ThumbPicture.Wait=1" onmouseout="ThumbPicture.Wait=0;setTimeout('Animation()',5000);">

                            </div>

                        </div>

                        <div id="ThumbPict0" onmouseover="FocusImage(0)" onmouseout="ThumbPicture.Wait=0;setTimeout('Animation()',5000);">

                           

                        </div>

                        <div id="ThumbPict1" onmouseover="FocusImage(1)" onmouseout="ThumbPicture.Wait=0;setTimeout('Animation()',5000);">

                           

                        </div>

                        <div id="ThumbPict2" onmouseover="FocusImage(2)" onmouseout="ThumbPicture.Wait=0;setTimeout('Animation()',5000);">

                           

                        </div>

                        <div id="ThumbPict3" onmouseover="FocusImage(3)" onmouseout="ThumbPicture.Wait=0;setTimeout('Animation()',5000);">

                        </div>

                    </div>

 

      </body>

 

İlgili Makaleler

Daha Fazla

Bu yazıya 0 yorum yapılmış.

Yorum Gönder