Resim Galerisi ve Lightbox (Ders 2)

İlk dersimizde resimleri eklemeyi ve listelemeyi görmüştük. Bu dersimizde ise resimleri Lightbox eklentisini kullanarak listelemeyi göreceğiz.

Tekrar merhaba arkadaşlar,

Bir önceki dersimizde resim galerisi için veritabanı oluşturmayı, MYSQL bağlantısı kurmayı ve form oluşturup resim ekleme ve düzenleme işlemini yapmayı öğrenmiştik.

Bu dersimizde ise veritabanından çekilen verileri Lightbox 2 eklentisini kullanarak listelemeyi öğreniceğiz.

1. Adımda http://designresourcebox.com/snippet/lightbox-2-jquery-plugin/ adresine girerek "Download this file" linkine tıklayıp eklentimizi indiriyoruz.



Sonra eklentinin içinden çıkan images, css, js adlı klasörleri dosya dizinimizin olduğu bölüme kopyalıyoruz.

2. Adımda galeri.php dosyasını oluşturalım.

tagları arasına aşağıdaki Lightbox kodunu ekleyelim.


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

<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>

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

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />



Galeri.php dosyasımızın son hali şudur;


<?php   // Veritabanı bağlantısı

include('ayar.php'); ?>

<html>

<head>

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

<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>

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

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

</head>

<body>



// Listelemek için tablomuza bağlanıyoruz.

$resim = mysql_query("select * from resimler order by id desc") or die("Hata Olustu!");

while ($resim_cek = mysql_fetch_array($resim)){

?>

    <a href="images/ echo $resim_cek['b_resim'] ?>" rel="lightbox[roadtrip]"><img src="images/ echo $resim_cek['k_resim'] ?>" width="75px" height="75px" /></a>



// Ve resimleri çekiyoruz. ' rel="lightbox[roadtrip]" ' Bu kod Lightbox kodudur.

} ?>

</body>

</html>



Ve Lightbox eklentimiz artık çalışır durumdadır.

Bir önceki ders:  http://www.sanalkurs.net/resim-galerisi-ve-lightbox-ders-1-5174.html ?>



Kolay gelsin.

  • Etiketler;
LvntAyn LvntAyn
LeventAyan.Com
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

selamun aleykkum kardesım..ya sımdı sıtede verıtabandan resım ekleme ıle ılgılı makaleler buldum....ama pek anlamadım.kardesım sız yardımcı olursanız cok memnun olurum..şimdiden tesekkurler..msn bu ekleyın yardımcı olabılecek kısılerle konusalım ıns..
levent kardeşim. emeğine sağlık bu şekilde hazır bir paket sunman bize çok iyi birşey. çalışmalarının devamını dilerim.
lightbox ile resimleri görüntülerken logo görüntülenecek şekilde background yapılabilir mi?
Sa Abi benim yapamadıgım bir kaç yer var yardımcı olurmusunuz php admin paneli yaptım bunu oraya entegre edicem ama bi türlü yapamadım dosya secildikten sonra dosyanın gideceği adresi textboxun içerisine yazacak ondan sonra yazıyı gönder dediğim zamandada hem resim yüklencek hemde yazının içerisinde görüncek

Yukarı Git