ASP.NET 4.5.1 Hosting :: Cara Membuat Galeri Gambar Sederhana dengan Menggunakan Repeater Control dan Jquery pada ASP.NET

Dalam posting ini saya akan menjelaskan bagaimana membuat galeri gambar sederhana menggunakan kontrol repeater & jquery di ASP.NET
Langkah – 1: create new project.
Buka file> new> project> pilih web ASP.NET aplikasi> entri nama aplikasi> klik ok.

Langkah-2: add a folder untuk store image thumbnail.
Buka solution explorer> klik kanan pada solution explorer> add> folder baru> masukkan nama folder
Langkah-3: tambahkan sebuah folder untuk store image big.
Buka database> klik kanan pada table> add new table> tambah kolom> simpan> masukkan nama table> ok.
Langkah-4: add a webpage dan desain untuk sample image gallery
Buka solution explorer> klik kanan pada bentuk nama project solution explorer> add> new item> pilih bentuk formulir web / web menggunakan halaman master di bawah web> masukkan nama halaman> add.

Kode HTML
<h3>ASP.NET Simple Image Gallery</h3><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td width="150px" valign="top" align="center" style="border-right:3px solid #EEEEEE"><div id="ImageGallery" style="overflow:auto; height:350px; width:130px; display:inline-block;"><asp:Repeater ID="Repeater1" runat="server"><ItemTemplate><img src='Thumbnail/<%#Eval("FileName") %>' alt='<%#Eval("FileName") %>' width="100px" style="cursor:pointer" /></ItemTemplate></asp:Repeater></div></td><td valign="top" align="center"><img id="bigImage" alt="" /></td></tr></table>

Langkah-5: tulis kode jquery berikut untuk image gallery sederhana.
<script src="Scripts/jquery-1.7.1.js"></script><script language="javascript" type="text/javascript">$(document).ready(function () {$('#ImageGallery img').click(function () {

var bigImagePath = 'Images/' + $(this).attr('alt');$('#bigImage').attr('src', bigImagePath);});});</script>

Langkah-6: tulis kode berikut dalam page_load event untuk loading gambar thumbnail.
protected void Page_Load(object sender, EventArgs e){if (!IsPostBack){PopulateImages();}}

Berikut adalah fungsinya …
private void PopulateImages(){List<MyImages> myImages = new List<MyImages>();DirectoryInfo DI = new DirectoryInfo(Server.MapPath("~/Thumbnail"));foreach (var file in DI.GetFiles()){myImages.Add(new MyImages { FileName = file.Name });}Repeater1.DataSource = myImages;Repeater1.DataBind();}