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>
<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();}
Langkah-7: jalankan aplikasi.