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.
Some of my previous articles are as follows: Sign Up Form For Newsletter In Asp.Net Using C# and Css3, Stylish Button Using Css3 In Asp.net, How to Get Mouse Pointer Cordinate Inside a Div Using jQuery In Asp.Net, Get User Detail Like City,County,Region,Zip Code Using IP Address In Asp.Net, Facebook Style Lightbox jQuery Plugin To Display Images Like Facebook In Asp.Net, Webcam Integration Using jQuery Webcam Plugin In Asp.Net, Asp.Net Dynamic jQuery Photo Gallery Plugin With Zoom Effect Using Css.
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
0 comments:
Please let me know your view