Dynamic Responsive jQuery Content Slider Plugin in Asp.net

By Unknown - Monday, September 21, 2015 - No Comments

(Dynamic jQuery Content Slider Plugin in Asp.net) – Slider Pro là một plugin jQuery chuyên nghiệp cho phép bạn hiển thị nội dung và hình ảnh. Plugin này rất phù hợp với các trang tin tức để xây dựng phần tin mới hoặc tin hot. Bài viết dưới đây sẽ hướng dẫn các bạn cách sử dụng Slider Pro kết hợp với Control Repeater để tạo Content Slider đẹp và chuyên nghiệp.

- B1: Tạo Project trong Microsoft Visual Studio 2010

- B2: Download thư viện Slider Pro tại đây, copy file jquery.sliderPro.js, jquery.sliderPro.min.js, jquery-1.11.0.min.js vào thư mục Js

- B3: Copy file slider-pro.min.css vào thư mục Styles

- B4: Mở file Site.css và nhập đoạn Code phía dưới

.slider-pro {

font-family: 'Open Sans', Arial;

}

#slider .sp-thumbnail-image-container {

width: 100px;

height: 80px;

overflow: hidden;

float: left;

}

#slider .sp-thumbnail-image {

height: 100%;

}

#slider .sp-thumbnail-text {

width: 170px;

float: right;

padding: 8px;

background-color: #F0F0F0;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

#slider .sp-thumbnail-title {

margin-bottom: 5px;

text-transform: uppercase;

color: #333;

}

#slider .sp-thumbnail-description {

font-size: 14px;

color: #333;

}

@media (max-width: 500px) {

#slider .sp-thumbnail {

text-align: center;

}

#slider .sp-thumbnail-image-container {

display: none;

}

#slider .sp-thumbnail-text {

width: 120px;

}

#slider .sp-thumbnail-title {

font-size: 12px;

text-transform: uppercase;

}

#slider .sp-thumbnail-description {

display: none;

}

- B5: Mở file Site.Master dạng HTML và bổ xung đoạn mã phía dưới trong thẻ Head

<title>jQuery Content Slider Plugin in Asp.net Repeater</title>

<asp:ContentPlaceHolder ID="HeadContent" runat="server">

</asp:ContentPlaceHolder>

</head>

- B6: Mở file Default.aspx dưới dạng HTML và nhập mã HTML

<%@ Page Title="jQuery Content Slider Plugin in Asp.net Repeater" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryContentSliderPlugin._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

$(document).ready(function ($) {

$('#slider').sliderPro({

width: 670,

height: 500,

orientation: 'vertical',

loop: false,

arrows: true,

buttons: false,

thumbnailsPosition: 'right',

thumbnailPointer: true,

thumbnailWidth: 290,

breakpoints: {

800: {

thumbnailsPosition: 'bottom',

thumbnailWidth: 270,

thumbnailHeight: 100

500: {

thumbnailsPosition: 'bottom',

thumbnailWidth: 120,

thumbnailHeight: 50

}

});

</script>

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<asp:Repeater ID="rptSliders" OnItemDataBound="rptSliders_ItemDataBound" runat="server">

</div>

</ItemTemplate>

</asp:Repeater>

</div>

<asp:Repeater ID="rptThumbnails" runat="server">

</div>

</div>

</ItemTemplate>

</asp:Repeater>

</div>

</asp:Content>

- B7: Viết Code cho file Default.aspx

C# Code

//Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials

using Microsoft.VisualBasic;

using System;

using System.Collections;

using System.Collections.Generic;

using System.Data;

using System.IO;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

namespace jQueryContentSliderPlugin

{

public partial class _Default : System.Web.UI.Page

{

#region "Bind Data"

private void BindData()

{

DataTable objBind = new DataTable();

var oColumns = objBind.Columns;

oColumns.Add("Caption", typeof(string));

oColumns.Add("data-src", typeof(string));

oColumns.Add("data-retina", typeof(string));

oColumns.Add("ImageName_Thumbnail", typeof(string));

oColumns.Add("Title", typeof(string));

oColumns.Add("Description", typeof(string));

objBind.Rows.Add("Title 1", "http://bqworks.com/slider-pro/images/image1_medium.jpg", "http://bqworks.com/slider-pro/images/image1_large.jpg", "http://bqworks.com/slider-pro/images/image1_thumbnail.jpg", "Caption 1", "Styles for Description in Slider1");

objBind.Rows.Add("Title 2", "http://bqworks.com/slider-pro/images/image2_medium.jpg", "http://bqworks.com/slider-pro/images/image2_large.jpg", "http://bqworks.com/slider-pro/images/image2_thumbnail.jpg", "Caption 2", "Styles for Description in Slider2");

objBind.Rows.Add("Title 3", "http://bqworks.com/slider-pro/images/image3_medium.jpg", "http://bqworks.com/slider-pro/images/image3_large.jpg", "http://bqworks.com/slider-pro/images/image3_thumbnail.jpg", "Caption 3", "Styles for Description in Slider3");

objBind.Rows.Add("Title 4", "http://bqworks.com/slider-pro/images/image4_medium.jpg", "http://bqworks.com/slider-pro/images/image4_large.jpg", "http://bqworks.com/slider-pro/images/image4_thumbnail.jpg", "Caption 4", "Styles for Description in Slider4");

objBind.Rows.Add("Title 5", "http://bqworks.com/slider-pro/images/image5_medium.jpg", "http://bqworks.com/slider-pro/images/image5_large.jpg", "http://bqworks.com/slider-pro/images/image5_thumbnail.jpg", "Caption 5", "Styles for Description in Slider5");

objBind.Rows.Add("Title 6", "http://bqworks.com/slider-pro/images/image6_medium.jpg", "http://bqworks.com/slider-pro/images/image6_large.jpg", "http://bqworks.com/slider-pro/images/image6_thumbnail.jpg", "Caption 6", "Styles for Description in Slider6");

objBind.Rows.Add("Title 7", "http://bqworks.com/slider-pro/images/image7_medium.jpg", "http://bqworks.com/slider-pro/images/image7_large.jpg", "http://bqworks.com/slider-pro/images/image7_thumbnail.jpg", "Caption 7", "Styles for Description in Slider7");

objBind.Rows.Add("Title 8", "http://bqworks.com/slider-pro/images/image8_medium.jpg", "http://bqworks.com/slider-pro/images/image8_large.jpg", "http://bqworks.com/slider-pro/images/image8_thumbnail.jpg", "Caption 8", "Styles for Description in Slider8");

rptSliders.DataSource = objBind;

rptSliders.DataBind();

rptThumbnails.DataSource = objBind;

rptThumbnails.DataBind();

}

#endregion

#region "Repeater Methods"

protected void rptSliders_ItemDataBound(object sender, System.Web.UI.WebControls.RepeaterItemEventArgs e)

{

if (e.Item.ItemType == ListItemType.Item | e.Item.ItemType == ListItemType.AlternatingItem)

{

string data_src = DataBinder.Eval(e.Item.DataItem, "data-src").ToString();

string data_retina = DataBinder.Eval(e.Item.DataItem, "data-retina").ToString();

HtmlImage imgblank = (HtmlImage)e.Item.FindControl("imgblank");

if (imgblank != null)

{

imgblank.Attributes.Add("data-src", data_src);

imgblank.Attributes.Add("data-retina", data_retina);

}

#endregion

#region "Event Handles"

protected void Page_Load(object sender, System.EventArgs e)

{

try

{

if (!IsPostBack)

{

BindData();

}

catch

{

}

#endregion

}

VB.NET Code

'Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials

Namespace jQueryContentSliderPlugin

Public Class _Default

Inherits System.Web.UI.Page

#Region "Bind Data"

Private Sub BindData()

Dim objBind As New DataTable

With objBind.Columns

.Add("Caption", GetType(String))

.Add("data-src", GetType(String))

.Add("data-retina", GetType(String))

.Add("ImageName_Thumbnail", GetType(String))

.Add("Title", GetType(String))

.Add("Description", GetType(String))

End With

rptSliders.DataSource = objBind

rptSliders.DataBind()

rptThumbnails.DataSource = objBind

rptThumbnails.DataBind()

End Sub

#End Region

#Region "Repeater Methods"

Private Sub rptSliders_ItemDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.RepeaterItemEventArgs) Handles rptSliders.ItemDataBound

If (e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem) Then

Dim data_src As String = DataBinder.Eval(e.Item.DataItem, "data-src")

Dim data_retina As String = DataBinder.Eval(e.Item.DataItem, "data-retina")

Dim imgblank As HtmlControls.HtmlImage = DirectCast(e.Item.FindControl("imgblank"), HtmlControls.HtmlImage)

If Not imgblank Is Nothing Then

imgblank.Attributes.Add("data-src", data_src)

imgblank.Attributes.Add("data-retina", data_retina)

End If

End Sub

#End Region

#Region "Event Handles"

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Try

If Page.IsPostBack = False Then

BindData()

End If

Catch ex As Exception

End Try

End Sub

#End Region

End Class

End Namespace

Chúc các bạn thành công!

Quang Bình

News Ticker