jQuery ile Haber Akışı (News Ticker)

Geçtiğimiz hafta içerisinde bize elektronik posta ile ulaşan Gürkan isimli arkadaşımız, News Ticker yapımı ile ilgili bir makale yayınlamamızı istemişti. Gürkan’ın isteği üzerine, bugün jQuery‘nin nimetlerinden yararlanarak işlevsel bir haber akışı hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

News Ticker (Haber Akışı) nasıl hazırlanır?

News Ticker hazırlamak için kullanabileceğiniz onlarca script mevcut. Hatta isterseniz küçük bir uğraş ile bu işin üstesinden CSS ile de gelebilirsiniz. Bu makalemizde jQuery ile çalışan Jquery News Ticker yazılımını kullanacağız. İsterseniz uygulamanın orjinal adresine buradan gidebilirsiniz.

İlk olarak jquery-ticker.js ve ticker-style.css dosyalarını indirin.

Daha sonra sayfanızın <head></head> elemanları arasında bu tanımlamaları yapın.

<link href="ticker-style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="jquery.ticker.js" type="text/javascript"></script>
<script type="text/javascript">$(function () {$('#js-news').ticker();});</script>

Bu kısımdaki js-news id tanımlaması, hangi eleman içerisinde haber akışını kullanacağımızı belirtiyor.

Son olarak haber başlıklarımızı ekleyerek işlemi tamamlıyoruz.

<ul id="js-news" class="js-hidden">
<li class="news-item">Bu bir haber akışı örneğidir.</li>
<li class="news-item">jQuery ile hazırlanmıştır.</li>
</ul>

Başlık sayısını istediğiniz kadar arttırıp azaltabilirsiniz.

Şimdi gelelim ayarlar ekranına.

Akış yönü ve hızı, başlıklar ve kontrol çubukları gibi öğeler nasıl değiştirilir?

Daha önce indirdiğimiz jquery.ticker.js dosyasını açıyoruz. En alttaki yorum komutunu buluyoruz ve onun da altında bulunan ayarları inceliyoruz.

// plugin defaults - added as a property on our plugin function

Teker teker bakalım.

speed : Verilerin daktilo efektiyle yazılış hızı.
ajaxFeed : Haber akışını ajax ile çekmek.
feedUrl : Dışarıdan veri çekecek miyiz? Çekeceksek dosya kendi sunucumuzda olmalı.
feedType : Dışarıdan veri çekeceğimiz dosya uzantısı.
displayType : ‘reveal’ ve ‘fade’ olarak değiştirebileceğimiz verinin görünüş efekti.
htmlFeed : Haber akışı içerisinde HTML girişine izin verilsin mi?
debugMode : Eğer aktif edilirse oluşabilecek sorunlar açıklayıcı hata tanımlarıyla gösterilir.
controls : Kontrol çubukları gösterilsin mi?
titleText : Haber kutucuğu başlığı.
direction : ‘ltr’ veya ‘rtl’ değiştirilebilir.
pauseOnItems : Her haberde kaç milisaniye beklensin?
fadeInSpeed : Haber girişi kaç milisaniyede gerçekleşsin?
fadeOutSpeed : Haber çıkışı kaç saniyede gerçekleşsin?

Bu da ilginizi çekebilir Sitenize Haber ve Duyuru Akışı Ekleyin

Kapanış

Adobewordpress ailesi olarak sosyal ağ ve elektronik posta adresimizden bize yolladığınız talepleri sıklıkla değerlendiriyoruz. Bugün de yine sizlerin talebini dinleyerek jQuery ile News Ticker uygulaması hazırladık.

Bir sonraki makalemizde görüşmek üzere hoşçakalın.