News slider Control using JQuery

This code snippets explained about how to implement the News slider functionality to your webpage. Here I implements this functionality through JQuery.

Steps :

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>

var MySize = 15;
var SliderDetails;

function SetSliders()
{
    jQuery('#mycarousel').jcarousel({
        size:MySize,
        scroll:5,animation:1000,
        itemLoadCallback: itemLoadCallbackFunction
    });
}

tag. You must add this tag to your default.aspx page for rendering the "Sliders".

This "jcarousel" has many parameters. In my sample i used only four basic parameters,
They are,
1) Size - used for determined number of content will be displayed to the slider
2) Scroll - How many items will be scroll While click the "Next" or "Previous" arrow from the slider.
3)animation - used for slider items moving speed in milliseconds
4) itemloadcallback - used for adding html controls to slider control.



function itemLoadCallbackFunction(carousel, state)
{  
   if(SliderDetails!=null)
   {
    for (var i = 0; i < MySize; i++) 
    {
      carousel.add(i,SliderDetails[i]);    
    }
    }
};



Above function is call when the slider is loaded, In this function only we add the each html item to "carousel" slider control.

7) Create another javascript function for assigning the slider content details,


function SetSliderDetails()
{
  var StrDetails = document.getElementById('<%=dvDetails.ClientID %>').innerHTML;
  SliderDetails = StrDetails.split('?');  
  MySize = SliderDetails.length - 1;
}



This javascript function is called from your code behind file "Default.aspx.cs"

All above codes are related to javascript. After finished these steps design your html page. Your design page must contains following codes,


 'div id="dvDetails" runat="server" style="display: none;"'
 '/div'

 'ul id="mycarousel" class="jcarousel-skin-tango"'
 '/ul'



The ul tag is used for slider control and div tag is used for store the slider details.


Do the following codes to your "default.aspx.cs" page,


Create a function "BindSliderDetails", within that function add your html tag to "dvDetails.html". In this sample i added an image and div control as an item for slider contents. You can add any tag to this control.

After added your slider details simply call the "SetSliderDetails" javascript from your code behind like this,


string s = "<script language='javascript'>SetSliderDetails();</script>";
Page.RegisterStartupScript("siv", s);



I also used two extra functions for removing and limits the length of the title.

Here i attached the complete sample application with source code. Please download and kindly post your feedbacks.



Attachments

News slider Control using JQuery (39399-2255-ImgeSlider.rar)