jquery Div tag Scrolling

Well..here i am displaying images in the div tags using jquery scrollable.

the below image is used to displaying the images in the horizontally using jquery horizontal slider.



the asp.net code for horizontal scrolling.

protected void dtlstimages_ItemDataBound(object sender, DataListItemEventArgs e)
{

if (e.Item.DataItem != null)
{
// Thumbview contains courses under every lessonplan, To display courses along with image
// we use the following

Localize lcimgtext = (Localize)e.Item.FindControl("lcimages");
Localize lchoriimages = (Localize)e.Item.FindControl("lchoriimages");

// To get the courses under a lessonplan we use following by passing planid
ClsBO.ClsPlanBO objclsbo = new ClsBO.ClsPlanBO();
DataSet ds = objclsbo.GetCoursePlans(Convert.ToInt64(dlst1.DataKeys[e.Item.ItemIndex]));


// Passing Gridview to get course image paths along with course titles
lcimgtext.Text = GetImages(ds);
lchoriimages.Text = GetHorizontalImages(ds);
}
}


And the methods am using above ...

protected string GetImages(DataSet ds)
{

// This method will be used to get the image path, coursename of the coueses under a plan id.
// and by adding HTML tags to the retrived values make the images,coursetitle displayed under a lesson plan
// All the HTML tags along with image path,coursetitle will be added to string "imgtext"
// finally return this imgtext.

// These images are viewed when we Expand Down (uses jQuery )


string imgtext = "span start here";
if (ds.Tables[0].Rows.Count > 0)
{

// To display 4 horizontal rows we use the following

double total = 0;

total = Math.Floor(Convert.ToDouble(ds.Tables[0].Rows.Count) / 4);

for (int count = 1; count <= ds.Tables[0].Rows.Count; count++)
{

imgtext += "open image tag here width='45px' alt=" + ds.Tables[0].Rows[count - 1]["coursetitle"].ToString()
+ " title=" + ds.Tables[0].Rows[count - 1]["coursetitle"].ToString()
+ " height='45px' src=" + ds.Tables[0].Rows[count - 1]["imagepath"].ToString()
+ " close image tag and insert break here" + ds.Tables[0].Rows[count - 1]["coursetitle"].ToString() + "insert break again.";

if ((count % 4) == 0)
{
imgtext += "span close and very next start span";
}
else
{
imgtext += "break here"
";
}

}
if (total > 0)
{

imgtext += "span close here";
}
}
return imgtext;
}

one more method am using here....


public string GetHorizontalImages(DataSet ds)
{

// This method will be used to get the image path, coursename of the coueses under a plan id.
// and by adding HTML tags to the retrived values make the images,coursetitle displayed under a lesson plan
// All the HTML tags along with image path,coursetitle will be added to string "horiimges"
// finally return this horiimges.

// These images are viewed when we scroll Left / Right (uses jQuery )
string horiimges = "";

for (int count = 1; count <= ds.Tables[0].Rows.Count; count++) {

horiimges += "paragraph start here and very next start image tag here width='45px' alt=" + ds.Tables[0].Rows[count - 1]["coursetitle"].ToString()
+ " title=" + ds.Tables[0].Rows[count - 1]["coursetitle"].ToString()
+ " height='45px' src=" + ds.Tables[0].Rows[count - 1]["imagepath"].ToString()
+ " end image tag and very next place break" + ds.Tables[0].Rows[count - 1]["coursetitle"].ToString() + "close p tag";

}
return horiimges;
}


And above i have taken a datalist for displaying images to scroll.

here jquery functions to scroll both sides


$(document).ready(function() {

window.api = $("#ctl00_maincontent_dlst1_ctl00_scroller").scrollable({ size: 5 }).autoscroll({
autoplay: false,
api: true
});
window.api = $("#ctl00_maincontent_dlst1_ctl00_scroller2").scrollable({ size: 5 }).autoscroll({
autoplay: false,
api: true
});
window.api = $("#ctl00_maincontent_dlst1_ctl01_scroller").scrollable({ size: 5 }).autoscroll({
autoplay: false,
api: true
});
window.api = $("#ctl00_maincontent_dlst1_ctl01_scroller2").scrollable({ size: 5 }).autoscroll({
autoplay: false,
api: true
});
window.api = $("#ctl00_maincontent_dlst1_ctl02_scroller").scrollable({ size: 5 }).autoscroll({
autoplay: false,
api: true
});
window.api = $("#ctl00_maincontent_dlst1_ctl02_scroller2").scrollable({ size: 5 }).autoscroll({
autoplay: false,
api: true
});
window.api = $("#ctl00_maincontent_dlst1_ctl03_scroller").scrollable({ size: 5 }).autoscroll({
autoplay: false,
api: true
});
window.api = $("#ctl00_maincontent_dlst1_ctl03_scroller2").scrollable({ size: 5 }).autoscroll({
autoplay: false,
api: true
});
window.api = $("#ctl00_maincontent_dlst1_ctl04_scroller").scrollable({ size: 5 }).autoscroll({
autoplay: false,
api: true
});
window.api = $("#ctl00_maincontent_dlst1_ctl04_scroller2").scrollable({ size: 5 }).autoscroll({
autoplay: false,
api: true
});
window.api = $("#ctl00_maincontent_dlst1_ctl05_scroller").scrollable({ size: 5 }).autoscroll({
autoplay: false,
api: true
});
window.api = $("#ctl00_maincontent_dlst1_ctl05_scroller2").scrollable({ size: 5 }).autoscroll({
autoplay: false,
api: true
});
});


I have taken page size 5 for datalist control. so that i taken 10 functions to scroll image dives for both sides.

The below image used to show images vertically using jquery slider





The jquery files we have to attach the application ..

jquery.js
jquery.min.js

and the concern javascript and css files need to develop by own. or else we can get it in google easy..