Nivo Slider ile Muhteşem Manşet Haberler

30 Eki 2010 Cmt 20 yorum

Güzel geçiş efektlerine sahip haber akışları için artık Flash şart değil!

Her ne kadar göze hoş görünse de, içerdiği yazılım açıklıarı, işlemci kullanımı ve tarayıcılarda ara sıra çökmeye neden olmasıyla Apple'ın savaş açtığı Flash'ı siz de web sitenizden uzaklaştırabilirsiniz. Öncelikle bir eklenti olması sebebiyle site içeriğinizin mobil platformlarda ve yeni kurulan sistemlerde gözükmemesi, sitenizde Flash kullanmamak için ilk neden olabilir.

Peki Flash'a alternatif olarak ne kullanabiliriz? İnternett Java Script fonksiyonları içeren Jquery kütüphanesini kullanan birçok hazır manşet haber kodu var. Şimdi en güzellerinden bir tanesi olan Nivo Slider'ın kullanıımını açıklıyorum.

 

Neler Gerekli?

  • Jquery Kütüphanesi 
  • Nivo Silder Paketi

 

Nasıl Kurulur?

Manşet haber akışının olacağı sayfanın <head></head> etiketleri arasına aşağıdaki kodu ekleyin. Böylelikle gerekli dosyaları HTML sayfamıza çağırılacak.

 <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
 <script src="jquery.min.js" type="text/javascript"></script>
 <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>

Burada dikkat etmeniz gereken nokta dosyaları sitenizin kök klasörüne atmış olmanız gerekiyor. Eğer farklı bir konuma atmış iseniz adresleri de o şekilde değiştirmelisiniz.

Fonksiyonu iki şekilde çalıştırabilirsiniz. Temel kullanım için aşağıdaki kodu <head></head> etiketleri arasına ekleyin.

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>

Şayet fonksiyonu kontrol etmek ve çeşitli ayarları değiştirmek istiyorsanız bu kodu kullanın. (Türkçe karakterlerin sorun çıkarmasını önlemek için açıklamaları bu şekilde yazdım.)

<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect:'random', //efektler: 'fold,fade,sliceDown'
slices:15,
animSpeed:500, //hiz
pauseTime:3000,
startSlide:0, //baslangic slayti
directionNav:true, //ileri ve geri dügmelerini goster
directionNavHide:true, //gezinme dugmelerini sadece fare uzerine gelince goster
controlNav:true, //1,2,3 dugmeleri
controlNavThumbs:false, //kontrolde kucuk resimler goster
controlNavThumbsFromRel:false, //kucuk resimler icin resimlerin rel ozelligini kullan
controlNavThumbsSearch: '.jpg', //kucuk resimlerin uzantilari boyle
controlNavThumbsReplace: '_thumb.jpg', //kucuk resimlerin dosya adlari boyle
keyboardNav:true, //sag sol dugmeleri
pauseOnHover:true, //uzerine gelince animasyonu durdur
manualAdvance:false, //manuel gecisler
captionOpacity:0.8, //saydamlik
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //tum slaytlar bitince bu fonksiyonu calistir
});
});
</script>

 

Nasıl Kullanılır?

Manşet haber akışının bulunacağı yere aşağıdaki kodu ekleyin.

<div id="slider">
       <img src="HaberResmi1.jpg" alt="" title="Haber açıklaması 1" />
       <img src="HaberResmi2.jpg" alt="" title="Haber açıklaması 2" />
</div>

Örnek kullanımları ve efektleri incelemek için buraya tıklayın. Hazırlamış olduğum projeyi görüntülemek için buraya, indirmek içinse buraya tıklayın.

22779 kez okundu.

20 Yorum Var

  1. Erhan demiş ki

    Merhabalar bu çalışmaya paylaştığını için teşekkürler öncelikler bir sorum olacaktı şimdi ben bunu kendi siteme yerleştirdim ama açılışta fotoğraflar alt alt açılıyor sonra düzeliyor sizce bunun sebebi nedir? CSS den hidden özelliği mi vereceğiz...

    • Ahmet Soyarslan demiş ki

      Jquery kodları sayfa hazır olduğunda yani site tamamen yüklendiği anda çalışmaya başlıyor. Bunun önüne geçmek için slider bölümünün yüksekliğini sabit tutup, taşan kısımları gizlemek içinse overflow:hidden CSS özelliğini kullanabilirsiniz.

  2. sener demiş ki

    Dostum şurdan bakabilir misin?
    tatvancanhastanesi.com.tr
    resmin tamamına basına arkası gelsin istiyoruz. Şu anda resmin en altında solda bir yere gelince el işareti çıkıyor. istiyorum ki resmin neresine basarsam basayım, yeni sayfa açılsın
    teşekkür ederım

    • Ahmet Soyarslan demiş ki

      Bunun için CSS dosyası ile oynayarak ileri düğmesini arkaplan özelliğini saydam yapıp boyutunu da resim boyutuna genişletmeniz ve tam resim konumuna yerleştirmeniz gerekir.

  3. sener demiş ki

    merhaba
    bizim sitemizde bu resimlerin bır yerıne tıklayınca yenı sayfa acılıyor.
    resmin alt tarafında kucuk bir yerde fare ile ustune gelınce link cıkıyor.
    ama benım derdım. resmin neresıne basarsam basayım, yenı sayfaya gıdebıleyım.
    anlatabılmısımdır umarım.
    tesekkurler

    • Ahmet Soyarslan demiş ki

      Resim özelliklerinden title bilgisini kaldırın, böylelikle fare üzerine gelindiğinde gözüken metin kaybolmuş olur.

  4. oguz demiş ki

    Bunu wordpress'e slider olarak düzenleme imkanımız var mı? Özel alan olarak "manset" eklediğimizde burada çıkması gibi ...

    • Ahmet Soyarslan demiş ki

      Wordpress için eklentisi bulunuyor:
      http://dev7studios.com/nivo-slider/

  5. www.bep.ucoz.net demiş ki

    Bende yapamadim

  6. ersin demiş ki

    Üstad gerçekten güzel bir anlatım ama ben yapamadım. Şimdi hangi kodu nereye yapışıracağımızı tekrardan bir anlatırsan bu yorumun altınaçok iyi olucak :)

  7. toldo57 demiş ki

    eyvallah hocam sorunsuz bir şekilde kullandım teşekkürler..

  8. Necmi demiş ki

    Hocam merhaba slider'ınızı çalıştırdım sorunsuz bir şekilde çalışıyor fakat bir sorunum var. tam slider'ın bulunduğu alanın üzerinde açılır bir menüm var. Fakat bu açılan menü sliderın altında kalarak kullanımaz duruma geliyor. bunu düzeltmek için ne yapmam gerek yardımcı olurmusunuz. şimdiden teşekkürler

    • Ahmet Soyarslan demiş ki

      Slider için CSS ile vereceğiniz z-index değeri menü için verdiğiniz z-index değerinden küçük olmalı. Konu hakkında bilginiz yoksa dosyalarınızı gönderirseniz sorunu çözüp geri gönderebilirim.

  9. Gürcan Atik demiş ki

    Çok teşekkür ederim kardeşim bu muazzam anlatım ve neredeyse 2 saattir aradığım şu sliderı paylaştığın için :)

  10. Serdar demiş ki

    cok basarili bir anlatim tebrik ve tesekkür ederim..



Yorum Yazın