mehmetduran.com - Paylaşmak Güzeldir...
Jquery ile Slide View
Jquery ile hazırlanan görsel araçları tanıtmaya devam ediyorum. Bu araçlaradan biri de şimdi tanıtacağım Slide View uygulaması. Bu uygulama ile kendimize slaytlar hazırlayabilir veya manşet alanlar yapabiliriz. Oldukça hoş ve kullanışlı bir uygulama. Nasıl kullanacağımıza ve kodlarımıza bakalım.

Öncelikle bu uygulama için gereken javascript ve css dosyalarımızı sayfamıza ekliyoruz. Daha sonra ise sayfamızda gerekli olan html ve script kodlarımızı yazıyoruz.

<head>
  <title>Slide View</title>
  <script src="jquery-1.2.1.min.js" type="text/javascript"></script>
  <script src="jquery.easing.1.2.js" type="text/javascript"></script>
  <script src="jquery.slideviewer.1.1.js" type="text/javascript"></script>
  <link href="slide.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript">
    $(window).bind("load", function(){
      $("div#alanim").slideView()
    });
  </script>
</head>
<body>
  <div id="alanim" class="svw">
    <ul>
      <li>
        <img src="imgs/1.png" alt="" />
      </li>
      <li>
        <img src="imgs/2.png" alt="" />
      </li>
      <li>
        <img src="imgs/3.png" alt="" />
      </li>
      <li>
        <img src="imgs/4.png" alt="" />
      </li>
      <li>
        <img src="imgs/5.png" alt="" />
      </li>
      <li>
        <img src="imgs/6.png" alt="" />
      </li>
      <li>
        <img src="imgs/7.png" alt="" />
      </li>
      <li>
        <img src="imgs/8.png" alt="" />
      </li>
    </ul>
  </div>
</body>

Tüm uygulama bu kadar. Oldukça anlaşılır ve basit. Kullanışlı olması da ayrı bir özelliği.
Buradan daha ayrıntılı bilgi edinebilirsiniz.
Gerekli tüm dosyaları ve yaptığım örneği buradan indirebilirsiniz.
Uygulamayı aşağıdan veye buradan test edebilirsiniz.

İyi Çalışmalar!

Mehmet Duran 19 Ekim Pazar 2008 10 22869 4,8
Web Tasarım Javascript jQuery Jquery Tasarım-Görsellik Resim Fotoğraf Plugin Eklenti
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Flash Banner Reklam Yapma Programı Jquery ile Kendi Eklentilerimizi Hazırlama Jquery'nin 1.3 Versiyonu Yayınlandı Jquery ile Dropdownlist Üzerinde Ekleme ve Eleman Aktifleştirme İşlemi Visual Studio'da Class Diagramı Oluşturma
Yorumlar
Yorum Yaz
RSS Yorum Takibi
mustafa 15 Kasım Cumartesi 2008 20:52 #1
teşekkürler.. peki alttaki butonlara basılınca resimlerin değişmesi olayına birde belli zaman aralıklarında resimler arasında sıra ile geçiş yapılabilirmi... butonlara tıklanmıyorsa resim belirli zaman aralıklarında degişsin tıklanıyorsa ilgili resme gitsin gibi tekrar teşekkürler...
Mehmet Duran 15 Kasım Cumartesi 2008 21:45 #2
Merhabalar. Dediğiniz gibi slayt gibi yapılabilir. Ancak bu uygulamaya dediğiniz işlemi entegre etmek gerekir. Diğer bir uygulama da (buradan görebilirsiniz) dediğiniz gibi belli süreyle slaytlar değişiyor. Zamanım olduğunda bu konuyla ilgileneceğim.
Koray 05 Aralık Cuma 2008 01:52 #3
Mehmet bey merhaba resimlerin sırasıyla otomatik geçmesini nasıl sağlayabilirim.
Mehmet Duran 05 Aralık Cuma 2008 10:42 #4
Bu uygulama sadece bu şekiilde hazırlanmış. Diğer yorumda yazdığım gibi buradaki uygulamada ise slaytlar belli aralıkla değişiyor. Bu uygulamaya bakarak birşeyler yapılabilir. Bayram tatilinde bu soruna bakmayı umut ediyorum.
Koray 05 Aralık Cuma 2008 13:45 #5
Ben bunu üstünde çalışayım çünkü bana lazım eğer olursa burada paylaşırım.
Eren 20 Mayıs Çarşamba 2009 17:29 #6
sağolasın çok işime yaradı..
Yurdakul 14 Temmuz Salı 2009 17:40 #7
Peki bunun boyutunu nerden değişecez yardımcı olurmusunuz.
Mehmet Duran 14 Temmuz Salı 2009 20:09 #8
Bu uygulamada boyutlar resim boyutuna göre oluşuyor. Ancak Css dosyasındaki özellikleri değiştirerek istediğiniz boyutu verebilirsiniz.
Abdulkadir ŞAHİN 08 Ekim Perşembe 2009 12:44 #9
Peki Bız Bunu Otomatik Olarak nasıl Slayt Seklınde Bellı bır zaman Aralıklı Döndürürüz..!
Mehmet Duran 08 Ekim Perşembe 2009 15:54 #10
Buradaki örneğim tam olarak istediğin şekilde.
İ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.
Başarısızlıklarınız ile soylu bir şekilde yüzleşin, başarıdan farkı kalmayacaktır.
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