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.Güzel geçiş efektlerine sahip haber akışları için artık Flash şart değil! 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="Manşetı Resmi1.jpg" alt="" title="Manşet 1" />
<img src="Manşetı Resmi2.jpg" alt="" title="Manşetı 2" />
</div>
-----------------------------------------------------------------------------
Örnek kullanımları ve efektleri incelemek için buraya tıklayın.
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="Manşetı Resmi1.jpg" alt="" title="Manşet 1" />
<img src="Manşetı Resmi2.jpg" alt="" title="Manşetı 2" />
</div>
-----------------------------------------------------------------------------
Örnek kullanımları ve efektleri incelemek için buraya tıklayın.
0 yorum: