mehmetduran.com - Paylaşmak Güzeldir...
Asp.net ve Javascript ile Slayt
Bu makalemde asp.net ve javascript kullanarak bir resim slaytı oluşturmayı anlatacağım. Bu örneği kendi sitemde de `galerim` bölümünde kullanmıştım. Öncelikle neleri kullanacağımızı anlatayım. Elimizde fotoğrafların adreslerini tutan bir veritabanı var. Bu veritabanının nasıl oluşturulacağını diğer makalemde anlatmıştım. Buradan o makaleye ulaşabilirsiniz.
Kullanacağımız javascript fonksiyonları aşağıdaki gibidir. Bu fonksiyonları html buton veya istediğiniz herhangi bir kontrolün onclick eventında kullanacağız.

        var no = 0; // no değişkeni kaçıncı resmin gösterildiğini tutan değişkenimiz
        function ileri(yol, max) // bir sonraki resmi çağırmak için yazılmış fonksiyonumuz
        {
            var dizi = new Array(); // resimlerin yolunu tutacağımız dizi
            dizi = yol.toString().split(`ß`); // yol veritabanaından gelen resimlerin yolu
            if(no// eğer son resimdeyse ilk resme dönme kontrolü
            {no=no+1;} // max parametresi resim sayısını gösteriyor
            else
            {no=0;}
            document.getElementById(``mnst``).src=``images/``+dizi[no]; // id si mnst olan image`in resim yolunu değiştisiyoruz.
         }
        function geri(yol,max) // bir önceki resmi çağırmak için yazılmış fonksiyonumuz
        {
            var dizi = new Array(); // resimlerin yolunu tutacağımız dizi
            dizi = yol.toString().split(`ß`); // yol veritabanaından gelen resimlerin yolu
            if(no>0) // eğer ilk resimdeyse en son resme dönme kontorlü
            {no=no-1;}
            else
            {no=max} // max parametresi resim sayısını gösteriyor
            document.getElementById(``mnst``).src=``images/``+dizi[no];
        }

Veritabanından gelen resimlerin yolu yani `yol` değişkeni resimlerin `ß` işareti ile birleştirilmiş stringi veritabanından alıp bu işarete göre split edip her resmin adını elde ediyoruz ve resimlerin adlarını `dizi` dizisinde tutyoruz. Yazdığımız `ileri` ve `geri` fonksiyonu ile gösterilen resmin indexini tutan `no` değişkeninin değerini değiştirerek slaytımızı yapmış oluyoruz.

Peki bu javascript koduna veritabanından gelen değeri nasıl sokacağız?
Bunun için bu yazdğımız javascript kodlarının tamamını bir datalist veya gridview içerisinde kullanarak parametre olan `yol` a <%# Eval("resim_yolu").ToString()%> değerini, `max` parametresine de <%#resim_sayisi(Eval("resim_yolu").ToString())%> değerini atıyoruz. Burada resim_sayisi() metodu ise c# ile yazmış olduğumuz ve bize resim sayisini dönderen bir metod. Bunun kullanarak javascript ile servera gitmeden server daki metodumuzun nasıl çalıştırılacağınıda anlamış olduk.
Böylece slaytımızı tamamlamış olduk.

Ayrıca bu slaytta kullandığımız veritabanının nasıl oluşturulduğunu da bu makaleden okuyabilirsiniz.
İyi Çalışmalar.
Mehmet Duran 19 Haziran Perşembe 2008 0 19794 3,6
Asp.net Javascript Fotoğraf Resim Tasarım-Görsellik
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar jQuery Takvim Eklentim (Datetimepicker Uygulamam) Sitenizi Tüm Browserlar'da Test Edin Tasarımda Değişiklik Güzel Bir Browser 'Safari' jQuery ile 'Yukarı Çık' Uygulaması
Yorumlar
Yorum Yaz
RSS Yorum Takibi
Bu Yazı Hakkında Henüz Yorum Yapılmamış.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Şans bir uğraşının eseridir.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009