pillinetwork hesabınızla giriş yapın.

Jquery ile haber sitelerindeki gibi manşet reklam paneli yapımı

Arkadaşlar bu yazımda sizlere bir çok haber sitelerinde resimli manşet haber paneli nasıl yapılır onu göstereceğim

Bu panel için Jquery nin bir eklentisi olan JqueryUI tabs ı kullanacağız.

jqueryui.com eklentinin ana sayfası

direk indirmek için ise buraya tıklayınız.

indirdikten sonra bu dersimizde kullanacağımız şablonumuz ise cleantype.

cleantype için buraya tıklayınız

cleantype klasörümüzü sunucumuzdaki www veya public_html klasörümüze açalım ve index.html dosyasını index.php olarak değiştirelim.

daha sonra jquery-ui-1.7.2.zip dosyamızın içinden jquery.1.3.2.js dosyasını. ui ve themes klasörünüde index.php mizin bulunduğu www veya public_html klasörümüze kopyalayalım.

daha sonra demos/tabs/mouseover.html mizi editör programımızla açalım ve.

aşağıdaki kodları . index.php dosyamızdaki tagları arasına yazalım.

1
2
3
4
 
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />

	<script type="text/javascript" src="../../jquery-1.3.2.js"></script>

	<script type="text/javascript" src="../../ui/ui.core.js"></script>

	<script type="text/javascript" src="../../ui/ui.tabs.js"></script>

1
2
3
4
5
6
7
 
<script type="text/javascript">

	$(function() {

		$("#tabs").tabs({

			event: 'mouseover'

		});

	});

	</script>

bunlarıda hallettikten sonra.

mouseover.html içinde

ile baÅŸlayan(div id tabs dahil) end demodaki son
dahil olmadan olan bölümü kopyalayıp index.php dosyamızda
nin içini boşaltıp içine kopyalayalım.

önümüze aşağıdaki resimdeki gibi bir görüntü gelecek

\

şimdi sıra geliyor. tabları aşağıya alıp, tab sayısını yükselteceğiz.

bunun için .

1
2
3
4
5
 
<ul>

		<li><a href="#tabs-1">Nunc tincidunt</a></li>

		<li><a href="#tabs-2">Proin dolor</a></li>

		<li><a href="#tabs-3">Aenean lacinia</a></li>

	</ul>

ul listemizi div id=tabs-3 divimizin kapanma tagı olan 
1
 
</div>
in bitişine taşıyoruz.

ekran görüntümüz aşağıdaki şekilde olmalı

\

sonraki adım ise div tabs-4 ve div tabs-5 olmak üzere 2 tane daha div yapacağız ve bunlara linkleyecek olan

1
2
 
<li><a href="#tabs-4">Aenean lacinia</a></li> 

<li><a href="#tabs-5">Aenean lacinia</a></li>

kodu ile 2 tane daha tab ekliyelim. ve dan önceki Aenean lacinia gibi yazıyı 1-2-3-4-5 rakamlara değiştirebiliriz eğer isterseniz . başka bir image dosyası koyarak image butonlarıda yapabilirsiniz.

sıra geldi tablarımızın içini silmeye..

div id=tabs-1 den itibaren divlerimizin içini boşaltıyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<div id="tabs-1">

		

	</div>

	<div id="tabs-2">

		

	</div>

	<div id="tabs-3">

	

	</div>

	<div id="tabs-4">

	

	</div>

	<div id="tabs-5">

		

	</div>

şimdilik onlar boş kalıyor. ve bir tane database yaratıyoruz.
ben db ismini abc olarak seçtim. içinede 5 haber için bilgilerle doldurdum.

haber tablosununda sql i aşağıdadır.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
CREATE TABLE IF NOT EXISTS `haber` (

  `id` int(4) NOT NULL AUTO_INCREMENT,

  `baslik` text CHARACTER SET utf8 NOT NULL,

  `buyukresim` text CHARACTER SET utf8 NOT NULL,

  `ufakresim` text CHARACTER SET utf8 NOT NULL,

  `manset` int(1) NOT NULL,

  PRIMARY KEY (`id`)

) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;



--

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

--



INSERT INTO `haber` (`id`, `baslik`, `buyukresim`, `ufakresim`, `manset`) VALUES

(1, 'haber', 'buyuk1.jpg', 'kucuk1.jpg', 1),

(2, 'haber2', 'buyuk2.jpg', 'buyuk2.jpg', 1),

(3, 'haber3', 'buyuk3.jpg', 'ufak3.jpg', 1),

(4, 'haber4', 'buyuk4.jpg', 'ufak4.jpg', 1),

(5, 'haber5', 'buyuk5.jpg', 'ufak5.jpg', 1);

bunuda halledince.

database baglantimizi yapacak olan php kodumuzu index.php sayfamizin en üstüne ekliyoruz.

1
2
3
4
5
 
mysql_connect("localhost", "root", "") or die(mysql_error());



mysql_select_db("abc") or die(mysql_error());

$query= "SELECT * from haber";

$query = mysql_query($query);

ve veritabanimizdan bilgilerimizi çekelim.

şimdi geldik işin zor kısmına. 2 tane loop çevirmemiz lazım 1 i resimler diğeri ise tablar için.

onunda kodu ÅŸu ÅŸekildedir.
aşağıdaki kod tabs divimizin içeriği nasıl olur ona dair.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<div id="tabs">

				<? $tabid=1	;while($haber = mysql_fetch_array($query)) {  ?>

	

          <?  

		  echo "<div id='tabs-".$tabid."'><a href=haber.php?id=".$haber['id']."'><img src='/images/".$haber['buyukresim']."' border='1'></a></div>"; 

		  $tabid= ++$tabid; ?>

	

	<?	}?>

<ul>

<? $tabid2=1;$query2= "SELECT id from haber";

$query2 = mysql_query($query2);	while($haber2 = mysql_fetch_array($query2)){



?>

	<?		echo '<li><a href="#tabs-';

	echo $tabid2;

	echo '"><span>';

	echo $tabid2;

	echo "</span></a></li>";

            	

			

			  $tabid2= ++$tabid2; } ?>

		  

		  </ul>

</div>

tek döngü ile de bunu yapabiliriz ama böyle olunca anlaşılması daha basit olsun diye bu şekilde kodladım.

şimdi www veya public_html içinde images diye bir klasör yaratıyoruz ve buyuk1.jpg buyuk2.jpg gibi resimlerimizi aynı boyutta olmak üzere içine atıyoruz.

böylece sistemimiz tamam oluyor db den resim çekip haber.php?id= şekindeki linkimize resim üzerine tıklandığında gidiyor. biraz css ile uğraşıp istediğiniz boyuta getirmeniz gerekiyor.

aşağıda bu dersi yazarken kullandığım dosyalar var fakat. telif hakları nedeniyle editlenmiş template i veremiyorum. ama çalışan manşet paneli düz php içinde aşağıdaki linktedir.

jquery ile manÅŸet haber paneli yapma

Spacer
Spacer
/* Etiketler: , , , , */
/* thedon yazdı. 15 Şubat 2010 09:32. 7 yorum var */

Yorumlar

Qjuery yeni bir framework :) güzel isim

/* XSS */
/* Frosten | 15 Åžubat 2010 12:21 */

Yazı için teşekkürler. Fakat şu saate kadar kocaman hatalı başlığın düzeltilmemesi de ilginç.

/* Crypty | 15 Åžubat 2010 18:35 */

Bence yazının başlığı aynen kalsın daha dikkat çekici olmuş. Yazının başlığı böyle olmasaydı açıp okumazdım.

/* sosyal medya izleme | iyi yazılımcı olmak | içerik yönetim sistemleri */
/* acemimuhendis | 16 Åžubat 2010 08:49 */

umarım işinize yaramıştır. css ile değiştirerek istediğiniz şekile sokabilirsiniz. tabları sola alırsınız. milliyet tarzı olur ufak resimleri gösterirsiniz solda. vs vs

/* yarım yarım çok ses olacağına güçlü bir tek ses olalım. */
/* thedon | 16 Åžubat 2010 21:22 */

yahu başlığa niye takılıyosunuz? uygulayan var mı?

mouseover.html içinde
ile baÅŸlayan(div id tabs dahil) end demodaki son
dahil olmadan olan bölümü kopyalayıp index.php dosyamızda
nin içini boşaltıp içine kopyalayalım.

hiçbirşey anlamadım..

/* SonsuzluÄŸuBeklerken.. */
/* StilBerk | 22 Åžubat 2010 22:34 */

mouseover.html içinde ile başlayan(div id tabs dahil) end demodaki son dahil olmadan olan bölümü kopyalayıp index.php dosyamızda nin içini boşaltıp içine kopyalayalım.

orada di v id tagı olacak. kodamana yazı yazarken. ön izlemede o di v tagları gözüküyor ama yazı onaylanınca gözükmedi otomatik silmiş o nedenle bişi anlamadınız.

guzel bir bildiri olmuÅŸ. keÅŸke varsa demo falan linki verseydiniz.

demo değilde bilgisayarınızda çalıştırabileceğiniz halde burada var

/* yarım yarım çok ses olacağına güçlü bir tek ses olalım. */
/* thedon | 23 Åžubat 2010 12:54 */

teşekkürler

/* medyum,web tasarım,duvar kağıdı,bölme duvar,akıllı tahta */
/* iceberg34 | 30 Ekim 2011 13:44 */

üye olunpillinetwork sitelerine yorum ekleyebilmek ve daha fazlası için, üye olun ya da giriş yapın.

Bu yazıyı rapor et. Kural dışı içeriğe rastladığınızda editörlerimize rapor ederek müdahale edilmesini sağlayabilirsiniz. (Hangi durumlarda rapor edebilirim?)

Bu site

Nokta ve pilli ortak yapımı olan kodaman.org kolektif bir kod yazarları blogudur. Siz de katılabilirsiniz.

son yorumlar

devamı »

arama

pillinetwork