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.
Bunlar da İlginizi Çekebilir
20 Yorum Var
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?
Ş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.
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?
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/
Yorum Yazın
Hoşgeldiniz!
Son teknoloji haberlerinden, yazılım ve donanım incelemelerine, çeşitli fırsatlardan kampanya duyurularına kadar birçok konunun yer aldığı kişisel web siteme hoşgeldiniz.
Takipte Kalın!
Kişisel sitemdeki güncelleştirmelerden, haber ve yeniliklerden anında haberdar olmak çok kolay.
Mini blog sitesi Twitter'da site güncelleştirmelerini takip edebilirsiniz.
Facebook'ta sayfamı beğenerek haber paylaşımlarımı hesabınızdan takip edebilirsiniz.
İletişim sayfasını kullanarak bana mesaj gönderebilisiniz.
Masaüstü Görünümü
Web sitemi şu anda Mobil Görünüm'de geziyorsunuz.
Geniş ekranlı cihazınızdan geziniyorsanız Masaüstü Görünümü'ne geçmek için tıklayın.