Dynamic Image Gallery ASP.Net C#

Asked

Viewed 815 times

2

I have the following Code, It loads the photos into that placeholder. ID="phFotos">

 public partial class ImovelDetalhe : System.Web.UI.Page
    {
        private ImovelBo _imovelBo;

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                carregarInformacoes();
            }
        }

        private void carregarInformacoes()
        {
            int codigoImovel = 0;
            Int32.TryParse(Request.QueryString["CodImovel"], out codigoImovel);

            _imovelBo = new ImovelBo();
            var imovel = _imovelBo.ObterDetalhe(codigoImovel);

            if (imovel != null)
            {
                lblDescricao.Text = imovel.Descricao;
                lblOperacao.Text = imovel.Operacao;
                lblCidade.Text = imovel.Cidade;
                lblLocalizacao.Text = imovel.Localizacao;
                lblTipoImovel.Text = imovel.Tipo;
                lblQtDormitorios.Text = imovel.QntDormitorio.ToString();
                lblValor.Text = imovel.Valor.ToString("#,##0.00");

                if (imovel.Fotos != null)
                {
                    foreach (var item in imovel.Fotos)
                    {
                        Image foto = new Image();
                        foto.Width = 500;
                        foto.Height = 400;
                        foto.ImageUrl = item;
                        phFotos.Controls.Add(foto);
                    }
                }
            }
        }      
    }

And when I run the images it looks like this : one below the other inserir a descrição da imagem aqui

Could someone help us make a carousel, slide show or banner ? according to this or simpler example :inserir a descrição da imagem aqui

I couldn’t get past the photos in the bank and at the root

c# sql asp.net webforms image

  • How is your control in aspx ?

  • <div class="photo"> se and control the photos ? if yes and this one <Asp:Placeholder runat="server" ID="phFotos"></Asp:Placeholder> </div>

  • It would not be better to create some service by calling the list of images (asmx or ashx) and making an ajax call using some JS image component?

  • What is missing is to use some lib JS to manage the display of the images in carrosel/slider/gallery format, such as this one: http://www.aspsnippets.com/Articles/Implement-Carousel-Image-Gallery-in-ASPNet-using-jQuery-jCarousel-Plugin.aspx

1 answer

1

Take this list you have with the photos (immoble.Photos), assign to an ASP.NET Repeater control and the javascript $('#mycarousel'). jcarousel(); will be in charge of displaying in the correct way.

 <script type="text/javascript">
   $(function () {
      $('#mycarousel').jcarousel();
   });
 </script>
<ul id="mycarousel" class="jcarousel-skin-tango">
<asp:Repeater ID="rptImages" runat="server">
    <ItemTemplate>
        <li>
            <img alt="" style='height: 75px; width: 75px' src='<%# Eval("ImageUrl") %>' />
        </li>
    </ItemTemplate>
</asp:Repeater>

When placing the id of the ul mycarousel and turns it into a jcarousel, all tag li with the correct src property will be displayed in your slider.

The JS lib is this one: http://sorgalla.com/jcarousel/

Browser other questions tagged c# sql asp.net webforms image

You are not signed in. Login or sign up in order to post.