Dynamic Jquery Lightbox Example in Asp .Net

  In this asp .net tutorial we will learn how to create dynamic lightbox. Lightbox is a Jquery plugin used to show images and content in popup window. Few days back I have created an article about step by step lightbox integration and receives many request about how to use lightbox with database. So I am writing this article about how to create dynamic lightbox with database in asp .net. This tutorial will cover following techniques:

2. How to create dynamic lightbox in asp .net.
3. How to upload images to images folder and store their information in database.
4. How to get image names from database and display on page using asp .net.
 
 
Step1: Create a new asp .net website.
 
Step2: Create two new folders " UploadedImages" and " UploadedThumbs".
 
Step3: Create a new table in database.
 
CREATE TABLE [dbo].[ImageUpload](
	[Id] [int] IDENTITY(1,1) NOT NULL,
	[ImageName] [nvarchar](100) NULL,
	[ImageThumbnail] [nvarchar](100) NULL,
 CONSTRAINT [PK_ImageUpload] PRIMARY KEY CLUSTERED 
(
	[Id] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO
 
Step4: Download Lightbox: 
For Jquery Lightbox step by step integration you can also read my detailed article:   
Jquery Lightbox integration step by step tutorial
 
Step5: Extract the files from the ZIP/TAR folder. Now you will see these files in the folder.

Dynamic-Lightbox-with-database-in-asp-net
 
 
Step6: Paste css, images, js and photos folders from the extracted folder to your website folder.
 
Dynamic-Jquery-Lightbox-with-database-in-asp-net
 
Step7: Create a new Default.aspx page in your website.
 
Step5: Now add reference to JQUERY and CSS files. Add these lines of code between <head></head> tags. 

Note: All these files are already there in css and js folders.
 
 
    
    
    
 
Step8: Add following code to your Default.aspx page.
 
 
Step9: Modify your web.config file.

Connection string: 
 

        

 
 
Paste this line in your web.cong file inside <system.web> section. This will increase the default image file upload size and allows you to upload large sized image.
 
 
 
Step10: Add following Namespaces:
 
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
 
Step11: GenerateThumbNail() Method to generate image thumbnails. Paste in your Default.aspx.cs page. 
 
 public string GenerateThumbNail(string imageName, string thumbNailFolder, int width)
    {
        System.Drawing.Image image =
      System.Drawing.Image.FromFile(Server.MapPath("UploadedImages/" + imageName.ToString()));
        int srcWidth = image.Width;
        int srcHeight = image.Height;
        int thumbWidth = width;
        int thumbHeight;
        Bitmap bmp;
        if (srcHeight > srcWidth)
        {
            thumbHeight = (srcHeight / srcWidth) * thumbWidth;
            bmp = new Bitmap(thumbWidth, thumbHeight);
        }
        else
        {
            thumbHeight = thumbWidth;
            thumbWidth = (srcWidth / srcHeight) * thumbHeight;
            bmp = new Bitmap(thumbWidth, thumbHeight);
        }

        System.Drawing.Graphics gr = System.Drawing.Graphics.FromImage(bmp);
        gr.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
        gr.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
        gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;
        System.Drawing.Rectangle rectDestination =
               new System.Drawing.Rectangle(0, 0, thumbWidth, thumbHeight);
        gr.DrawImage(image, rectDestination, 0, 0, srcWidth, srcHeight, GraphicsUnit.Pixel);
        string aa = Server.MapPath("~/" + thumbNailFolder + "/" + imageName);

        bmp.Save(HttpContext.Current.Server.MapPath("~/" + thumbNailFolder + "/" + imageName));
        bmp.Dispose();
        image.Dispose();
        return aa;

    }
 
Step12: Button Click event to upload images and thumbnails and store their information in database.
 
protected void btnUploadImage_Click(object sender, EventArgs e)
    {
        string fileNameWithPath = Server.MapPath("~/UploadedImages/") + myFielUpload.FileName.ToString();
        myFielUpload.SaveAs(fileNameWithPath);

        //===== Generate thumbnail
        GenerateThumbNail(myFielUpload.FileName, "UploadedThumbs", 100);

        //---- Store image and image thumbnail information to database.
        //====== Getting connection string defined in the web.config file. Pointed to the database we want to use.
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["myConnection"].ConnectionString);

        //======= Insert Query.
        string cmdText = "INSERT INTO ImageUpload (ImageName,ImageThumbnail) VALUES (@ImageName,@ImageThumbnail)";

        //====== Providning information to SQL command object about which query to 
        //====== execute and from where to get database connection information.
        SqlCommand cmd = new SqlCommand(cmdText, con);

        //===== Adding parameters/Values.
        cmd.Parameters.AddWithValue("@ImageName", myFielUpload.FileName);
        cmd.Parameters.AddWithValue("@ImageThumbnail", myFielUpload.FileName);

        //===== To check current state of the connection object. If it is closed open the connection
        //===== to execute the insert query.
        if (con.State == ConnectionState.Closed)
        {
            con.Open();
        }

        //===== Execute Query.
        cmd.ExecuteNonQuery();

        //===== close the connection.
        con.Close();



        //==== Bind images to image gallery.
        bindImageGallery();
    }
 
Note: Here I have used simple image upload control to upload files and thumbnails. You can also use AjaxControlToolkit's AjaxFileUpload control to upload multiple files and thumbnails at once.
You can read my detailed artilce here: Multiple image upload with thumbnails example in asp .net
 
Step13: bindImageGallery() Method to bind images into datalist.
 
 public void bindImageGallery()
    {
        //====== Getting connection string defined in the web.config file. Pointed to the database we want to use.
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["myConnection"].ConnectionString);

        //======= Select Query.
        string cmdText = "SELECT * FROM ImageUpload";

        //====== Providning information to SQL command object about which query to 
        //====== execute and from where to get database connection information.
        SqlCommand cmd = new SqlCommand(cmdText, con);

        //===== To check current state of the connection object. If it is closed open the connection
        //===== to execute the insert query.
        if (con.State == ConnectionState.Closed)
        {
            con.Open();
        }

        //===== Execute Query and bind data to Datalist.
        dtlstImageGallery.DataSource = cmd.ExecuteReader();
        dtlstImageGallery.DataBind();
    }
 
Step14: Page_Load() Method:
 
if (!Page.IsPostBack)
        {
            bindImageGallery();
        }
 
 
 
About Us | Terms of Use | Privacy Policy | Disclaimer | Contact Us Copyright © 2012-2024 CodingFusion
50+ C# Programs for beginners to practice