Display images like facebook story in asp.net

Last Reply 12 days ago By dharmendr

Posted 16 days ago

code work. but output not show. some condition more req image slider req with progress bar and one image per mouse over ho toimage pause req.

IMAGE DISPLAY C#

                <table class="style14">
                    <tr>
                        <td>
                            <asp:TextBox ID="txtpost" runat="server" Height="60px" TextMode="MultiLine" Width="470px"
                                BorderColor="#00CC66" BorderStyle="Solid" BorderWidth="1px" BackColor="#FBFBFB"></asp:TextBox>
                        </td>
                        <td valign="bottom">
                        </td>
                    </tr>
                    <tr>
                        <td valign="bottom" style="padding-top: 10px;">                      
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <asp:FileUpload ID="FileUpload1" runat="server" Width="92px"  />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <asp:Button ID="Button1" runat="server" Text="Photo" CssClass="btnpost" OnClick="Button1_Click" />
                            </td>
                        <td>
                        <div id="dvImage" style="height: 308px; width: 410px"></div>
                        </td>
                    </tr>
                </table>

 

    private void show_story()
    {
        DataSet odt;
        odt = IP.SHOWSTORY(Int32.Parse(Session["uid"].ToString()));
        if (odt != null)
        {
            if (odt.Tables[0].Rows.Count > 0)
            {
                List<string> paths = new List<string>();
                foreach (DataRow dr in odt.Tables[0].Rows)
                {
                    paths.Add("Story/" + Path.GetFileName(dr["file_path"].ToString()));

                }
             
               Images = string.Join(",", paths.ToArray());

                //Datalistpost.DataSource = paths;
               // Datalistpost.DataBind();
            }
        }
    }

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    var images = '<%=this.Images%>'.split(",");
    $(function () {
        var i = 0;
        $("#dvImage").css("background-image", "url(" + images[i] + ")");
        $("#dvImage").css("background-repeat", "no-repeat");
        setInterval(function () {
            i++;
            if (i == images.length) {
                i = 0;
            }
            $("#dvImage").fadeOut("slow", function () {
                $(this).css("background-image", "url(" + images[i] + ")");
                $(this).css("background-repeat", "no-repeat");
                $(this).fadeIn("slow");
            });
        }, 2000);
    });
</script>

 

You are viewing reply posted by: dharmendr 13 days ago.
Posted 13 days ago

I wil get back to you tomorrow.