work with images in a repeater control

Hi there,

           I am using a repeater control to display all the images in a page. Right now, the images are displayed on a page when the page loads up. But the problem is there is no spacing in between the images. The width of the content is 800px, so it tries to fit in as many as possible. I want to have four images per row with some spacing between them. Could I use tables to do it or could I just have the repeater to reside in a div tag? What are the properties I need to have so that I get what I am looking for.
siddhuoopsAsked:
Who is Participating?
 
photowhizConnect With a Mentor Commented:
OK, here's a sample repeater template that puts any number of images in a grid:

    <asp:Repeater id=repeater1 runat="server">
<HeaderTemplate>
    <table>
    <tr>
</HeaderTemplate>

<ItemTemplate>
      <td><img ID="img1" runat="server" src='<%#  DataBinder.Eval(Container.DataItem, "src").ToString() %>' /></td>
      <asp:Literal id="itemLiteral" runat="server" Text='<%# RepeaterItemSeparator() %>' />
</ItemTemplate>

<FooterTemplate>
    </tr>
    </table>
</FooterTemplate>
    </asp:Repeater>


Where the code-behind includes:

            private int itemCount = 0;

            public string RepeaterItemSeparator()
            {
                  itemCount++;

                  if ( ((itemCount%4) == 1) && (itemCount != 1) )
                        return "</tr>\r\n\t<tr>";
                  else
                        return "";
            }
0
 
photowhizCommented:
You'll have to add some kind of spacing control to your repeater template. The properties you need will depend on what you're trying to do. Do you want the images in a rectangular grid? Use a table. Do you want a border around each image? Set the img border property.

Putting the repeater in a DIV will not accomplish anything.
0
 
siddhuoopsAuthor Commented:
Thank You so much..awesome
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.