locked
showing image in listview as album +LightBox??? RRS feed

  • Question

  • User-285931734 posted

    Hello,

      I am using master page and content page approach.

       i could mange to show image from folder in listview whose Url are saved in my Database.

    the code i use:

    <asp:Content ID="content2" ContentPlaceHolderID="mainContentPlaceHolder" runat="server">
        <div style="margin-left: 50px; margin-top: 25px; width: 900px; height: 600px; border: solid 1px #BBD9EE;
            background-color: #EBF4FA;">
            <div>
                <asp:ListView ID="lvRestauarntGallery" runat="server" GroupItemCount="3" DataSourceID="ObjRestaurantGallery">
                    <LayoutTemplate>
                        <table>
                            <tr id="groupPlaceholder" runat="server">
                            </tr>
                        </table>
                    </LayoutTemplate>
                    <GroupTemplate>
                        <tr>
                            <td id="itemPlaceholder" runat="server">
                            </td>
                        </tr>
                    </GroupTemplate>
                    <ItemTemplate>
                        <td id="Td1" runat="server">
                            <div style="margin-left: 50px; margin-top: 20px">
                                <div>
                                    
                                    <asp:Image ID="imgProduct" Height="200px" Width="200px" runat="server" ImageUrl='<%# Eval("Thumbnailpath") %>' />
                                </div>
                                <div>
                                    <%# string.Format("<span style=\"cursor:pointer; color:black;font-size: 14px;\" onclick=\"showMe('{0}', '{1}')\">View</span>", Eval("ImageCaption"), Eval("ImagePath"))%>
                                </div>
                            </div>
                        </td>
                    </ItemTemplate>
                </asp:ListView>
                <asp:ObjectDataSource ID="ObjRestaurantGallery" runat="server" DataObjectTypeName="BusinessEntites.Entites.ResturantOwner.ImageProcess"
                    InsertMethod="SaveGalleryImage" OldValuesParameterFormatString="original_{0}"
                    SelectMethod="GetImageByRestaurantId" TypeName="BusinessLogic.Manager.ImageProcessManager">
                    <SelectParameters>
                        <asp:SessionParameter Name="id" SessionField="ResturantID" Type="Int32" />
                    </SelectParameters>
                </asp:ObjectDataSource>
            </div>
         </div>
    </asp:Content>


    I trying to use the appraoch which is shown in the link.

    http://codeasp.net/blogs/raghav_khunger/microsoft-net/1289/use-lightbox-to-show-images-whose-paths-are-stored-in-database

    but i failed to do.

    Can anybody guide me how to impelment lightbox in above example with my listview code i am using.

    Thanks




    Thursday, February 10, 2011 6:31 AM

All replies

  • User-417784260 posted

    Lightbox is a jquery plugin which runs on the client.  I do not see where you are adding a script reference to jquery and lightbox.  I also do not see where you are calling the jquery lightbox function in javascript.

    Thursday, February 10, 2011 6:41 AM
  • User-285931734 posted

    ok i did all that but i removed the code once i was unable to do it.

    in Master Page.


        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    
        <script src='<%=ResolveUrl("~/js/jquery.lightbox-0.5.js")%>'type="text/javascript"></script>
    
        <link href='<%=ResolveUrl("~/css/jquery.lightbox-0.5.css") %>' rel="stylesheet" type="text/css" />


    and in my content page:

    <asp:Content ID="content1" ContentPlaceHolderID="mainhead" runat="server">
    <style type="text/css">
            /* jQuery lightBox plugin - Gallery style */#gallery
            {
                background-color: #444;
                padding: 10px;
                width: 520px;
            }
            #gallery ul
            {
                list-style: none;
            }
            #gallery ul li
            {
                display: inline;
            }
            #gallery ul img
            {
                border: 5px solid #3e3e3e;
                border-width: 5px 5px 20px;
            }
            #gallery ul a:hover img
            {
                border: 5px solid #fff;
                border-width: 5px 5px 20px;
                color: #fff;
            }
            #gallery ul a:hover
            {
                color: #fff;
            }
        </style>
    
    </asp:Content>
    
    <asp:Content ID="content2" ContentPlaceHolderID="mainContentPlaceHolder" runat="server">
    
        <script type="text/javascript">
            $(function() {
                $('#gallery a').lightBox();
            });
        </script>
    
        <div id="gallery">
            <asp:Repeater ID="Repeater1" runat="server">
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>
                <ItemTemplate>
                    <li><a id="A1" runat="server" href='<%# Eval("ImagePath") %>' title='<%# Eval("ImageCaption") %>'>
                        <img src='<%# Eval("Thumbnailpath") %>' width="72" height="72" alt="" />
                    </a></li>
                </ItemTemplate>
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </div>
    </asp:Content>
    
    
    

    
    
    
    
    


    Thursday, February 10, 2011 7:34 AM
  • User-285931734 posted

    No Body there to guide me on this issue???


    Tuesday, February 15, 2011 12:51 AM