connectseekers.com

Monday, 11 April 2016

Dynamic Thumbnails Image Preview Slider With Zoom Effect Using jQuery In Asp.Net and C#.Net

4/11/2016 - By Pranav Singh 0

This article will show you how you can create a dynamic thumbnails image preview slider with zoom effect using jquery in asp.net   and c#.net.
You can check the static gallery at given link http://tympanus.net/codrops/2011/01/27/thumbnails-preview-slider/

 So for this article first we will create a new asp.net application and add the below mention library into the header of the page.

 
<link rel="stylesheet" type="text/css" href="css/thumbnail_slider.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>


Now add the below code into the page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>

<!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>Dynamic Thumbnails Image Preview Slider With Zoom Effect Using jQuery In Asp.Net and C#.Net</title>
    <link rel="stylesheet" type="text/css" href="css/thumbnail_slider.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript">
            (function ($) {
                $.fn.thumbnailSlider = function (options) {
                    var opts = $.extend({}, $.fn.thumbnailSlider.defaults, options);
                    return this.each(function () {
                        var $this = $(this),
                                                o = $.meta ? $.extend({}, opts, $pxs_container.data()) : opts;

                        var $ts_container = $this.children('.ts_container'),
                                                $ts_thumbnails = $ts_container.children('.ts_thumbnails'),
                                                $nav_elems = $ts_container.children('li').not($ts_thumbnails),
                                                total_elems = $nav_elems.length,
                                                $ts_preview_wrapper = $ts_thumbnails.children('.ts_preview_wrapper'),
                                                $arrow = $ts_thumbnails.children('span'),
                                                $ts_preview = $ts_preview_wrapper.children('.ts_preview');


                        var w_ts_thumbnails = o.thumb_width + 2 * 5,
                                                h_ts_thumbnails = o.thumb_height + 2 * 5 + 6,
                                                t_ts_thumbnails = -(h_ts_thumbnails + 5),
                                                $first_nav = $nav_elems.eq(0),
                                                l_ts_thumbnails = $first_nav.position().left - 0.5 * w_ts_thumbnails + 0.5 * $first_nav.width();

                        $ts_thumbnails.css({
                            width: w_ts_thumbnails + 'px',
                            height: h_ts_thumbnails + 'px',
                            top: t_ts_thumbnails + 'px',
                            left: l_ts_thumbnails + 'px'
                        });

                        /*
                        calculate the top and left for the arrow of the tooltip
                        top       -> thumb height + border(2*5)
                        left      -> (thumb width + border)/2 -width/2
                        */
                        var t_arrow = o.thumb_height + 2 * 5,
                                                l_arrow = (o.thumb_width + 2 * 5) / 2 - $arrow.width() / 2;
                        $arrow.css({
                            left: l_arrow + 'px',
                            top: t_arrow + 'px'
                        });

                        /*
                        calculate the $ts_preview width -> thumb width times number of thumbs
                        */
                        $ts_preview.css('width', total_elems * o.thumb_width + 'px');

                        /*
                        set the $ts_preview_wrapper width and height -> thumb width / thumb height
                        */
                        $ts_preview_wrapper.css({
                            width: o.thumb_width + 'px',
                            height: o.thumb_height + 'px'
                        });

                        //hover the nav elems
                        $nav_elems.bind('mouseenter', function () {
                            var $nav_elem = $(this),
                                                       idx = $nav_elem.index();

                            /*
                            calculate the new left
                            for $ts_thumbnails
                            */
                            var new_left = $nav_elem.position().left - 0.5 * w_ts_thumbnails + 0.5 * $nav_elem.width();

                            $ts_thumbnails.stop(true)
                                                                       .show()
                                                                       .animate({
                                                                           left: new_left + 'px'
                                                                       }, o.speed, o.easing);

                            /*
                            animate the left of the $ts_preview to show the right thumb
                            */
                            $ts_preview.stop(true)
                                                                 .animate({
                                                                     left: -idx * o.thumb_width + 'px'
                                                                 }, o.speed, o.easing);

                            //zoom in the thumb image if zoom is true
                            if (o.zoom && o.zoomratio > 1) {
                                var new_width = o.zoomratio * o.thumb_width,
                                                              new_height = o.zoomratio * o.thumb_height;

                                //increase the $ts_preview width in order to fit the zoomed image
                                var ts_preview_w = $ts_preview.width();
                                $ts_preview.css('width', (ts_preview_w - o.thumb_width + new_width) + 'px');

                                $ts_preview.children().eq(idx).find('img').stop().animate({
                                    width: new_width + 'px',
                                    height: new_height + 'px'
                                }, o.zoomspeed);
                            }

                        }).bind('mouseleave', function () {
                            //if zoom set the width and height to defaults
                            if (o.zoom && o.zoomratio > 1) {
                                var $nav_elem = $(this),
                                                              idx = $nav_elem.index();
                                $ts_preview.children().eq(idx).find('img').stop().css({
                                    width: o.thumb_width + 'px',
                                    height: o.thumb_height + 'px'
                                });
                            }

                            $ts_thumbnails.stop(true)
                                                                       .hide();

                        }).bind('click', function () {
                            var $nav_elem = $(this),
                                                       idx = $nav_elem.index();

                            o.onClick(idx);
                        });

                    });
                };
                $.fn.thumbnailSlider.defaults = {
                    speed: 100, //speed of each slide animation
                    easing: 'jswing', //easing effect for the slide animation
                    thumb_width: 75, //your photos width
                    thumb_height: 75, //your photos height
                    zoom: false, //zoom animation for the thumbs
                    zoomratio: 1.3, //multiplicator for zoom (must be > 1)
                    zoomspeed: 15000, //speed of zoom animation
                    onClick: function () { return false; } //click callback
                };
            })(jQuery);
    </script>
    <script type="text/javascript">
        $(function () {
            $('#<%=divGallery.ClientID %>').thumbnailSlider({
                thumb_width: 174,
                thumb_height: 260,
                speed: 300,
                zoom: true,
                zoomspeed: 3000,
                zoomratio: 1.7
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div style="margin-top: 25%">
        <div class="content">
            <div id="divGallery" class="demo" runat="server">
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Here I have taken a div control (“divGallery”) making it run at server. In this div we will bind the gallery image tags.
Now check the .cs page code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace WebApplication3
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt = GetDataToBind();
            string imageHyperLinkIcon = "";
            string thumbImageString = "";
            for (int i = 0; i < dt.Rows.Count; i++)
            {
                imageHyperLinkIcon = imageHyperLinkIcon + "<li><a href=\"\">Image " + (i + 1) + "</a></li>";
                thumbImageString = thumbImageString + "<li><img src=\"" + dt.Rows[i]["ThumbImage"].ToString() + "\" alt=\"Thumb" + (i + 1) + "\" /></li>";
            }
            string galleryData = "<ul class=\"ts_container\">";
            galleryData = galleryData + imageHyperLinkIcon;
            galleryData = galleryData + "  <li class=\"ts_thumbnails\">";
            galleryData = galleryData + "  <div class=\"ts_preview_wrapper\">";
            galleryData = galleryData + "<ul class=\"ts_preview\">";

            galleryData = galleryData + thumbImageString;

            galleryData = galleryData + "</ul>";
            galleryData = galleryData + "</div>";
            galleryData = galleryData + " <span></span></li>";
            galleryData = galleryData + "</ul>";
            divGallery.InnerHtml = galleryData;
        }
        public DataTable GetDataToBind()
        {
            DataTable dt = new DataTable("GalleryImageTable");
            dt.Columns.Add(new DataColumn("ThumbImage", typeof(string)));

            DataRow dr1 = dt.NewRow();
            dr1["ThumbImage"] = "images/thumbsimage/1.jpg";
            dt.Rows.Add(dr1);

            DataRow dr2 = dt.NewRow();
            dr2["ThumbImage"] = "images/thumbsimage/2.jpg";
            dt.Rows.Add(dr2);

            DataRow dr3 = dt.NewRow();
            dr3["ThumbImage"] = "images/thumbsimage/3.jpg";
            dt.Rows.Add(dr3);

            DataRow dr4 = dt.NewRow();
            dr4["ThumbImage"] = "images/thumbsimage/4.jpg";
            dt.Rows.Add(dr4);

            DataRow dr5 = dt.NewRow();
            dr5["ThumbImage"] = "images/thumbsimage/5.jpg";
            dt.Rows.Add(dr5);

            DataRow dr6 = dt.NewRow();
            dr6["ThumbImage"] = "images/thumbsimage/6.jpg";
            dt.Rows.Add(dr6);

            return dt;
        }
    }
}

Here in above code I have create a datatable which I will use as a data source. You can fetch the detail from DB and use it. So as per gallery tag I have taken variable and later bind all the tag as per gallery requirement.
Now we have done run the application to check the output.



About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

0 comments:

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top