NOTE:-
- The main purpose of GalleryView plugin is to make a slideshow of images along with displaying the lead image in the background.
- To Download –> http://plugins.jquery.com/project/galleryview (make it 2.1.1).
- For detailed info on plugin along with its implementation and feature –> http://spaceforaname.com/galleryview
- The terminology in the code is very important, if any word is misspelled, there will be a distorted slideshow.
In this tutorial, I create a sample Database “Example” with a table “Images” which holds the information about images like ImageName, ImageDescription and ImagePath. Then I use a SqlDataSource in combination with Repeater to display the images from the database onto the page. Here we use GalleryView to make the slideshow of images in the repeater along with display of the particular image which is in focus.
================================================================================================
Database Details
Database details which are used to accomplish this tutorial are furnished in this section.
================================================================================================
Database Name :- Example
Database Table :- Images
Database Definition :-
Database sample data :-
ConnectionString entry in the Web.Config file (inside the <Configuration> tag) would look like (kindly change it to your systems corresponding) :-
<connectionStrings> <add name="ExampleConnectionString" connectionString="Data Source=RAMILU-PC\SQLEXPRESS; Initial Catalog=Example;Integrated Security=True" providerName="System.Data.SqlClient" /> </connectionStrings>
================================================================================================
JavaScript Files and CSS File Details
Download the following rar file and place it in the website as shown.
================================================================================================
Download :- Click Here – Javascript files & css file – js.rar
Once downnloaded, unzip it and place them in the website as shown in the below image.
================================================================================================
Page.aspx
Below code shows the implementation of GalleryView.
================================================================================================
<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link type="text/css" rel="stylesheet" href="js/view.css" /> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery-galleryview-1.1/jquery.galleryview-1.1.js"></script> <script type="text/javascript" src="js/jquery-galleryview-1.1/jquery.timers-1.1.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#photos').galleryView({ panel_width: 800, panel_height: 300, frame_width: 100, frame_height: 100, nav_theme: 'custom' }); }); </script> </head> <body> <form id="form1" runat="server"> <div> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ExampleConnectionString %>" SelectCommand="SELECT * FROM [Images]"></asp:SqlDataSource> <br /> <!-- Main Strip to display focused Image Details. --> <div id="photos" class="galleryview"> <asp:Repeater ID="Repeater2" runat="server" DataSourceID="SqlDataSource1"> <ItemTemplate> <div class="panel"> <img src='<%#Eval("ImagePath") %>' /> <div class="panel-overlay"> <h2><%# Eval("ImageName") %></h2> <p>Description: <b><%# Eval("ImageDescription") %></b><br /> View full-size photo <a href='<%#Eval("ImagePath") %>' target="_blank">here</a>.</p> </div> </div> </ItemTemplate> </asp:Repeater> <!-- Strip to display the bottom slideshow. --> <ul class="filmstrip"> <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"> <ItemTemplate> <li><img width="100" height="100" src='<%#Eval("ImagePath") %>' alt='<%#Eval("ImageDescription") %>' title='<%# Eval("ImageName") %>' /></li> </ItemTemplate> </asp:Repeater> </ul> </div> </div> </form> </body> </html>
================================================================================================
OUTPUT
================================================================================================
Disclaimer:-
Of late, I had a chance to work with some JQuery plugins (even though, UI enhancement is not my cup of cake). So in this section i.e., “JQuery Quickies” I am going to narrate about some of the plugins i worked with. As usual, the main area of concentration would be on – “HOW TO IMPLEMENT?”. The reader should digest the fact, that I am not the author of any plugin (unless stated) and also I never RATE any plugin out of my experience (as i am no judge). I do provide the details of the plugin in detailed (say author details with website), so that any further assistance can be obtained from the same. I do moderate derogatory comments (if any) and kindly suggest the commentator to approach the author of the plugin for further clarifications. And for the authors of the plugins, I convey my warmest regards for your excellent works. Feel free to contact me in case my discretion of your (author) plugin is misrepresented.
hi Rami,
Itz nice work
Ultimately Given ,
it was really very helpful for me.
hope we will get more such useful post from you..
keep sharing your knowledge..
Thanks once again.
tell me about .cs file.
@Raman – there is no CS file, it is not a codebehind model. It is Inline model.
Good one, thanks a lot. But Bottom slide show is not working, why is it so?
Sorry for the above comment. Its workign fine.