Asp.net JQuery lightbox ile Resim Galerisi SlideShow Yapımı

Bu dersimizde lightbox kullanarak basit bir resim galerisi yapacağız, Oluşturacağımız galeri ile görüntülenen resimlerden birine tıkladığında lightbox devreye girecek ve resimler slideshow şeklinde değişecek. Uygulamanın çalışan halini konu sonundan indirebilirsiniz…
İlk olarak yüklenen resimleri saklayabilmek için bir veritabanı oluşturuyoruz.

Uygulamamızda resim yükleme ve resimleri görüntüleme işlemi için aşağıdaki form görüntüsünü oluşturuyoruz

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>http://www.aspnetornekleri.com/ JQuery Slide Örneği</title>
<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center">
<tr><!-- www.aspnetornekleri.com -->
<td colspan="2" height="200">
</td>
</tr>
<tr>
<td>
Resim:
</td>
<td>
<asp:FileUpload ID="yuklenecekresim" runat="server" />
</td>
</tr>
<tr>
<td>
Resim Açıklması:
</td>
<td>
<asp:TextBox ID="resimaciklama" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="kaydetbuton" runat="server" Text="Kaydet" OnClick="kaydetbuton_Click" />
</td>
</tr>
<tr><!-- www.aspnetornekleri.com -->
<td colspan="2">
<asp:DataList ID="resimlistesi" runat="server" RepeatColumns="3" CellPadding="5">
<ItemTemplate>
<a id="imageLink" href='<%# Eval("resimadi","~/slideresimleri/{0}") %>' title='<%#Eval("aciklama") %>'
rel="lightbox[Brussels]" runat="server">
<asp:Image ID="Image1" ImageUrl='<%# Bind("resimadi", "~/slideresimleri/{0}") %>'
runat="server" Width="112" Height="84" />
</a>
</ItemTemplate>
<ItemStyle BorderColor="Brown" BorderStyle="dotted" BorderWidth="3px" HorizontalAlign="Center"
VerticalAlign="Bottom" />
</asp:DataList>
</td>
</tr>
</table>
<br />
</div><!-- www.aspnetornekleri.com -->
</form>
</body>
</html>


Resim yükleme ve yüklenen resimleri listeleme için gerekli olan kodlarımızın çalışabilmesi için
using System.Data;
using System.Data.OleDb;
using System.IO;
namespacelerini eklemeniz gerekiyor

protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
dalistdoldur();
}
}
protected void dalistdoldur()
{
OleDbConnection baglanti=new OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0; DATA Source=" + Server.MapPath("App_Data/slide.accdb"));
baglanti.Open();
//www.aspnetornekleri.com
OleDbCommand komut=new OleDbCommand("select resimadi,aciklama from resimler",baglanti);
OleDbDataAdapter da= new OleDbDataAdapter(komut);
DataTable dt = new DataTable();
da.Fill(dt);
resimlistesi.DataSource = dt;
resimlistesi.DataBind();
baglanti.Close();
}
protected void kaydetbuton_Click(object sender, EventArgs e)
{
OleDbConnection baglanti=new OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0; DATA Source=" + Server.MapPath("App_Data/slide.accdb"));
baglanti.Open();
//www.aspnetornekleri.com
string dosyaadi = Path.GetFileName( yuklenecekresim.PostedFile.FileName);
yuklenecekresim.SaveAs(Server.MapPath("slideresimleri/" + dosyaadi));
//www.aspnetornekleri.com
OleDbCommand komut=new OleDbCommand("insert into resimler(resimadi,aciklama) values (@resimadi,@aciklama)",baglanti);
komut.Parameters.AddWithValue("@resimadi", dosyaadi);
komut.Parameters.AddWithValue("@aciklama", resimaciklama.Text);
komut.ExecuteNonQuery();
baglanti.Close();
resimaciklama.Text = string.Empty;
dalistdoldur();
}

SlideShow başlaması için yüklenen resimlerden birine tıklanması gerekiyor..

JQuery lightbox SlideShow İndir

You may also like...

Subscribe
Bildir
guest
7 Yorum
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Onur TURAN

Süper Paylaşım Hocam Teşekkür ederim 🙂

BilisimOgretmeni

rica ederim işinizi yaradıysa ne mutlu iyi çalışmalar…

aykut

hocam ben rel=”lightbox[Brussels]” yazınca hiçbir etkisi olmuyor ve sizinki gibi çıkmıyor ne yapmalıyım

BilisimOgretmeni

kodların tamamını görmeden birşey demem çok zor konu sonunda uygulamanın çalışan versiyonu var onu indirip kontrol edebilirsiniz…

sinan

Merhaba ,
Elinize sağlık tam aradığım şey 🙂

BilisimOgretmeni

rica ederim iyi günler iyi çalışmalar

murat

hocam Allah razı olsun. çok güzel paylaşımlar

7
0
Yazı hakkındaki yorum, görüş ve önerilerinizi yazınx
()
x