mehmetduran.com - Paylaşmak Güzeldir...
Jquery İnner Fade Uygulaması
Bu yazımda jqeury ile inner fade uygulamasını nasıl kullanabileceğimizi göstermeye çalışacağım. Bu uygulama ile genelde haber sitelerinde kullanılan haberlerin başlıklarını tek tek gösterimi gibi bir uygulama, fotoğraf ve resimler kullanarak hoş bir slayt veya slayt şeklinde manşetler oluşturabiliriz. Son günlerde jquery'i görsel olarak kullanabileceğimiz uygulamaları örnek veriyorum. Bu uygulama da bunlardan birisi. Oldukça kullanışlı ve güzel bir uygulama olduğunu düşünüyorum. Kodlarımıza ve yapmamız gerekenlere bakalım.

Öncelikle gerekli olan dosyaları (yaptığım örnekte dahil) indirmemiz gerekiyor.
Daha sonra ise uygulamayı kullanacağımız sayfamızda kullanacağımız script kodlar ve html kodlar şu şekilde olacak:

<head>
  <title>Jquery Inner Fade</title>
  <link href="jq_fade.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="jquery.innerfade.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        $('ul#portfolio').innerfade({
          speed: 1000,
          timeout: 2000,
          type: 'sequence',
          animationtype: 'fade' // diğeri slide
        })
    });
  </script>
</head>
<body>
  <div class="limiter">
    <ul id="portfolio">
      <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>
    </ul>
  </div>
</body>

Görüldüğü gibi yine anlaşılır ve basit uygulama. Html kodlarımızın yapısı bu şekilde olacak. Böylece istediğimiz şekilde, istediğimiz uyglamada bu yöntemi kullanabiliriz.

Ajax ile yaptığım uygulamalar bölümünde rss okuma uygulamasını bu yöntem ile hazırlayacağım. Tıpkı haber sitelerinde olduğu gibi bir örnek olacak. Bu örneği de ajax uygulamalarım bölümünde görebilirsiniz

Bu uygulama ile daha fazla bilgiyi buradan alabilirsiniz.
Uygulamanın örneğini ve dosyalarını buradan indirebilirsiniz.
Uygulamayı aşağıdan ve buradan test edebilirsiniz.

Mehmet Duran 20 Ekim Pazartesi 2008 3 2688 3,2
Javascript Web Tasarım jQuery Jquery Tasarım-Görsellik Site Araçları İndir
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Jquery ile Tek Tek Kayan Alan Oluşturma ve Ajax ile Rss Okuma Örneği Jquery'de Tanımlayıcı Değiştirme Asp.net ve Javascript ile Slayt Jquery ile Kayan (Floating) Alan Yapımı C Sharp ile Nesneler Üzerinde JSON Dönüşümleri
Yorumlar
Yorum Yaz
RSS Yorum Takibi
huseyin 16 Temmuz Perşembe 2009 23:18 #1
Öncelikle bu yazı için teşekkürler.Burada jquery komutlarını yazarken örneğin s yazarken speed listelenmiyor.Ya da t yazdıgımızda type,timeout otomatik olarak gözükmüyor.Bu da kodlamada zorluk çıkarıyor.Jquery için bu dediklerimi sağlayan bir editor varmı acaba??Ben Visual Studio 2008 kullanmaktayım.
Mehmet Duran 16 Temmuz Perşembe 2009 23:50 #2
Merhaba. Bahsettiğin konu Intellisense olayı. Kodlama yaparken yardımcı ekran çıkıyor buradan kullanılması mümkün özellikler yazılıyor. Bu özellik Jquery için de hazırladı. Visual Studio 2008 ile de kullanabilirsin. Gerekli açıklamaları ve yapılması gerekenleri buradaki yazımda görebilirsin.
Erdem 21 Eylül Pazartesi 2009 21:30 #3
Merhaba ben bu örneği kullanmak istiyorum fakat farklı boyutlardaki resimler eklediğimde küçük olanlar ortalansın istiyorum.Fazla bir bilgim olmadığı için yapamadım.Yardımcı olursan sevinirim.(400 x 300 ve 200 x 300 gibi resimler kullanıyorum.200 genişliğe sahip olan resimler ortada olsun istiyorum) Teşekkürler, iyi çalışmalar.
İ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.
Hata yapmayan bir insan genellikle hiçbirşey yapmıyordur.
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