ASP.Net-JQuery-Slider_emresupcinMerhaba arkadaşlar,

Bu makalemde sizlere JQuery slider’ın içeriğinin dinamik bir veri kaynağından nasıl okunacağını anlatacağım. Birçoğumuz jquery slider örneklerini belki incelemişizdir. Birçok örneği ve demoyu incelediğimizde hepsinin içeriğinin statik html ve javascript olduğunu görürüz. Peki bizim içeriğimiz sürekli değişen bir içerik ise sürekli bu HTML’i düzenleyip sunucumuza gönderemeyiz.

 

Bu gibi bir durumda bir veritabanına sürekli verimizi yazarız ve içeriğimizi bu veritabanından okuyacak hale getirmemiz gerekir.

Ardaşlar JQuery’i bilmeyenler  JQuery Nedir? Nasıl Kullanılır? makaleme gözatabilir.

 

 

Hazır bulduğumuz javascript tabanlı bir image sliderı nasıl dinamik hale getirebiliriz?

Bu iş için hazır asp.net kontrolleri kullanabiliriz. Örneğin biz bu örnekte ASP.Net repeater kontrolü yardımıyla bu işi gerçekleştireceğiz. İlk olarak görsel olarak hoşumuza giden hazır bir slider örneği buluyoruz. Biz kısa bir araştırmayla http://slidesjs.com/ adresindeki sliderı kullanmaya karar veriyoruz. Örneği incelediğimizde aşağıdaki şekilde içeriği göreceğiz.

 

1  <div id="slides">

2    <div class="slides_container">
4        title="145.365 - Happy Bokeh Thursday! | Flickr - Photo Sharing!"
5        target="_blank">
7            width="570" height="270"
8            alt="Slide 1">
9         </a>
11            title="Taxi | Flickr - Photo Sharing!" target="_blank">
13            width="570" height="270"
14            alt="Slide 2">
15         </a>
17            title="Happy Bokeh raining Day | Flickr - Photo Sharing!"
18                target="_blank">
20            width="570" height="270"
21            alt="Slide 3">
22        </a>
23    </div>
24    <a href="#" class="prev">
25        <img src="img/arrow-prev.png" width="24" height="43"
26        alt="Arrow Prev">
27    </a>
28    <a href="#" class="next">
29        <img src="img/arrow-next.png" width="24" height="43"
30        alt="Arrow Next">
31     </a>
32  </div>
———————————————————————————————————–
Şimdi biz buradaki içeriği dinamik bir şekilde repeater aracılığı ile alabilen hale dönüştüreceğiz. Bunu da Repeater kontrolünün Item Template’ni kullanarak gerçekleştireceğiz. Bunun için aşağıdaki şekilde aspx dosyamızı düzenlememiz yeterli olacaktır.
1  <asp:Repeater ID="rptResimler" runat="server" ViewStateMode="Disabled">

2    <ItemTemplate>
3        <div class="slide">
4            <asp:Image ID="imgResim"
5            ImageUrl='<%#DataBinder.Eval(Container.DataItem, "ResimYol")%>'
6                runat="server" Width="570" Height="270"
7                AlternateText='<%#DataBinder.Eval(Container.DataItem, "Alt")%>'/>
8            <div class="caption" style="bottom: 0">
9                <p>
10                    Happy Bokeh Thursday!</p>
11            </div>
12        </div>
13    </ItemTemplate>
14  </asp:Repeater>
Biz örneğimizde genelde ORM(Object Relational Mapping) tasarımını kullanabilmek için resim nesnesi oluşturup bu nesneye atmayı tercih ettik. Siz veritabanından çektiğiniz bilgiler ile bu nesneleri oluşturabilirsiniz ya da ufak değişiklikler ile direk veritabanından okuyabilirsiniz. Biz örnekte klasör içeriğindeki tüm resimleri çekerek gerçekleştirdik ve bunları nesnemizin özelliklerine atadık. Sevgili okurlarım bu makalemde değişik kaynaklardan bilgi topladım. (yazilimmutfagi.net sitesindende faydalandım)
Yazar
Yazar
Bilgisayar Programcısı, Web Tasarımcı, Üniversite Öğrencisi...
Twitter Facebook Google Linkedin Flickr YouTube

Önceki Yazı:HTML Kullanarak Ekranın Ortasına Div Yerleştirme İşlemi?

Sonraki Yazı:WordPress Eklentileri Nasıl Aktif Edilir?

YORUMLAR
SİZ DE CEVAP YAZABİLİRSİNİZ
Bu yazı hakkında görüşünüzü belirtin.

ES Web Tasarım Web Tasarım Blog Teması Emre Supçin Bu tema ES Web Tasarım tarafından düzenlenmiştir. Hiçbir şekilde kopyalanamaz.