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 
cok basarili bir anlatim tebrik ve tesekkür ederim..
Evet ıkıncı resımde gelıyor, sizin eklediğiniz örnek çalışmadada öyle.
elimde orjinal boyutları 200-150 , 300-200 , 400-200 olan 3 tane resim var.bu resimleri slider a koyduğumda düzgün bir görüntü olmuyor.hepsini ortak bir en-boy oranında nasıl sabitleyebilirim?css kodlarını inceleyip sliderin en boy oranında sabitlediğimde resmin sadece belirlenen en boy oranındaki kısmı gözüküyor diğer kısımları gözükmüyor.
Css stili ile ya da PHP-ASP kullanarak resim boyutlarında değişiklik yapabilirsiniz. Örneğin Css ile tüm resimleri aynı ölçülerde olmasını sağlayabilirsiniz. Ya da PHP-ASP gibi bir dilkullanarak resimleri sunucuya yüklerken ve sunucudan resimler çağrılırken en boy oranını koruyarak boyutlandırmalar yapabilirsiniz.
çok saol dostum tam aradıgım şey :)
Hocam gerçekten süpersiniz.. Ben de böyle birşey arıyordum. Yalnız bu scripte db den haber çekip alma olayını nasıl yapacağız? Onun makalesini de yazabilir misiniz acaba?
Fırsat bulursam bu konuda yazmaya çalışacağım. Ama zor bir noktası yok. HTML bölümü yerine veritabanından gelen veriler ekrana yazdırılacak.
php ile nivo sliderın görselliğinden yararlanarak manşet haber yapıyorum fakat her ne kadar resimlerin boyutlarını w>400 e h>230 yapsam da orfinal resmin 400 e 200 lük kısmını sadece gösteriyor.manşet haberlerde.css dosyasına da baktım ama malesef olmadı.yardımcı olursanız sevinirim...
kod kısmı şöyle;
Css dosyasında da değişiklik yapmalısınız.
resimlerin boyutlarına göre nasıl bir slayt alanı oluşturcaz?css kodlarına baktım ama malesef olmadı :s
bi yardımcı olsanız siteme kurmak istiyorum ama beceremedim e-mail lazrail.1461@gmail.coöm
Sorunu tam olarak söylerseniz yardımcı olmaya çalışırım.
Paylaşım için teşekkürler. ;) Yalnız bişeyleri eksik yapıyorum sanırım. Resim 1 görünürken yan tarafa ikinci resim geliyor. :S
Genişliği sınırlamamış olabilirsiniz. Çalışma dosyanızı ve linkini gönderiseniz bakabilirim.
Hocam çok teşekkürler. Tam da aradığım gibi.