Image Gallery using Jquery and Listview in Asp.Net
Sometimes we have to create image gallery in Asp.Net Web application. By using jQuery we can create Image gallery easily with the Asp.Net Listview control.
In this article we will create the Image gallery dynamically by using the Listview control. We can get the images from database and we can bind to the Listview control. For our convenience here we are using the ArrayList to bind the images to Listview control.
To create the Image slideshow or Image Gallery we are going to use several jQuery files. Those are jquery-min.js, jquery-ui-1.7.1.custom.min.js, jquery.timers-1.2.js, jquery.easing.1.3.js, jquery.galleryview-3.0-dev.js and one css file jquery.galleryview-3.0-dev.css as shown below.
default.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="AspNetImageSlider._default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="js/jquery-min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.timers-1.2.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.galleryview-3.0-dev.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.galleryview-3.0-dev.css" />
<script type="text/javascript">
$(function () {
$('#myGallery').galleryView({
transition_speed: 2000, //INT - duration of panel/frame transition (in milliseconds)
transition_interval: 4000, //INT - delay between panel/frame transitions (in milliseconds)
easing: 'swing', //STRING - easing method to use for animations (jQuery provides 'swing' or 'linear', more available with jQuery UI or Easing plugin)
show_panels: true, //BOOLEAN - flag to show or hide panel portion of gallery
show_panel_nav: false, //BOOLEAN - flag to show or hide panel navigation buttons
enable_overlays: false, //BOOLEAN - flag to show or hide panel overlays
panel_width: 630, //INT - width of gallery panel (in pixels)
panel_height: 400, //INT - height of gallery panel (in pixels)
panel_animation: 'slide', //STRING - animation method for panel transitions (crossfade,fade,slide,none)
panel_scale: 'crop', //STRING - cropping option for panel images (crop = scale image and fit to aspect ratio determined by panel_width and panel_height, fit = scale image and preserve original aspect ratio)
overlay_position: 'bottom', //STRING - position of panel overlay (bottom, top)
pan_images: true, //BOOLEAN - flag to allow user to grab/drag oversized images within gallery
pan_style: 'drag', //STRING - panning method (drag = user clicks and drags image to pan, track = image automatically pans based on mouse position
pan_smoothness: 15, //INT - determines smoothness of tracking pan animation (higher number = smoother)
start_frame: 1, //INT - index of panel/frame to show first when gallery loads
show_filmstrip: true, //BOOLEAN - flag to show or hide filmstrip portion of gallery
show_filmstrip_nav: true, //BOOLEAN - flag indicating whether to display navigation buttons
enable_slideshow: false, //BOOLEAN - flag indicating whether to display slideshow play/pause button
autoplay: false, //BOOLEAN - flag to start slideshow on gallery load
show_captions: false, //BOOLEAN - flag to show or hide frame captions
filmstrip_size: 3, //INT - number of frames to show in filmstrip-only gallery
filmstrip_style: 'scroll', //STRING - type of filmstrip to use (scroll = display one line of frames, scroll filmstrip if necessary, showall = display multiple rows of frames if necessary)
filmstrip_position: 'bottom', //STRING - position of filmstrip within gallery (bottom, top, left, right)
frame_width: 164, //INT - width of filmstrip frames (in pixels)
frame_height: 80, //INT - width of filmstrip frames (in pixels)
frame_opacity: 0.5, //FLOAT - transparency of non-active frames (1.0 = opaque, 0.0 = transparent)
frame_scale: 'crop', //STRING - cropping option for filmstrip images (same as above)
frame_gap: 5, //INT - spacing between frames within filmstrip (in pixels)
show_infobar: true, //BOOLEAN - flag to show or hide infobar
infobar_opacity: 1//FLOAT - transparency for info bar
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ListView ID="lvUserPics" runat="server">
<EmptyDataTemplate>
<div style="text-align:center;">No Pictures Found</div>
</EmptyDataTemplate>
<LayoutTemplate>
<ul id="myGallery">
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</ul>
</LayoutTemplate>
<ItemTemplate>
<li>
<img border="0" style="border:none;" src="<%# Container.DataItem%>" />
</li>
</ItemTemplate>
</asp:ListView>
</div>
</form>
</body>
</html>
In code-behind file we have to bind the images as shown below.
default.aspx.cs:
using System;
using System.Collections;
namespace AspNetImageSlider
{
public partial class _default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
ArrayList arrList = new ArrayList();
arrList.Add("images/image1.jpg");
arrList.Add("images/image2.jpg");
arrList.Add("images/image3.jpg");
arrList.Add("images/image4.jpg");
arrList.Add("images/image5.jpg");
arrList.Add("images/image6.jpg");
arrList.Add("images/image7.jpg");
arrList.Add("images/image8.jpg");
arrList.Add("images/image9.jpg");
arrList.Add("images/image10.jpg");
lvUserPics.DataSource = arrList;
lvUserPics.DataBind();
}
}
}
The output is as shown below.
You can change the jQuery attribute to change the gallery view. For example you can change filmstrip_size value to four from three to display the four images in the slider at once.
AspNetImageSlider.zip (210.34 kb)
