showing image in listview as album +LightBox???

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

Answer 1

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.

Answer 2

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>

Answer 3

User-285931734 posted

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