4:43 AM
Autoscroll slideshow using jquery in Asp.net control or slide show using Repeater or Datalist Control
Posted by vijay
Introduction
Here i share my code to create a horizontal slide show using
jquery...
when u get find any jquery code they give example
with only static images..But now here i get the image from the database. Also
here i use asp.net control to slideshow the images.
we all store the images only in database..Then its very easy
to keep and find the images..
This is auto scroll slide show for an every three seconds
its will change the images smoothly..
Here i gave the jquery file with url..so you can easily
download and merge the file with your project...
Also you can use data list control instead of repeater
control..
Here i store only the image path in database...For yours
customize store images as byte in database and retrieve bind it image
control...
By using Next and Previous button you can change the images
in slide show....
|
<link
href="http://sorgalla.com/projects/jcarousel/style.css"
rel="stylesheet" type="text/css" />
<script
type="text/javascript"
src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.4.2.min.js"></script>
<script
type="text/javascript"
src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>
<link
rel="stylesheet" type="text/css"
href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css"
/>
<script type="text/javascript">
function
mycarousel_initCallback(carousel) {
// Disable
autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function()
{
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function()
{
carousel.startAuto(0);
});
// Pause
autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function()
{
carousel.startAuto();
});
};
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
auto: 2,
wrap: 'last',
initCallback:
mycarousel_initCallback
});
});
</script>
|
|
<div id="Div1"> <asp:Repeater ID="dlNews"
runat="server"> <HeaderTemplate>
<ul
id="mycarousel"
class="jcarousel-skin-tango"> </HeaderTemplate> <ItemTemplate> <li>
<a
href=" "
title ='<%#Eval("TIT")%>'><asp:Image ID="imglst"
runat="server"
ImageUrl='<%#Eval("src")
%>'
</asp:Repeater>
</div>
|
In Code get the file bind into repeater control…
I hope you learn something useful ..post your comment here….