handling images from database to jquery image swapper

问题

Is there anyway of handling images from database to jquery image swapper or any other type of image swapper. the images should be populated depending on the number of images generated from the databse. I can get all the images from the databse but I cant find a way to show those images on the jquery image swapper. I can display all the images by using datalist but with data list i cant use the jquery image swapper. Any possible solution or alternative will be highly appreciated

 protected void showDetails(int makeID)
{
    conn.Open();
    SqlCommand cmd = new SqlCommand("Select Price,image,make from productDetail Where (makeID LIKE @makeID)"  , conn);
    SqlParameter param = new SqlParameter();

   param.ParameterName = "@makeID";
    cmd.Parameters.Add(param);
  //  cmd.Parameters["@makeID"].Value = makeID;
   param.Value = makeID;

    rdr = cmd.ExecuteReader();
    while (rdr.Read())
    {
       // Label3.Text = rdr["price"].ToString();

        lblMake.Text = rdr["make"].ToString();
        lblPrice.Text = rdr["Price"].ToString();

        atest2.Attributes["href"] = "~/images/" + rdr["image2"].ToString();

        test2.Attributes["src"] = "~/images/" + rdr["image2"].ToString();
        test2.Attributes["height"] = "75";
        test2.Attributes["width"] = "75";

    }

    conn.Close();

}

// on the design view

<div id="page">
        <div id="container">

            <h2>Thumbnail rollover effects and slideshow crossfades</h2>

            <!-- Start Advanced Gallery Html Containers -->
            <div id="gallery" class="content">
                <div id="controls" class="controls"></div>
                <div class="slideshow-container">
                    <div id="loading" class="loader"></div>
                    <div id="slideshow" class="slideshow"></div>
                </div>
                <div id="caption" class="caption-container"></div>
            </div>
                    <li>
                        <a class="thumb" name="drop" id="atest2" title="Title #1" runat="server" >
                            <img  id="test2" runat="server" alt="Title #1" />
                        </a>
                        <div class="caption">
                            Any html can be placed here ...
                        </div>
                    </li>
</ul>
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>

回答1:

You can use an asp.net repeater to create the html markup needed.

<div id="page">
    <div id="container">

        <h2>Thumbnail rollover effects and slideshow crossfades</h2>

        <!-- Start Advanced Gallery Html Containers -->
        <div id="gallery" class="content">
            <div id="controls" class="controls"></div>
            <div class="slideshow-container">
                <div id="loading" class="loader"></div>
                <div id="slideshow" class="slideshow"></div>
            </div>
            <div id="caption" class="caption-container"></div>
        </div>

<div id="thumbs">
    <ul class="thumbs noscript">
        <asp:Repeater id="rptImages" runat="server">
        <ItemTemplate>
            <li>
                <a class="thumb" name="optionalCustomIdentifier" href="path/to/slide" title="your image title">
            <img src='<%#String.Format("/images/{0}", Eval("image"))%>' alt="your image title again for graceful degradation" />
                </a>
                <div class="caption">
                    (Any html can go here)
                </div>
            </li>
            ... (repeat for every image in the gallery)
        </ItemTemplate>
        </asp:Repeater>        
    </ul>
</div>

 <div style="clear: both;"></div>
    </div>
</div>

Just bind your List of images to this repeater and output their paths within the image tagss.

This work for you?

EDIT

For your code behind you would want to do something more like this below, and i have updated the code above to show your output.

rdr = cmd.ExecuteReader();
rptImages.DataSource = rdr;
rptImages.DataBind();

来源：https://stackoverflow.com/questions/5403654/handling-images-from-database-to-jquery-image-swapper

标签

jquery

ASP.NET

image

datalist