Dynamic database driven jQuery Tabs in asp.net

In this post we will go through database driven, dynamic jQuery Tabs implementation. To start with lets first check how the tabs HTML looks like.

The basic structure of the HTML that is needed for Tabs implementation looks like this-

<div id="tabs">
   <ul>
      <li><a href="#tabs-1">Nunc tincidunt</a></li>
      <li><a href="#tabs-2">Proin dolor</a></li>
      <li><a href="#tabs-3">Aenean lacinia</a></li>
   </ul>
   <div id="tabs-1">
      <p>Tab 1 content</p>
   </div>
   <div id="tabs-2">
      <p>Tab 2 content</p>
   </div>
   <div id="tabs-3">
      <p>Tab 3 content</p>
   </div>
</div>

Now to implement a data base driven or a dynamic tab, we need to find some repeated sequences of content. If we analyze the HTML structure above, we can see two repeated sequences. First is the UL LI with anchor. Each LI is nothing but a repeat of the other. Only difference is the content of the anchor and the href. Secondly, the repeated sequence is the divs below UL. Only difference is the id and content of the div. So, here is another repeated sequence. So to make dynamic or database driven Tabs we, need to make the tow sets of repetitions.

Now here is a implementation using asp.net repeater control-

http://forums.asp.net/p/1693184/4474572.aspx/1?Re+how+to+interact+this+jquery+with+asp+net+codes+

In this link I am little lazy to write the database code. So I have taken the help of in memory datasource. This can be easily changed and the content can be made database driven and its left up to you. If you notice, the connection between the tab item and the content item is done through ListID. In the anchor href we have the following code href="#fragment-<%#Eval("ListID") %>". And in the div id we have id="fragment-<%#Eval("ListID") %>".

We can see another post below-

http://forums.asp.net/p/1663415/4345867.aspx/1?Re+Tabs+creation+using+Jquery+at+runtime

In this post I have created using jQuery and an array rendered to the page using ClientScript.RegisterClientScriptBlock. This also we can make database driven. We can also get the content of the Tabs using jQuery ajax and asp.net pagemethod or webmethod.

ppGallery - Lightbox Gallery with asp.net repeater

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-

<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.