none
Tags Html Anchor dinámico para agregar imágenes en un Slider dentro de un Div RRS feed

  • Pregunta

  • Buenas Tardes.

    El tema que tengo que generar dinamicamente por código  unos tags html Anchor con enlaces a diferentes Imágenes dentro de una etiqueta DIV que contiene código javascript  asi:

    Html:

    <div id="slider">
                    <a href="URL_ENLACE2"><img src="../../Imagenes/Carrusel/Red_Apple.jpg" /><p>HOLAS</p></a>
                    <a href="URL_ENLACE2"><img src="../../Imagenes/Carrusel/Red_Apple2.jpg" /><p>HOLAS</p></a>
                    <a href="URL_ENLACE2"><img src="../../Imagenes/Carrusel/Red_Apple3.jpg" /><p>HOLAS</p></a>
                    <a href="URL_ENLACE2"><img src="../../Imagenes/Carrusel/Red_Apple4.jpg" /><p>HOLAS</p></a>
                    <a href="URL_ENLACE2"><img src="../../Imagenes/Carrusel/Red_Apple5.jpg" /><p>HOLAS</p></a>
                </div>

    Javascript:

    $(function () {
                $('#slider a:gt(0)').hide();
                var interval = setInterval(changeDiv, 4000);
                function changeDiv() {
                    $('#slider a:first-child').fadeOut(1000).next('a').fadeIn(1000).end().appendTo('#slider');
                };
                $('.mas').click(function () {
                    changeDiv();
                    clearInterval(interval);
                    interval = setInterval(changeDiv, 4000);
                });
                $('.menos').click(function () {
                    $('#slider a:first-child').fadeOut(1000);
                    $('#slider a:last-child').fadeIn(1000).prependTo('#slider');
                    clearInterval(interval);
                    interval = setInterval(changeDiv, 4000);
                });
            });

    Revisando por la Red vi que para poder capturar el DIV necesito ponerle el atributo runat="server" pero esto hace que el javascript deje de funcionar. Como puedo hacer esto. Gracias

    lunes, 27 de abril de 2015 21:15

Respuestas

  • Te paso un ejemplo de como puedes crear dinamicamente los anchor.

    <body>
    <script runat="server" >
       Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
            Dim XML As String = "<?xml version=""1.0"" encoding=""UTF-8""?>" & _
                                "<datos>" & _
                                "   <dato url='../../Imagenes/Carrusel/Red.jpg' description='Red' href='~/red.aspx' />" & _
                                "   <dato url='../../Imagenes/Carrusel/Blue.jpg' description='Blue' href='~/blue.aspx' />" & _
                                "   <dato url='../../Imagenes/Carrusel/Yellow.jpg' description='Yelow' href='~/Yellow.aspx' />" & _
                                "   <dato url='../../Imagenes/Carrusel/Green.jpg' description='Green' href='~/Green.aspx' />" & _
                                "</datos>"
    
            Dim ds As New Data.DataSet
            ds.ReadXml(New System.Xml.XmlTextReader(New System.IO.StringReader(XML)))
    
            Repeater1.DataSource = ds
            Repeater1.DataMember = "dato"
            Repeater1.DataBind()
    
        End Sub
    </script>
        <form id="form1" runat="server">
            <div id="slider">
                <asp:Repeater ID="Repeater1" runat="server" >
                <ItemTemplate>
                <a href='<%#eval("href") %>' >
                    <img src='<%#eval("url") %>' /><p>
                       <%#Eval("description") %></p>
                </a>
                </ItemTemplate>
                </asp:Repeater>
            </div>
        </form>
    </body>

    Espero que te sirva el ejemplo.

    Saludos.

    • Marcado como respuesta nelson111 martes, 28 de abril de 2015 22:21
    martes, 28 de abril de 2015 21:22

Todas las respuestas

  • Hola nelson

    Revisando por la Red vi que para poder capturar el DIV necesito ponerle el atributo runat="server"


    A que te refieres con ello?, no hace falta que sea procesado del lado servidor para hacer tu Slide, te será menos complicado si usas Jquery.

    http://jonraasch.com/blog/a-simple-jquery-slideshow

    Saludos! :)

    martes, 28 de abril de 2015 14:54
  • Hola .. No el slide no hace falta. Ya tengo un código que me hace el slide bien colocando las imágenes estáticas:

    <a href="URL_ENLACE2"><img src="../../Imagenes/Carrusel/Red_Apple.jpg" /><p>HOLAS</p></a>
    <a href="URL_ENLACE2"><img src="../../Imagenes/Carrusel/Red_Apple2.jpg" /><p>HOLAS</p></a>
    <a href="URL_ENLACE2"><img src="../../Imagenes/Carrusel/Red_Apple3.jpg" /><p>HOLAS</p></a>
    <a href="URL_ENLACE2"><img src="../../Imagenes/Carrusel/Red_Apple4.jpg" /><p>HOLAS</p></a>
    <a href="URL_ENLACE2"><img src="../../Imagenes/Carrusel/Red_Apple5.jpg" /><p>HOLAS</p></a>

    Lo que necesito es poder asignar por codigo (c#) esas imágenes de un directorio dinamicamente.

    martes, 28 de abril de 2015 15:17
  • Hola,

    prueba con esto:

    $(function () {
                var $slider = $('#' + '<%=slider.ClientID %>');
                $('a:gt(0)',$slider).hide();
                var interval = setInterval(changeDiv, 4000);
                function changeDiv() {
                    $('a:first-child',$slider).fadeOut(1000).next('a').fadeIn(1000).end().appendTo($slider);
                };
                $('.mas').click(function () {
                    changeDiv();
                    clearInterval(interval);
                    interval = setInterval(changeDiv, 4000);
                });
                $('.menos').click(function () {
                    $('a:first-child',$slider).fadeOut(1000);
                    $('a:last-child',$slider).fadeIn(1000).prependTo($slider);
                    clearInterval(interval);
                    interval = setInterval(changeDiv, 4000);
                });
            });
    Saludos.

    martes, 28 de abril de 2015 15:27
  • Hola .. que pena pero no entiendo lo que me pones. Es decir donde se ubican las imágenes dinamicamente?
    martes, 28 de abril de 2015 19:24
  • Revisando por la Red vi que para poder capturar el DIV necesito ponerle el atributo runat="server" pero esto hace que el javascript deje de funcionar. Como puedo hacer esto. Gracias

    Con eso que te puse, el DIV no "deja de funcionar" aun con el atributo runat="server".

    Asi podrias hacer lo que tenias planeado desde un inicio.

    Por otro lado, si tienes las imagenes en una coleccion puedes utilizar un repeater para que ponga los anchor dinamicamente.

    Si necesitas ayuda con el repeater puedo ayudarte.

    Saludos.


    martes, 28 de abril de 2015 20:40
  • Te paso un ejemplo de como puedes crear dinamicamente los anchor.

    <body>
    <script runat="server" >
       Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
            Dim XML As String = "<?xml version=""1.0"" encoding=""UTF-8""?>" & _
                                "<datos>" & _
                                "   <dato url='../../Imagenes/Carrusel/Red.jpg' description='Red' href='~/red.aspx' />" & _
                                "   <dato url='../../Imagenes/Carrusel/Blue.jpg' description='Blue' href='~/blue.aspx' />" & _
                                "   <dato url='../../Imagenes/Carrusel/Yellow.jpg' description='Yelow' href='~/Yellow.aspx' />" & _
                                "   <dato url='../../Imagenes/Carrusel/Green.jpg' description='Green' href='~/Green.aspx' />" & _
                                "</datos>"
    
            Dim ds As New Data.DataSet
            ds.ReadXml(New System.Xml.XmlTextReader(New System.IO.StringReader(XML)))
    
            Repeater1.DataSource = ds
            Repeater1.DataMember = "dato"
            Repeater1.DataBind()
    
        End Sub
    </script>
        <form id="form1" runat="server">
            <div id="slider">
                <asp:Repeater ID="Repeater1" runat="server" >
                <ItemTemplate>
                <a href='<%#eval("href") %>' >
                    <img src='<%#eval("url") %>' /><p>
                       <%#Eval("description") %></p>
                </a>
                </ItemTemplate>
                </asp:Repeater>
            </div>
        </form>
    </body>

    Espero que te sirva el ejemplo.

    Saludos.

    • Marcado como respuesta nelson111 martes, 28 de abril de 2015 22:21
    martes, 28 de abril de 2015 21:22
  • Si todo perfecto .. ya entendí como funciona y muchas gracias por el ejemplo.
    martes, 28 de abril de 2015 22:21
  • Hola .. que tal ... que pena molestar .. pero ahora me salio otro problema. Cuando lo hago en una pagina web normal todo funciona de maravilla. Pero si agrego todo tu código a una pagina asociada a una Master Page ya no funciona. La verdad no tengo claro que habría que cambiar. Gracias
    miércoles, 29 de abril de 2015 22:56