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: