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 7 30647 2,4
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 Javascript ile Klavye Tuşlarının Kontrolü Tasarımda Değişiklik Asp.net ile Dosyaları Okuma ve İçeriğini Değiştirme Jquery E-book Vectorel Wallpapers (10 Adet)
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.
Kafkasya 24 Nisan Pazar 2011 00:13 #4
Elinize sağlık mehmet bey çok güzel bir çalışma olmuş. Jquery e yeni başladım bende. bu çalışmayı templatenin banner kısmına almak istediğimde resimler altalta sıralanıyor ve şablonu bozuyor.. böyle bir uygulamayı tam olarak istediğim banner alanına nasıl ekleyebilirim?günlerdir uğraşıyorum işin içinden çıkamadım.yardımcı olursanız çok çok sevinirim. dw mx ve frontpage kullanıyorum her ikisinde de durum aynı..
http://img372.yukle.tc/images/7158d.JPG
Mehmet Duran 25 Nisan Pazartesi 2011 09:01 #5
@Kafkasya, resimlerin sabit bir alanda değişmesini istiyorsan resimlerin css özellikleri ile oynaman gerekir. Buradaki örnekte resimlere position:absolute özelliğini verip, denersen istediğin gibi bir örnek yapmış olursun. Bu şekilde css özellikler ile oynayıp istediğin şekilde uygulamalar yapabilirsin.
Kafkasya 25 Nisan Pazartesi 2011 17:48 #6
Çok teşekkür ederim mehmet bey, sayenizde birşey daha öğrenmiş oldum. Dediğiniz gibi yaptım ve oldu. Elimdeki diğer örneklerde denedim fakat olmadı. css den bunu düzeltmek istediğimde sadece img satırlarının pozisyonunu değiştirmem yetmiyor mu? tam olarak hangi kod satırlarını ele alıp değiştirmek gerekiyor? http://www.fileden.com/files/2010/6/22/2894184/SudoSlider.zip buradaki uygulamaların hiçbirinde yapamadım mesela.. neden olmadı anlayamadım.bakabilirseniz çok sevinirim
Mehmet Duran 01 Mayıs Pazar 2011 23:39 #7
@Kafkasya, sonuç aldığına sevindim. Ancak verdiğin link için zamanım müsait değil ve ilgilenemeyeceğim. Bunun için çok üzgünüm. Ama sorularını elimden geldiğince cevaplamaya çalışırım.
İ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.
Büyük işler gibi, büyük düşüncelerinde davula ihtiyaçları yoktur.
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