Jquery ile Basit Yazı ve Resim Geçişi
Sayfanızdaki yazı ve resimleri döngüsel olarak aynı alan içerisinde gösterebilirsiniz.
Son dakika haberlerini veya bir galerideki resimlerin hepsini bir anda göstermek yerine, sırasıyla veya karışık olarak aynı anlanda gösterebilirsiniz.
Kurulum:
Aşağıdaki dosyaları sitenizin kök klasörüne kopyalayın.
- jquery.js
- query.innerfade.js
- r1.jpg r2.jpg ve r3.jpg
Kullanımı:
Aşağıdaki kodu sayfanızın <head></head> etkiletleri arasına ekleyin.
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function(){
$('.yazi').innerfade({
animationtype: 'slide',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '20px'
});
$('.resim').innerfade({
animationtype: 'fade',
speed: 750,
timeout: 2000,
type: 'random',
containerheight: '230px'
});
});
</script>
Yazı veya Görsellerin Eklenmesi:
Aşağıdaki kodu sayfanızın <body></body> etikleri arasına ekleyin.
<div class="resim">
<img src="r1.jpg" width="400" height="230" />
<img src="r2.jpg" width="400" height="230" />
<img src="r3.jpg" width="400" height="230" />
</div>
<div class="yazi">
<p>İlk haberimiz bu olacak.</p>
<p>İkinci haberimiz bu olacak.</p>
</div>
Burada yazi ve resim isimli sınıflara sahip olan div elementlerini kullandık. Fonksiyonda ilgili yeri değiştirerek istediğiniz elemente bu özelliği ekleyebilirsiniz.
Özelleştirme:
Javascript fonksiyonunda yer alan şu parametreleri değiştirebilirsiniz.
animationtype: 'slide', // Geçiş efekti. Soluklaştırarak getirmek için" fade", kaydırarak getirmek için "slide" yazın.
speed: 750, // Animasyon hızı.
timeout: 2000, // Her öğenin gösterileceği süre.
type: 'random', // Gösterim sırası, sıralı gösterim için "sequence", karışık gösterim için "random" yazın.
containerheight: '20px' // Resim veya yazıların gösterileceği alanın yüksekliği.
Örnek dosyayı incelemek için buraya, tüm projeyi indirmek için 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 
Verilen linkler (js dosyaları) Ücretsiz mi, sitemizde yayınlarsak sorun olur mu? Paylaşım için teşekkürler.
Merhaba,
Kodları sayfaya yerleştirdim. Sayfayı açınca bilgisayarımda çalışıyor. Sayfayı servere yüklediğimde internette resimlerin tümünü birden gösteriyor.
Bir öneriniz olabilir mi?
Bişey sorucam bunun yükseklik komutu var ama genişlik komutu nedir ? kod ?
Şu şekli ile sınırlandırılmamış, yani sayfa genişliği ile aynı olarak artıyor veya azalıyor. Dilerseniz CSS veya satır içi stil ile genişliği ayarlayabilirsiniz.
resmi büyütmek için ne yapmam gerekiyor hocam ?
Büyük resimler yükleyin. Ardından resmin yüksekliği doğrultusunda kodlardaki "containerheight" değerini artırın. Resimlerin width ve height değerlerini yüklediğiniz resim büyüklüğüne göre değiştirmeyi unutmayın.
Yazı karakterini değiştirebiliyor muyuz?
Örnek Times New Roman yazı tipi olsun istiyoruz bu kodu verebilir misiniz?
CSS ile rahatlıkla değiştirebilirsiniz.
Emegine klavyene saglik, olukca guzel ve net bir anlatim
Çok Teşeşkkürler emeğinize sağlık...
Çalışma için teşekkür ederiz. Çok Sağolun...
Mrb ben wep tasarıma yeni başladım sayılır benim yapmak istedigim bir kutu içerisinde 4-5 tane resim olucak ve kutunun üzerinde ileri geri butonları bulunucak ve resimleri butonlar sayesinde sırasıyla değiştirmek istiyorum eğer bana yardımcı olabilirseniz bunu kodlarla bana açıklayabilirmisiniz şimdiden ilginiz için t.ederim sıradan olsada olur.
Benim de sıklıkla kullandığım ve pek çok aşıdak kişiselleştirilen bilen Showcase Slider'ı tavsiye ederim. CSS dosyaları ile oynayarak ok tuşlarının yerini değiştirebilirsiniz de..
http://showcase.awkwardgroup.com/
yazı baya önce yazılmış ama çok teşekkür ederim çok işime yaradı