24 Kasım 2011 Perşembe

Asp.net Ajax SlideShow Extender

   SlideShow image kontrollerinde kullanılan bir extender türüdür. Buttonlar kullanarak ileri, geri, dur, oynat seçenekleriyle dinamik bir slide gösterisi hazırlamak mümkün. Çalıştırıldığında otomatik başlatma seçeneği bulunmaktadır. Döngü şeklinde slide gösterisini sürekli göstermek mümkün. Ayrıca interval değeriyle resimlerin ne kadar süre arayla gösterilebileceğini ayarlayabilirsiniz. Bir page metod veya web servis kullanarak slide showdaki resimlerin gösterimini sağlayabilirsiniz.



SlideShowExtender.aspx :


 <asp:Image ID="Image1" runat="server" Height="400px" 
            ImageUrl="anasayfa.png" Width="400px"/>
                <asp:SlideShowExtender ID="Image1_SlideShowExtender" runat="server" 
                    AutoPlay="True" Enabled="True" ImageDescriptionLabelID="LabelDescription" Loop="True" 
                    NextButtonID="ButtonIleri" PlayButtonID="ButtonPlay" PlayButtonText="Başlat" 
                    PreviousButtonID="ButtonGeri" ImageTitleLabelID="LabelTitle" SlideShowServiceMethod="GetSlides" 
                    SlideShowServicePath="SlideShow.asmx" StopButtonText="Dur" 
                    TargetControlID="Image1" PlayInterval="1000" >
                </asp:SlideShowExtender>
                <br />
                <asp:Label ID="LabelDescription" runat="server" Text="Label"></asp:Label>
                <asp:Label ID="LabelTitle" runat="server" Text="Label"></asp:Label>
                <br />
                <asp:Button ID="ButtonGeri" runat="server" Text="Geri" />
                <asp:Button ID="ButtonPlay" runat="server" Text="Play" />
                <asp:Button ID="ButtonIleri" runat="server" Text="İleri" />

SlideShow.asmx:




[WebMethod]
        [System.Web.Script.Services.ScriptMethod]
        public AjaxControlToolkit.Slide[] GetSlides()
        {
            AjaxControlToolkit.Slide[] imgSlide = new AjaxControlToolkit.Slide[4];


            imgSlide[0] = new AjaxControlToolkit.Slide("anasayfa.png", "Resim 2 Title", "Resim 2 Description");
            imgSlide[1] = new AjaxControlToolkit.Slide("Desert.jpg", "Resim 3", "Resim 3");
            imgSlide[2] = new AjaxControlToolkit.Slide("img02.jpg", "Resim 4", "Resim 4");
            imgSlide[3] = new AjaxControlToolkit.Slide("img03.jpg", "Resim 5", "Resim 5");


            return (imgSlide);           
        }


SlideShow Özellikleri:



  • SlideShowServicePath - Webservice bulunduğu dosya yolu. SlideShow Extender resimleri bu servisimiz aracılığıyla alıyor. Yukarıdaki örneğimizde  SlideShowServicePath="SlideShow.asmx" olarak tanımlamıştık. Not : Servis dosyamızın aspx sayfamızla aynı klasörün içerisinde bulunması gerekir. Farklı bir klasörde ise örneğin ajax adlı klasörün içerisinde. SlideShowServicePath="ajax/SlideShow.asmx" şeklinde yazılmalıdır.
  • SlideShowServiceMethod - Resimlerimizin çağrıldığı web servisi metodumuz. Metodun ismi(GetSlides) değiştirilebilir fakat parametre adı ve dönen tip uygun olmalıdır. İnternetteki bazı örneklerde metot static olarak tanımlanmıştır. Benim denemelerimde static metot çalışmıyordu. Yukarıdaki örneğimizde SlideShowServiceMethod="GetSlides" olarak tanımlamıştık.
  • NextButtonID - Bir sonraki resmi görmemizi sağlayan butonun ID değeri. Yukarıdaki örneğimizde NextButtonID="ButtonIleri" olarak tanımlamıştık.

  • PlayButtonID - Slide gösterisini başlatıp durdurabilmemizi sağlayan butonun ID değerini veriyoruz. 

  • PreviousButtonID - Bir önceki resmi görebilmemizi sağlayan butonun ID değerini veriyoruz.




  • PlayButtonText - Play butonunun text alanı. Slide show durduğunda gösterilir. (PlayButtonText="Başlat") 

  • StopButtonText - Play buttonunun text alanı. Slide oynatılırken gösterilir. (StopButtonText="Dur") 

  • PlayInterval - Slide gösterisi oynatılırken resimler arasındaki geçiş süresini belirtir. Milisaniye cinsinden değer alır. (PlayInterval="1000") Örneğin 1000 milisaniye 1 saniyeye tekabül eder.

  • ImageTitleLabelID - Resimlerin başlıkları bu etiket(label) aracılığıyla gösterilebilir. Title değerini servis metodumuzda belirtiyoruz. ( ImageTitleLabelID="LabelTitle") Servis metodunda Resim2, Resim3 olarak belirlenen 2. parametre alanıdır.

  • ImageDescriptionLabelID - Resimlerle ilgili açıklama bilgilerinin gösterildiği etiketin(label) ID değerini veriyoruz. (ImageDescriptionLabelID="LabelDescription" ) Servis metodumuzdaki 3. parametre alanıdır.

  • Loop - Bool değer alır. True değeri verildiğinde slide show durdurulana kadar gösteri devam eder. False değeri verildiğinde ise resimler bittiğinde gösterir durur. Varsayılan değeri false.Loop="True" 

  • AutoPlay - Varsayılan değeri false. True değeri aldığında sayfa yüklenir yüklenmez gösteri çalışmaya başlar. False değerini aldığındaysa play butonuna basılında gösterim başlar. AutoPlay="True"