Tuesday, January 12, 2016

How to implement carousel image slider in asp net using flexisel responsive jquery

Friday, January 8, 2016

Asp.net: Get public IP address of visitors

Saturday, January 2, 2016

Merge two or more datatables in asp.net using C# and VB.net

Friday, January 1, 2016

Asp.net: Create a image gallery using colorbox Jquery plugin

 In this article I am going to explain how to create image gallery in asp.net using colorbox Jquery plugin


Description:
To implement this functionality I am using datalist control. When we click on image, it open in popup and we can see the entire images here via using forward and backward button. I am using the Colorbox jquery plugin to open images in popup.

Implementation:
Create store procedure to fetch images from database table (Tb_Photo)

How to Create Image Gallery in Asp.net using Datalist Data Control

Introduction: In this article I will explain how we can Create Image gallery in Asp.net using Datalist Data Control.
 Image Gallery

Description:

Here I use the Datalist Data control to create Image galley, user click on Image, image will open in popup and able to see images via click on Next and Previous button.
Take a new project/Website. Add webform to project and drag and drop the Datalist Control from Toolbox. Here I bind Datalist control using SqlDataSource. Put the below style and script in between Head Tag:
<style type = "text/css">
     .BackGround
     {
        display: none;
        position: absolute;
        top: 0px;
        left: 0px;
        background-color:black;
        z-index:100;
        opacity: 0.8;
        filter: alpha(opacity=60);
        -moz-opacity:0.8;
        min-height: 100%;
     }
     #showImage
     {
        display: none;
        z-index: 1000;
        position: fixed;
        top: 0;
        left: 0;
        background-color:White;
        height: 550px;
        width: 630px;
        padding: 3px;
        border: solid 1px black;       
     }
    .galleryTable
    {
        border:double 1px #D9D9D9;
        width:200px;
        text-align:left;      
    }
    .dlgallery
    {
        margin-left:200px;
    }
</style>