Nivo Slider ile Muhteşem Manşet Haberler
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.
Web sitemi şu anda Masaüstü Görünümü'nde geziyorsunuz.
Mobil cihazınızdan geziniyorsanız Mobil Görünüm'e geçmek için 
En popüler kelime oyununda yarışmaya hazırsanız buraya 
Aradığınız ürünü akılınızdaki fiyata bulun. Hemen şimdi 
Mini blog sitesi 
link kırık hocam düzeltebilirmisiniz. teşekkür ederim.
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...
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.
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
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.
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
Resim özelliklerinden title bilgisini kaldırın, böylelikle fare üzerine gelindiğinde gözüken metin kaybolmuş olur.
Bunu wordpress'e slider olarak düzenleme imkanımız var mı? Özel alan olarak "manset" eklediğimizde burada çıkması gibi ...
Wordpress için eklentisi bulunuyor:
http://dev7studios.com/nivo-slider/
Bende yapamadim
Ü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 :)
eyvallah hocam sorunsuz bir şekilde kullandım teşekkürler..
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
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.
Çok teşekkür ederim kardeşim bu muazzam anlatım ve neredeyse 2 saattir aradığım şu sliderı paylaştığın için :)