Tweet

Jquery Flash Haber Scripti

Jquery bölümüne ilk makaleyi eklemek herzaman olduğu gibi yine bana düştü. Açıkçası makale konusunu şeçerken baya düşünmek zorunda kaldım. Çünkü eskiler hep birşey nasıl başlarsa öyle gider derler. Ben de ilk makale için haber içeriğine sahip sitelerde sıkça rastladığımız, flash haber, sıcak haber, son dakika başlığı altında yer alan uygulamalarda kullanılabilecek, geliştirilmeye açık bir script yazmaya karar verdim.[...] Sizlerin ne için kullanacağı ise hayal gücünüzle sınırlı. Jquery bölümünde giriş, selectörler,ajax, event gibi temel özelliklerden makale olarak söz etmeyeceğim, bunları merak eden arkadaşlar www.jquery.com adresine giderek documentation ve tutorial ları inceleyebilir.

Öncelikle kodlayacağımız scriptin neler yapacağını açıklayarak hedefimizi belirleyelim. Scriptimiz veritabanı yada rss kaynaklarından çektiği son 5 haberi 10 saniyede 1 kez değiştirerek 5 adet haberi slide show haline getirecek, dilediğimiz anda istediğimiz habere geçebilme imkanı sağlayacak.

http://img195.imageshack.us/img195/8083/jqueryflashnews.jpg

Artık neyi neden yazdığımızı açıklamama yardımcı olacak hedefe sahibiz. Öncelikle scripti statik bir sayfa olarak yazacağım, yani en basitten başlayacağız. Daha sonra oluşturduğumuz statik sayfa üzerinde geliştirmeler yaparak scriptimizi veritabanı ve rss desteği ile çalışabilir duruma getireceğim.
Aşağıda yazdığım kodlar statik_haber.html dosyasında yeralmaktadır.
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9" />
<script language="JavaScript" type="text/javascript" src="jquery-1.3.2.js"></script>
<!--Bir üst satırda jquery kütüphanesinin makalenin yazıldığı tarihteki enson sürümünü indirdikten sonra scriptimizde kullanmak üzere browserımıza tanıtıttık şimdi gelelim jquery kullanarak oluturduğumuz scriptimize-->

<script language="JavaScript" type="text/javascript">
var sonraki=0; //scriptimizin içerik değiştireceği anda hangi içeriği göstereceği değirini tutan değişken.
var haber_interval; // Scriptimizin içeriği otomatik olarak kaç saniye aralıklar ile değiştireceği değerini tutan değişken

$(document).ready(function(){ // bu fonksiyon içerisinde yazılan her olay döküman load olduğunda çalışmaya başlar.
$('#haberTasiyiciIn').html($('#haberler .haber').eq(0).html()); // Sayfa load olduğunda #haberler id li div in içerisindeki ilk haber classlı div'in içeriğini eq(0) selectoru yardımı ile #haberTasiyiciIn id'li div'in içeriği olarak atıyoruz.

haber_interval=setInterval(haberGetirAuto,10000);// setInterval fonksiyonu ile browserımıza haberGetirAuto() fonksiyonumuzu 10 saniyede 1 çalıştırması emrini veriyoruz.
Uzerinde(); // cursorumuzu haberin üzerine getirdğimiz anda browsera nasıl davranması gerektini söyleyen bir script hazırlayarak sayfa load olduğunda çalışması için bu bloğa yazıyoruz.

});

function haberGetir(sira){ //bu foksiyon paremetre olarak görüntülemek istediğiniz haberin numarasını alır ve #haberTasiyiciIn id li div in içeriğini, tıkladığınız haberin içeriği olarak değitirir.
sonraki=sira;
$('#haberTasiyiciIn').fadeTo(1000,0,function(){
$(this).html($('#haberler .haber').eq(sira).html()).fadeTo(1000,1);

});
}

function haberGetirAuto(){ //haberleri sıralı olarak 10 saniyede 1 değştiren fonksiyonumuz.
if($('#haberler .sira:last').text()==sonraki+1){ //bu kontrol haberin enson haber olup olup olmadığını kestirebilmek için yapılıyor eğer şuanda gösterilen haber son haberse ilk haberin çağırılması için sonraki değeri sıfırlanıyor. Eğer değilse sonraki değeri 1 attırılarak haber çağırılıyor.
sonraki=0;
}
else{
sonraki=sonraki+1;
}

$('#haberTasiyiciIn').fadeTo(1000,0,function(){
$(this).html($('#haberler .haber').eq(sonraki).html()).fadeTo(1000,1);
});
}

function Uzerinde(){ // bu foksiyon ise cursorumuz haberin üzerinde veya haber numarasının üzerinde ise browser a gönderdiğimiz haber_interval zamanlı görevini iptal ediyor. cursor diğer alanlara yöneldiğinde haber_interval görevini yeniden gönderiyor. Bu işlemi yaparken çok jullanışlı olduğuna inandığım hover event ını kullanıyorum.

$('#numaraTasiyici a').hover(function(){
clearInterval(haber_interval);
},function(){
haber_interval=setInterval(haberGetirAuto,10000);
});

$('#haberTasiyici').hover(function(){
clearInterval(haber_interval);
},function(){
haber_interval=setInterval(haberGetirAuto,10000);
});
}


</script>
<!-- stillere çok kasmadım sizler sitenizin tasarımına göre dözenlemeler yapabilirsiniz.-->
<style type="text/css">
p,h1,h2,h3,h4,h5,h6{ margin:0px}
#haberTasiyici{border:1px solid #ccc;width:30em;}
.haber{display:none;}
.sira{display:none;}
.haberIn {margin:10px;}
.haberIn h2{color:#AA0000;margin:0px;}
.haberIn p {color:#999;}
.haberIn p.tarih {color:#cc0000;font-size:8pt;}
#numaraTasiyici ul{ height:30px; list-style-type:none;margin:0;}
#numaraTasiyici ul li{float:left;margin:0;padding:0;}
#numaraTasiyici ul li a{display:block;text-decoration:none;background:#ffffdd; color:#AA0000;border:1px solid #eee;padding: 5px 10px 5px 10px;margin:4px 4px 0 0;}
#numaraTasiyici ul li a:hover,a:active{ border:1px solid #999;}
</style>
</head>
<body><!-- haberTaciyiciIn divi bizim görünen ve içeriği değişen divimiz -->
<div id="haberTasiyici">
<div id="haberTasiyiciIn"></div>
</div>
<div id="numaraTasiyici"><!-- numaraTasiyici divi haber numaralarının bulunduğu divimiz -->
<ul>
<li><a href="#" onclick="haberGetir(0);">1</a></li>
<li><a href="#" onclick="haberGetir(1);">2</a></li>
<li><a href="#" onclick="haberGetir(2);">3</a></li>
<li><a href="#" onclick="haberGetir(3);">4</a></li>
</ul>
</div>
<div id="haberler"><!-- haberler divi görünmeyen yani display:none durumundaki divleri taşıyan divimiz. haber sınıfına sahip divlerimiz output olarak görünnmüyorlar fakat html miz içerisinde yer aldıkları için içerilerinde yer alan haberIn divlerinin içeriklerini alarak haberTasiyiciIn div'inin içeriği ile sıra ile değiştirerek yapmak istediğimiz şeyi gerçekleştirebiliyoruz.-->
<div class="haber">
<div class="haberIn">
<h2>Haber1</h2>
<p class="tarih">23 Nisan 2009, Perşembe</p>
<p>Haber1 İçerik 1</p>
<a href="./haberDetay.php?id=1">Habere Git</a>
<span class="sira">1</span>
</div>
</div>
<div class="haber">
<div class="haberIn">
<h2>Haber2</h2>
<p class="tarih">18 Nisan 2009, Cumartesi</p>
<p>Haber2 İçerik 2</p>
<a href="./haberDetay.php?id=2">Habere Git</a>
<span class="sira">2</span>
</dir>
</div>
<div class="haber">
<div class="haberIn">
<h2>Haber3</h2>
<p class="tarih">12 Nisan 2009, Çarşamba</p>
<p>Haber3 İçerik 3</p>
<a href="./haberDetay.php?id=3">Habere Git</a>
<span class="sira">3</span>
</dir>
</div>
<div class="haber">
<div class="haberIn">
<h2>Haber4</h2>
<p class="tarih">7 Nisan 2009, Salı</p>
<p>Haber4 İçerik 4</p>
<a href="./haberDetay.php?id=4">Habere Git</a>
<span class="sira">4</span>
</dir>
</div>
<div class="haber">
<div class="haberIn">
<h2>Haber5</h2>
<p class="tarih">9 Nisan 2009, Perşembe</p>
<p>Haber5 İçerik 5</p>
<a href="./haberDetay.php?id=5">Habere Git</a>
<span class="sira">5</span>
</dir>
</div>
</div>
</body>
</html>


Yukarıdaki kodu html olarak kayıt edip çalıştırdığınızda scriptin çalışmasını görebilirsiniz. Aslında pclerinde apache ve php bulunmaya arkadaşlarında scripti görebilmeleri için önce bu sayfayı hazırladım. Şimdi de uygulamamızı biraz geliştirelim ve sayfalarında rss kullanarak içerikleri sergileyen arkadaşlar için scriptimizi modifiye edelim.
Aşağıda yazdığım kodlar rss_haber.php dosyasında yeralmaktadır.
CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script language="JavaScript" type="text/javascript" src="jquery-1.3.2.js"></script>
<script language="JavaScript" type="text/javascript">
var sonraki=0;
var haber_interval;

$(document).ready(function(){
$('#haberTasiyiciIn').html($('#haberler .haber').eq(0).html());

haber_interval=setInterval(haberGetirAuto,10000);
Uzerinde();

});

function haberGetir(sira){
sonraki=sira;
$('#haberTasiyiciIn').fadeTo(1000,0,function(){
$(this).html($('#haberler .haber').eq(sira).html()).fadeTo(1000,1);

});
}

function haberGetirAuto(){
if($('#haberler .sira:last').text()==sonraki+1){
sonraki=0;
}
else{
sonraki=sonraki+1;
}

$('#haberTasiyiciIn').fadeTo(1000,0,function(){
$(this).html($('#haberler .haber').eq(sonraki).html()).fadeTo(1000,1);
});
}

function Uzerinde(){

$('#numaraTasiyici a').hover(function(){
clearInterval(haber_interval);
},function(){
haber_interval=setInterval(haberGetirAuto,10000);
});

$('#haberTasiyici').hover(function(){
clearInterval(haber_interval);
},function(){
haber_interval=setInterval(haberGetirAuto,10000);
});
}


</script>
<style type="text/css">
p,h1,h2,h3,h4,h5,h6{ margin:0px}
#haberTasiyici{border:1px solid #ccc;width:30em;}
.haber{display:none;}
.sira{display:none;}
.haberIn {margin:10px;}
.haberIn h2{color:#AA0000;margin:0px;}
.haberIn p {color:#999;}
.haberIn p.tarih {color:#cc0000;font-size:8pt;}
#numaraTasiyici ul{ height:30px; list-style-type:none;margin:0;}
#numaraTasiyici ul li{float:left;margin:0;padding:0;}
#numaraTasiyici ul li a{display:block;text-decoration:none;background:#ffffdd; color:#AA0000;border:1px solid #eee;padding: 5px 10px 5px 10px;margin:4px 4px 0 0;}
#numaraTasiyici ul li a:hover,a:active{ border:1px solid #999;}
</style>
</head>
<body>
<?
//Bu satırdan önceki kodlarda statik_haber.html sayfasında yazdıklarımdan farkı yok.
header("Content-Type: text/html; charset=utf-8"); //rss kaynakları utf-8 karekter kodlaması ile oluşturlduğu için sayafamızın içerik tipini utf-8 olarak belirliyoruz.
$xml=simplexml_load_file("http://www.ntvmsnbc.com/id/24927486/device/rss/rss.xml");// Ben rss kaynağı olarak ntvmsnbc nin vizyondaki filmler kaynağını kullandım
foreach ($xml->channel->item as $item){ //tüm item node larının bir array içerisine alıyoruz.
$items[]=$item;
}
?>
<div id="haberTasiyici">
<div id="haberTasiyiciIn"></div>
</div>
<div id="numaraTasiyici">
<ul>
<? for($i=0; $i<5 ;$i++){ // sadece son 5 haberi göstermek istediğim için 5 maksimun değerli bir döngü oluşturuyorum be haber numaralarımı oluşturuyorum. ?>
<li><a href="#" onclick="haberGetir(<?=$i;?>);"><?=$i+1;?></a></li>
<? }?>
</ul>
</div>
<div id="haberler">
<? for($i=0; $i<5 ;$i++){ //son 5 haberi daha önce oluşurduğumuz $items[] arrayinden sırası ile yazdımak için yine maksimum 5 değerli bir döngü oluşturuyoruz. Bu da bize elde etmek istediğimiz html çıktısını veriyor. ?>
<div class="haber">
<div class="haberIn">
<h2><?=$items[$i]->title; ?></h2>
<p class="tarih"><?=$items[$i]->pubDate; ?></p>
<p><?=$items[$i]->description; ?></p>
<a href="<?=$items[$i]->link; ?>">Habere Git</a>
<span class="sira"><?=$i+1;?></span>
</div>
</div>
<? }?>

</div>
</body>
</html>


Rss desteği ile kodumuz bu hali aldı. Şimdi de içeriklerini veri tabanından çekerek gösteren arkadaşlar için kodumuzu biraz değiştirip, scriptimize veritabanı desteği sağlıyacağız. Veritabanı desteği için oluşturduğum tablonun yapısını aşağıda veriyorum.

CODE:
--
-- Tablo yapısı: `flash_news`
--

CREATE TABLE `flash_news` (
`id` int(11) NOT NULL auto_increment,
`title` tinytext NOT NULL,
`small_content` tinytext NOT NULL,
`content` text NOT NULL,
`news_date` datetime NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin5 AUTO_INCREMENT=6 ;

--
-- Tablo döküm verisi `flash_news`
--

INSERT INTO `flash_news` (`id`, `title`, `small_content`, `content`, `news_date`) VALUES
(1, 'Nam tempus vehicula ', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus vehicula ipsum id fermentum. Ut eleifend sapien non diam ultrices non euismod risus rutrum.', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus vehicula ipsum id fermentum. Ut eleifend sapien non diam ultrices non euismod risus rutrum. Nullam ut nisi at nisi interdum vehicula. Vivamus fringilla tristique felis, vitae ullamcorper erat viverra eget. In non ante nunc. Morbi nec felis et purus faucibus ultrices. Integer laoreet tellus id ipsum elementum feugiat. Curabitur rutrum tincidunt ligula, in suscipit mi interdum non. Aliquam consequat venenatis tincidunt. Quisque eu odio quam. Pellentesque vel nunc id ante sollicitudin tincidunt. Aenean laoreet tellus eu odio mattis vitae congue urna fringilla. Proin ultricies, massa a euismod mollis, lacus mi rutrum orci, pulvinar faucibus sem massa vitae tellus. Pellentesque eget lacus non ipsum iaculis congue sit amet at massa. Proin commodo ipsum sit amet urna laoreet nec faucibus nisl semper. Ut odio ligula, pellentesque a blandit nec, adipiscing sed mauris. Aliquam eleifend, est id semper ultricies, sapien nulla pharetra libero, at volutpat arcu mi in diam. Duis tincidunt semper diam posuere fermentum. Vestibulum at odio nulla, nec tristique ante. rnrnSuspendisse potenti. Sed iaculis massa congue libero condimentum id tristique felis condimentum. Phasellus quam risus, malesuada non laoreet quis, aliquam in turpis. Phasellus metus justo, faucibus eget sollicitudin quis, eleifend at ante. Sed libero felis, dapibus ultricies gravida at, vulputate ac dui. Cras in turpis sed lectus laoreet volutpat vitae vel tellus. Cras at elit dui. Proin vel eros enim, ac volutpat enim. Morbi condimentum ante id neque faucibus et vestibulum arcu lobortis. Integer eget lacus vel libero aliquet elementum ac ut ipsum. Donec augue purus, imperdiet et tristique vel, pharetra eu nisl. Aliquam tristique facilisis tellus quis convallis. Donec adipiscing, justo non aliquam rutrum, tortor nulla consequat nulla, ut eleifend velit mi non diam. Vivamus dictum elit non augue porttitor vitae pellentesque tortor facilisis. Morbi purus odio, interdum nec iaculis eu, sollicitudin vel lorem. rn', '2009-05-16 15:58:27'),
(2, 'Mauris ut mauris', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus semper dapibus. Cras cursus, tortor in porttitor pretium, elit lectus imperdiet ante, at porttitor odio lorem eu libero.', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempus semper dapibus. Cras cursus, tortor in porttitor pretium, elit lectus imperdiet ante, at porttitor odio lorem eu libero. Mauris ut mauris eu risus commodo laoreet eget id erat. Proin pharetra ipsum vitae ipsum varius eu feugiat est rutrum. Nulla faucibus dolor quis tellus iaculis sit amet vestibulum dolor gravida. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla laoreet semper feugiat. Ut quam ipsum, cursus in egestas eget, gravida ac sapien. Vivamus tincidunt enim a dui malesuada eget cursus tortor egestas. Donec vel mauris vitae massa aliquet dignissim eu eu nisi. Donec vitae enim orci. Donec ac neque leo, at lobortis neque. rnrnNam blandit accumsan blandit. In id tortor in leo viverra commodo iaculis non quam. Donec faucibus velit sed ipsum aliquam in semper erat tincidunt. Integer pharetra, arcu a pharetra pretium, diam lectus pretium magna, id imperdiet tellus risus nec ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed scelerisque feugiat tincidunt. Donec molestie facilisis sem, eu lacinia tortor tempor a. Vestibulum mattis, sem sed lobortis rutrum, purus elit fermentum dolor, ut sagittis magna elit sit amet urna. Cras lectus ante, vestibulum sed sagittis a, vestibulum sit amet ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed luctus velit et massa eleifend venenatis pellentesque mauris convallis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam ac diam lorem, sagittis condimentum diam. Curabitur sed lorem metus, a sagittis augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent ullamcorper elementum ipsum id gravida. Curabitur metus augue, consequat sed cursus vel, convallis eu justo. Curabitur suscipit mauris eu erat viverra lacinia. Quisque feugiat turpis id leo condimentum sagittis. rn', '2009-05-16 16:08:59'),
(3, 'Nam convallis', 'Vivamus non elementum risus. Etiam eget ultricies diam. Proin leo ante, vulputate id placerat sed, adipiscing a quam. Fusce iaculis viverra risus, id tempus mi faucibus id. Nulla sed varius odio. Praesent luctus, sapien id scelerisque tincidunt, lacus era', 'Vivamus non elementum risus. Etiam eget ultricies diam. Proin leo ante, vulputate id placerat sed, adipiscing a quam. Fusce iaculis viverra risus, id tempus mi faucibus id. Nulla sed varius odio. Praesent luctus, sapien id scelerisque tincidunt, lacus erat tempor odio, a condimentum mauris tellus nec velit. Nam convallis accumsan massa, ut facilisis nunc dictum id. Donec dui libero, convallis a gravida quis, rutrum ut leo. Nulla lorem elit, sollicitudin quis vulputate quis, vestibulum in quam. Ut suscipit ante nec sapien aliquet placerat hendrerit eros ornare. Sed sapien enim, pharetra eget condimentum eget, mattis sit amet ipsum. Aliquam lobortis mollis turpis quis gravida. Aliquam iaculis vulputate libero, at mattis nulla malesuada non. Maecenas et augue et lectus mattis facilisis in ut elit. Nulla elementum, massa at hendrerit dignissim, tortor eros viverra diam, vitae venenatis tortor eros faucibus nulla. Pellentesque in hendrerit nisi. Ut nec arcu venenatis quam malesuada ultricies quis id dui. Ut consectetur fermentum elit, et sodales magna pretium at. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc risus magna, vestibulum eu semper in, ullamcorper sagittis quam. rnrnSed congue, tellus ut cursus vehicula, justo massa volutpat neque, sit amet dictum nulla mauris eu nunc. Integer iaculis nibh sed nisi rhoncus sit amet bibendum neque vulputate. Proin vel tellus at sapien tempor placerat. Duis tempor metus sed urna sollicitudin ut commodo nisi ullamcorper. Fusce lacus orci, lobortis pulvinar rhoncus id, ultrices quis elit. Curabitur in ipsum augue. Praesent iaculis purus non erat ultricies tincidunt. Vestibulum vel risus non ligula eleifend elementum. Sed feugiat lacinia tincidunt. Aliquam erat volutpat. Morbi imperdiet lectus eget ipsum consectetur consectetur. Nullam feugiat ornare nunc, vel laoreet leo condimentum ut. Donec sed arcu nisi. rn', '2009-05-16 16:12:19'),
(4, 'Praesent eget', 'Praesent eget libero a nunc lobortis interdum nec eu turpis. Integer iaculis condimentum velit, in dapibus diam porttitor eu. Quisque eu tempor tortor. Praesent bibendum dolor nulla. Suspendisse sit amet diam eros. Duis a est ac nisl consectetur imperdiet', 'Praesent eget libero a nunc lobortis interdum nec eu turpis. Integer iaculis condimentum velit, in dapibus diam porttitor eu. Quisque eu tempor tortor. Praesent bibendum dolor nulla. Suspendisse sit amet diam eros. Duis a est ac nisl consectetur imperdiet. Mauris nulla risus, rhoncus feugiat commodo et, facilisis at leo. Quisque semper diam eu quam eleifend quis molestie ipsum ultrices. Nunc porttitor vestibulum risus, id ultrices sem consequat non. Quisque suscipit eros sed eros blandit id consectetur tellus porta. ', '2009-05-16 16:13:31'),
(5, 'Fusce commodo ', 'Fusce commodo sagittis malesuada. Curabitur interdum tellus sit amet arcu interdum laoreet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. ', 'Fusce commodo sagittis malesuada. Curabitur interdum tellus sit amet arcu interdum laoreet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc diam nisl, laoreet quis venenatis fermentum, iaculis et odio. Nullam ut nisi lacus. Cras ac enim nec dui semper viverra. Ut semper rutrum tortor a aliquam. Pellentesque vitae tellus ac quam auctor rutrum eget at metus. Mauris ut ligula enim. Mauris magna metus, laoreet in sagittis eu, dapibus eu nibh. Nam libero dui, congue vel pellentesque in, interdum at libero. Donec commodo pharetra iaculis. ', '2009-05-16 16:14:55');

-- --------------------------------------------------------


Yukarıda verdiğim sql i aşağıdaki sayfayı çalıştırmadan önce mysql veritabanında çalıştırınız. Bu size gerekli olan tabloyu ve örnek için 5 adet kayıt oluştıracaktır.
Aşağıda yazdığım kodlar db_haber.php dosyasında yeralmaktadır.

CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9" /> <!-- Farklı olarak kodumuza sayfamızın karekter kodlaması ekledik. Veri tabanında türkçe içerik çektiğimizde problem oluşturmaması için.-->
<script language="JavaScript" type="text/javascript" src="jquery-1.3.2.js"></script>
<script language="JavaScript" type="text/javascript">
var sonraki=0;
var haber_interval;

$(document).ready(function(){
$('#haberTasiyiciIn').html($('#haberler .haber').eq(0).html());

haber_interval=setInterval(haberGetirAuto,10000);
Uzerinde();

});

function haberGetir(sira){
sonraki=sira;
$('#haberTasiyiciIn').fadeTo(1000,0,function(){
$(this).html($('#haberler .haber').eq(sira).html()).fadeTo(1000,1);

});
}

function haberGetirAuto(){
if($('#haberler .sira:last').text()==sonraki+1){
sonraki=0;
}
else{
sonraki=sonraki+1;
}

$('#haberTasiyiciIn').fadeTo(1000,0,function(){
$(this).html($('#haberler .haber').eq(sonraki).html()).fadeTo(1000,1);
});
}

function Uzerinde(){

$('#numaraTasiyici a').hover(function(){
clearInterval(haber_interval);
},function(){
haber_interval=setInterval(haberGetirAuto,10000);
});

$('#haberTasiyici').hover(function(){
clearInterval(haber_interval);
},function(){
haber_interval=setInterval(haberGetirAuto,10000);
});
}


</script>
<style type="text/css">
p,h1,h2,h3,h4,h5,h6{ margin:0px}
#haberTasiyici{border:1px solid #ccc;width:30em;}
.haber{display:none;}
.sira{display:none;}
.haberIn {margin:10px;}
.haberIn h2{color:#AA0000;margin:0px;}
.haberIn p {color:#999;}
.haberIn p.tarih {color:#cc0000;font-size:8pt;}
#numaraTasiyici ul{ height:30px; list-style-type:none;margin:0;}
#numaraTasiyici ul li{float:left;margin:0;padding:0;}
#numaraTasiyici ul li a{display:block;text-decoration:none;background:#ffffdd; color:#AA0000;border:1px solid #eee;padding: 5px 10px 5px 10px;margin:4px 4px 0 0;}
#numaraTasiyici ul li a:hover,a:active{ border:1px solid #999;}
</style>
</head>
<body>
<?
$conn = mysql_connect("sunucu","kullanıcıAdı","şifre") or die ("Veritabani Sunucusuna baglanilamiyor!");// sunucu,kullaniciAdı,şifre ve veritabani değerlerini kendi veritabanınıza ait bilgileri girin.
$db = mysql_select_db("veritabanı") or die ("Veritabani secilemiyor!");
mysql_query('SET NAMES latin5');
mysql_query("SET CHARACTER SET latin5");
mysql_query("SET COLLATION_CONNECTION = 'latin5_turkish_ci'");

function tarih2timestamp($tarih){ // mysql tarih formatını sayfada görüntülemek için küçük bir fonksiyon
list($year,$mon,$day,$hour,$min,$sec)= split("[-/ /:]",$tarih);
return(mktime($hour,$min,$sec,$mon,$day,$year));
}

?>
<div id="haberTasiyici">
<div id="haberTasiyiciIn"></div>
</div>
<div id="numaraTasiyici">
<ul>
<? for($i=0; $i<5 ;$i++){?>
<li><a href="#" onclick="haberGetir(<?=$i;?>);"><?=$i+1;?></a></li>
<? }?>
</ul>
</div>
<div id="haberler">
<?
$i=0;
$query=mysql_query("SELECT * FROM flash_news ORDER BY news_date DESC LIMIT 5"); //tablomuz dan tarihe göre son 5 haberi çekiyoruz. Çektiğimiz kayıtları while döngüsü ile scriptimiz için gerekli html çıktısını oluşturmakta kullanıyoruz.
while ($row = mysql_fetch_assoc($query)) {?>
<div class="haber">
<div class="haberIn">
<h2><?=$row[title]; ?></h2>
<p class="tarih"><?=date("D, d M Y H:i:s e",tarih2timestamp($row[news_date])); ?></p>
<p><?=stripslashes($row[small_content]); ?></p>
<a href="<?='./haberDetay.php?id='.$row[id]; ?>">Habere Git</a>
<span class="sira"><?=$i+1;?></span>
</div>
</div>
<? $i++; }?>

</div>
</body>
</html>


Örnek kodları indirmek için tıklayın.
Alternatif link için tıklayın

Bu makale ile jquery dünjasına balıklama dalmış olduk bir sonraki makalede buluşmak dilegiyle kodlarla kalın.


Dia
okanatabag@gmail.com
2 Kasim 2007 14:43

İlgili Olabilecek Makaleler


Yorumlar (5)





Oguzz
17 Mayis 2009 17:54
Çok başarılı bir anlatım Okan. İndir > uygulamana dahil et :)


posulu_amca
18 Eylul 2009 18:12
hocam bu çalışmadıı ?


srhn
1 Mart 2010 15:51
link kırıktır...


By Necdet
4 Nisan 2010 16:51
Linkler çalışmıyor.Ama konu anlatımı güzel olmuş eline sağlık.
www.ensonhaber.com daki gibi geliştirirseniz çok seviniriz.


By Necdet
4 Nisan 2010 17:00
Alternatif Link : http://www.megaupload.com/?d=798Z0HZW

Ziyaretçi olarak yorum yazamazsınız. Üye olmak için tıklayın Üye iseniz giriş yapın.



MENÜ » FORUM
Menü » Takip et
RSS Facebook Twitter Friendfeed
Sık Kullanılanlar Google Yahoo Live
Menü » Paylaş
E-Posta ile gönder Twitter Facebook Friendfeed
Buzz Stumbleupon Delicious Digg