Coger Información de Servidor

[diego1192]

Buenas, miren a ver si me pueden echar una manita

Tengo un Slider hecho con Booststrap cuyas imágenes las recojo del servidor (Cada imagen es un producto con sus determinadas características).

Me gustaría añadirle una funcionalidad al mismo:
-Quiero que cada vez que se deslice el slider, recoger la información de la nueva imagen(producto) para poder mostrar al mismo tiempo el producto con sus características.

Utilizo el metodo Modelo Vista Controlador.

Saludos!

PDT: conocimientos: javascript, java, html, css, sql, mysql.

[Macijauskas]

Hola Diego,

Te recomiendo que para ayudarte mejor, copies el código que tengas hecho.

[diego1192]

Slider que aumenta y disminuye de tamaño automáticamente según nº de productos que encuentre en servidor.

Muestro la informacion de cada producto con un evento onclick actualmente.

Codigo:

Código:

 <% ArrayList<Productos> listaProductos
                    = (ArrayList<Productos>) request.getAttribute("LISTA_PRODUCTOS");
        
        int longitudProductos = 1;
        
        if(listaProductos.size() > 0){
            longitudProductos = listaProductos.size();
        }
        %>


        <div class="row">
            <div class="col-xs-12 col-sm-8 marginNegativeRight">
                <div id="carousel-1" class="carousel slide" data-ride="carousel">

                    <ol class="carousel-indicators" id="botonesDeCarousel">
                        <%for (int i = 0; i < longitudProductos; i++) {
                            if (i == 0) {%>
                                <li data-target="#carousel-1"  data-slide-to="<%=i%>" class="active"></li>
                            <%} else {%>
                                <li data-target="#carousel-1"  data-slide-to="<%=i%>" class=""></li>
                            <%}%>
                        <%}%>
                    </ol>

                    <!--CONTENEDRO DE LOS SLIDE-->
                    <div class="carousel-inner" role="listbox">
                        <%for (int z = 0; z < longitudProductos; z++) {
                                Productos producto = listaProductos.get(z);
                            if (z == 0) {%>
                                <div class="item active">
                                    <img src="images/<%=producto.getImagen()%>.jpg" class="img-responsive" alt="" id="ajustariImagen" onclick="cargarInformacionSlider('<%=producto.getTitulo()%>', '<%=producto.getAutor()%>', '<%=producto.getCategoria()%>', '<%=producto.getPrecio()%>', '<%=producto.getDescripcion()%>', <%=cont%>)">
                                    <div class="carousel-caption hidden-xs hidden-sm">
                                        <h3>Slider numero 0</h3>
                                        <p>Cuadro0</p>
                                    </div>
                                </div>  
                            <%} else {%>
                                <div class="item">
                                    <img src="images/<%=producto.getImagen()%>.jpg" class="img-responsive" alt="" id="ajustariImagen" onclick="cargarInformacionSlider('<%=producto.getTitulo()%>', '<%=producto.getAutor()%>', '<%=producto.getCategoria()%>', '<%=producto.getPrecio()%>', '<%=producto.getDescripcion()%>', <%=cont%>)">
                                    <div class="carousel-caption hidden-xs hidden-sm">
                                        <h3>Slider numero 0</h3>
                                        <p>Cuadro0</p>
                                    </div>
                                </div>  
                            <%}%>
                        <%}%>

                        <a href="#carousel-1" class="left carousel-control" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Anterior</span>
                        </a>
                        <a href="#carousel-1" class="right carousel-control" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Siguiente</span>
                        </a>
                    </div>
                </div>
            </div>                              
            <div class="col-xs-12 col-sm-4 todo colorWhite">
                <div id="informacionPrincipal">
                  <!--PONER AQUI LAS CARACTERISTICAS DE CADA PRODUCTO-->
                   
                </div>
            </div>
        </div>

Salu2.