JQuery Quickies #1 – GalleryView Plugin by Jack Anderson

 

NOTE:-
  1. The main purpose of GalleryView plugin is to make a slideshow of images along with displaying the lead image in the background.
  2. To Download –> http://plugins.jquery.com/project/galleryview (make it 2.1.1).
  3. For detailed info on plugin along with its implementation and feature –> http://spaceforaname.com/galleryview
  4. 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 :-

Untitled

Database sample data :-

ImagesTableData 

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.

 GalleryView-Folder-Structure

================================================================================================

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.

You may also like...

One Pingback/Trackback

  • srvishnukumar

    hi Rami,

    Itz nice work

  • Ashish

    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.

  • raman

    tell me about .cs file.

  • RamiVemula

    @Raman – there is no CS file, it is not a codebehind model. It is Inline model.

  • Neethu

    Good one, thanks a lot. But Bottom slide show is not working, why is it so?

  • Neethu

    Sorry for the above comment. Its workign fine.

  • yamme25

    how can i display 2 different images in one slide and the other has link ???

  • RamiVemula

    @yamme25 – I dont think GalleryView is the right plugin for that purpose. You may have to try Slider Plugin for that. But if you still want to go with GalleryView, you might end up customizing some jquery.

  • Babu

    I want 2 slide show in single page how to create ?

  • RamiVemula

    @Babu – Please try on your own and let me know where you got stuck, then I can try to help you.

  • Ahmed

    The bottom slideshow is not working.
    I have included
    jquery.galleryview-3.0-dev.js
    jquery.easing.1.3.js
    jquery.timers-1.2.js
    jquery-1.5.1.min.js

  • RamiVemula

    @Ahmed – I am not sure about what you are asking. Please be more specific. Also I would be recommending you to post the same question @GalleryView plugin page, so that owners of that plugin can provide you better answer.

  • Neethu

    Its not working in IE. y is it so? fine in FireFox and chrome.
    please help me.

  • RamiVemula

    @Neethu – Its working for me in IE, check your browser settings. Also try by cleaning browser cache.

  • mew

    thank you very much sir…i would just like to ask where will you edit the description page height so that you can add more description? i can’t find it in css.. (the gray color one)please help..

  • RamiVemula

    @Mew – In JQuery file, try it that way.

  • Yoda

    Hi, I want two of this galleries on the same page. When I implemented one it was ok, but for the second a created
    $(‘#photos2′).galleryView({
    panel_width: 350,
    panel_height: 300,
    frame_width: 100,
    frame_height: 100,
    nav_theme: ‘custom’
    });
    and I used in div id=”photos2″… and than everything looks ok, except that the two galleries aren’t interactive. Not just the second one, but also the first one, it’s showing just one image and the buttons for next are not working and it doesn’t changes the images either by itself… I think I should do something in the javascript code, about this $document. ready(function ()) but I’m not sure, what to do?

  • RamiVemula

    @Yoda – I would post this question in forums.asp.net with complete code. Your question is out of context of this article :-).

  • Laura Drida

    Hi –

    I’m new to the GalleryView plugin and have been troubleshooting a “$ is not a function” error. Advice?

  • Laura Drida

    Nevermind… I’ve fixed the problem. :)

  • RamiVemula

    @Laura – Can you post your findings?

  • Karthic

    Hi –

    To start with, A very good post !! :)

    It’s working for me great in local host but when I deploy the page in live it’s not working. Can you please tell me where the flaw will be !!

  • Angel

    Hello. I used this code placing it in the center of my website. The problem is that my menu button (when mouse hover another menu open(child menu)) is being covered by this gallery. What do I need to change so that it will be placed at the back? Please help.

  • Angel

    Question again. If the thumbnail part(Repeater 1) consists of more than 6 images. The results is not what it was supposed to appear. Only two thumbnails appear then will become 6 and so on. Why?

  • drew

    Just a quick question: how do you unzip the rar file? I have tried with PowerIso but am not getting the jquery files :(

  • RamiVemula

    @Drew – You can try this library – http://www.rarlab.com/rar_add.htm

  • ashish

    I use this In my application Image is not display and css is overwrite myapplication css. and It does not look as videos. I cant understand the mistake. please replay on my email

  • karthikeyan

    Hi rami,

    Thanks for the code its really very useful.

    I am getting an problem in gallery. The image that is first in my sql table row itself displaying in bottom slide show for all three. Please help to sort this problem.

  • karthikeyan

    hi Rami, is there any file or example for creating multi language website in asp.net

  • vikas amballa

    I getting soo problem to bing database images displayed in image gallery slide.Ihis code very usefuled mee
    Thanks.

  • Lazlo Pozzo

    Lastly, how do you wrap the image within the width and height of the wrapper/panel that shows the images. Because for large images, it is mostly cutting out the images/cropping it.

  • Pingback: [RESOLVED]Image Slider | Asp Forum()