In this post, we will go through implementation of ppgallery image slider plug-in with asp.net repeater control. The plug-in information can be found here for download.
To start with this lets first see how ppgallery works. The basic implementation of goes as follows-
To use the plugin we need to take following file references-
The HTML structure of the plug-in should be like this-
To start with this lets first see how ppgallery works. The basic implementation of goes as follows-
To use the plugin we need to take following file references-
<link href="http://www.ppplugins.com/demo/ppgallery/ppgallery/css/ppgallery.css" rel="stylesheet" type="text/css" /> <link href="http://www.ppplugins.com/demo/ppgallery/ppgallery/css/dark-hive/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> <script type="text/javascript" src="http://www.ppplugins.com/demo/ppgallery/ppgallery/js/ppgallery.js"></script>We can download the CSS and JS file to your local system and take the reference from locally.
The HTML structure of the plug-in should be like this-
<ul id="gallery"> <li><a href="big image URL" title="Title"><img src="Thumbnail URL"></a></li> <li><a href="big image URL" title="Title"><img src="Thumbnail URL"></a></li> . . . . </ul>For example-
<ul id="gallery"> <li><a href="http://ppplugins.com/demo/ppgallery/images/l_01.jpg" title="Example of a title goes here."><img src="http://ppplugins.com/demo/ppgallery/images/s_01.jpg"></a></li> <li><a href="http://ppplugins.com/demo/ppgallery/images/l_02.jpg" title="Example of a title goes here."><img src="http://ppplugins.com/demo/ppgallery/images/s_02.jpg"></a></li> <li><a href="http://ppplugins.com/demo/ppgallery/images/l_03.jpg" title="Example of a title goes here."><img src="http://ppplugins.com/demo/ppgallery/images/s_03.jpg"></a></li> <li><a href="http://ppplugins.com/demo/ppgallery/images/l_28.jpg" title="Thanks for visiting PP Plugins"><img src="http://ppplugins.com/demo/ppgallery/images/s_28.jpg"></a></li> </ul>And we can implement the plug-in by calling the following script-
<script type="text/javascript">
$(document).ready(function() {
$('#gallery').ppGallery();
});
</script>
Now we can integrate the image HTML in a repeater. And the code goes below-
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="http://www.ppplugins.com/demo/ppgallery/ppgallery/css/ppgallery.css" rel="stylesheet" type="text/css" />
<link href="http://www.ppplugins.com/demo/ppgallery/ppgallery/css/dark-hive/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ppplugins.com/demo/ppgallery/ppgallery/js/ppgallery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#gallery').ppGallery();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<ul id="gallery">
</HeaderTemplate>
<ItemTemplate>
<li><a href='<%#Eval("URL") %>' title='<%#Eval("Title") %>'>
<img src='<%#Eval("Thumb") %>'></a></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
var imageDataSource = (new[] { new { URL = "http://ppplugins.com/demo/ppgallery/images/l_01.jpg",
Thumb = "http://ppplugins.com/demo/ppgallery/images/s_01.jpg" Title= "Title 1"} }).ToList();
imageDataSource.Add(new {URL = "http://ppplugins.com/demo/ppgallery/images/l_02.jpg", Thumb = "http://ppplugins.com/demo/ppgallery/images/s_02.jpg" Title= "Title 2"});
imageDataSource.Add(new { URL = "http://ppplugins.com/demo/ppgallery/images/l_03.jpg", Thumb = "http://ppplugins.com/demo/ppgallery/images/s_03.jpg" Title= "Title 3" });
imageDataSource.Add(new { URL = "http://ppplugins.com/demo/ppgallery/images/l_04.jpg", Thumb = "http://ppplugins.com/demo/ppgallery/images/s_04.jpg" Title= "Title 4" });
imageDataSource.Add(new { URL = "http://ppplugins.com/demo/ppgallery/images/l_05.jpg", Thumb = "http://ppplugins.com/demo/ppgallery/images/s_05.jpg" Title= "Title 5" });
imageDataSource.Add(new { URL = "http://ppplugins.com/demo/ppgallery/images/l_06.jpg", Thumb = "http://ppplugins.com/demo/ppgallery/images/s_06.jpg" Title= "Title 6" });
imageDataSource.Add(new { URL = "http://ppplugins.com/demo/ppgallery/images/l_19.jpg", Thumb = "http://ppplugins.com/demo/ppgallery/images/s_19.jpg" Title= "Title 7" });
imageDataSource.Add(new { URL = "http://ppplugins.com/demo/ppgallery/images/l_20.jpg", Thumb = "http://ppplugins.com/demo/ppgallery/images/s_20.jpg" Title= "Title 8" });
imageDataSource.Add(new { URL = "http://ppplugins.com/demo/ppgallery/images/l_21.jpg", Thumb = "http://ppplugins.com/demo/ppgallery/images/s_21.jpg" Title= "Title 9" });
imageDataSource.Add(new { URL = "http://ppplugins.com/demo/ppgallery/images/l_22.jpg", Thumb = "http://ppplugins.com/demo/ppgallery/images/s_22.jpg" Title= "Title 10" });
imageDataSource.Add(new { URL = "http://ppplugins.com/demo/ppgallery/images/l_23.jpg", Thumb = "http://ppplugins.com/demo/ppgallery/images/s_23.jpg" Title= "Title 11" });
imageDataSource.Add(new { URL = "http://ppplugins.com/demo/ppgallery/images/l_24.jpg", Thumb = "http://ppplugins.com/demo/ppgallery/images/s_24.jpg" Title= "Title 12" });
imageDataSource.Add(new { URL = "http://ppplugins.com/demo/ppgallery/images/l_25.jpg", Thumb = "http://ppplugins.com/demo/ppgallery/images/s_25.jpg" Title= "Title 13" });
imageDataSource.Add(new { URL = "http://ppplugins.com/demo/ppgallery/images/l_26.jpg", Thumb = "http://ppplugins.com/demo/ppgallery/images/s_26.jpg" Title= "Title 14" });
imageDataSource.Add(new { URL = "http://ppplugins.com/demo/ppgallery/images/l_27.jpg", Thumb = "http://ppplugins.com/demo/ppgallery/images/s_27.jpg" Title= "Title 15" });
imageDataSource.Add(new { URL = "http://ppplugins.com/demo/ppgallery/images/l_28.jpg", Thumb = "http://ppplugins.com/demo/ppgallery/images/s_28.jpg" Title= "Title 16" });
Repeater1.DataSource = imageDataSource;
Repeater1.DataBind();
}
This is an in memory data source. We can replace the data source as we want.
No comments:
Post a Comment