En esta entrada, les mostraré como hacer un slider para mostrar, por ejemplo, productos de una página, o fotos o lo que sea.
El punto es que sacaremos estos elementos desde nuestra base de datos. El resultado quedará algo así:
*Nota: si no recuerdas como conectarse a una base de datos revisa este artículo
1) Crear el <div> correspondiente para este espacio de nuestra página.
2) Que al cargar la página se carguen los primeros 4 elementos
3) Que al presionar las flechas se invoquen mas elementos de la base de datos y vallan mostrándose.
Nuestra base de datos para el ejemplo será así:
Paso 1: El HTML para el div será asi:
(Nota: Es importante que en el tag <body> se debe agregar la acción "onload='cargar_slider()" para que al cargar la página se ejecute esa función.
Nota 2: Es importante poner "id" a cada objeto que será usado por nuestra función javascript.)
<body onload="cargar_slider()"> <div style="background-color:#AED6F1;"> <div id="productos" class="productos"> <div class="flecha" onclick="cambiar_productos('izq')"><img src="images/flecha_izq.png"></div> <div class="producto" id="producto0" > <div class="producto_blanco" style="cursor:pointer;" > <img width="190" style="max-height:210px;" id="prod0_b"> </div> <div class="producto_abajo"> <span style="padding-top:20px;" id="prod0_a"></span> </div> </div> <div class="producto" id="producto1"> <div class="producto_blanco" style="cursor:pointer;"> <img width="190" style="max-height:210px;" id="prod1_b"> </div> <div class="producto_abajo"> <span style="padding-top:20px;" id="prod1_a"></span> </div> </div> <div class="producto" id="producto2"> <div class="producto_blanco" style="cursor:pointer;" > <img width="190" style="max-height:210px;" id="prod2_b"> </div> <div class="producto_abajo"> <span style="padding-top:20px;" id="prod2_a"></span> </div> </div> <div class="producto" id="producto3" > <div class="producto_blanco" style="cursor:pointer;"> <img width="190" style="max-height:210px;" id="prod3_b"> </div> <div class="producto_abajo"> <span style="padding-top:20px;" id="prod3_a"></span> </div> </div> <div class = "flecha" onclick="cambiar_productos('der')"><img src="images/flecha_der.png"></div> </div> </div> </body>
El CSS de los estilos que usé es el siguiente:
(Nota: este pedazo de código puede estar en el mismo archivo HTML en que se encuentra el div creado anteriormente)
<style> .productos{ width:1100px; height:350px; padding-top:50px; margin:auto; font-size:20px; text-align:left; display: table; } .producto{ width: 20%; height: 220px; float:left; } .flecha{ width: 10%; padding-top:100px; height: 150px; float:left; vertical-align:middle; text-align:center; cursor:pointer; } .producto_blanco{ width: 200px; background-color: white; text-align:center; height:220px; } .producto_abajo{ background-color: black; height: 30px; color:white; width: 200px; font-size:14px; text-align:center; vertical-align:middle; font-weight:bold; padding-top:10px; } </style>
(odio los colores del highlighter pero el que usaba antes como que murió :c )
Las funciones javascript que usaremos serán "cargar slider" y "cambiar slider" la primera no recibe ni un parámetro y la segunda recibe el "lado", si derecha o izquierda.
Recuerden agregar la libreria de jquery ya que lo usaremos para hacer llamadas con ajax.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Las funciones script quedarán así: (Puede verse complicado pero no lo es, es simple, solo que queda largo porque lo haremos por la fuerza bruta XD)
var pos1=0; var pos2=1; var pos3=2; var pos4=3; function cargar_slider() { $.post( "cargar_slider.php", { action:"cargar_slider" }, function(data, status) { if(status=='success') { var serverresponse = JSON.parse(data); if(serverresponse.arreglo_id.length != 0) { $("#prod"+pos1+"_b").attr("src", "images/"+serverresponse.arreglo_foto[pos1]); $("#prod"+pos1+"_a").html(serverresponse.arreglo_producto[pos1]); $('#producto0').click(function() { window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos1]+''; }); $("#prod"+pos2+"_b").attr("src", "images/"+serverresponse.arreglo_foto[pos2]); $("#prod"+pos2+"_a").html(serverresponse.arreglo_producto[pos2]); $('#producto1').click(function() { window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos2]+''; }); $("#prod"+pos3+"_b").attr("src", "images/"+serverresponse.arreglo_foto[pos3]); $("#prod"+pos3+"_a").html(serverresponse.arreglo_producto[pos3]); $('#producto2').click(function() { window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos3]+''; }); $("#prod"+pos4+"_b").attr("src", "images/"+serverresponse.arreglo_foto[pos4]); $("#prod"+pos4+"_a").html(serverresponse.arreglo_producto[pos4]); $('#producto3').click(function() { window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos4]+''; }); } } } ); } function cambiar_productos(lado) { $.post( "cargar_slider.php", { action:"cargar_slider" }, function(data, status) { if(status=='success') { //lo que se recibe desde "cargar_slider.php" var serverresponse = JSON.parse(data); if(lado == 'der') { if(pos4 == serverresponse.arreglo_id.length-1) { pos4=0; pos3=pos3+1; pos2=pos2+1; pos1=pos1+1; } else if(pos3 == serverresponse.arreglo_id.length-1) { pos3=0; pos4=pos4+1; pos2=pos2+1; pos1=pos1+1; } else if(pos1 == serverresponse.arreglo_id.length-1) { pos1=0; pos4=pos4+1; pos2=pos2+1; pos3=pos3+1; } else if(pos2 == serverresponse.arreglo_id.length-1) { pos2=0; pos4=pos4+1; pos3=pos3+1; pos1=pos1+1; } else { pos1 = pos1+1; pos2 = pos2+1; pos3 = pos3+1; pos4 = pos4+1; } $("#prod0_b").attr("src", "images/"+serverresponse.arreglo_foto[pos1]); $("#prod0_a").html(serverresponse.arreglo_producto[pos1]); //agrego la funcion que al hacer click en el producto se habra su información $('#producto0').click(function() { window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos1]+''; }); $("#prod1_b").attr("src", "images/"+serverresponse.arreglo_foto[pos2]); $("#prod1_a").html(serverresponse.arreglo_producto[pos2]); $('#producto1').click(function() { window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos2]+''; }); $("#prod2_b").attr("src", "images/"+serverresponse.arreglo_foto[pos3]); $("#prod2_a").html(serverresponse.arreglo_producto[pos3]); $('#producto2').click(function() { window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos3]+''; }); $("#prod3_b").attr("src", "images/"+serverresponse.arreglo_foto[pos4]); $("#prod3_a").html(serverresponse.arreglo_producto[pos4]); $('#producto3').click(function() { window.location.href='detalle.php?producto='+serverresponse.arreglo_id[pos4]+''; }); } if(lado == 'izq') { if(pos1 == 0) { pos1=serverresponse.arreglo_id.length-1; pos3=pos3-1; pos2=pos2-1; pos4=pos4-1; } else if(pos2 == 0) { pos2=serverresponse.arreglo_id.length-1; pos3=pos3-1; pos4=pos4-1; pos1=pos1-1; } else if(pos3 == 0) { pos3=serverresponse.arreglo_id.length-1; pos1=pos1-1; pos2=pos2-1; pos4=pos4-1; } else if(pos4 == 0) { pos4=serverresponse.arreglo_id.length-1; pos3=pos3-1; pos2=pos2-1; pos1=pos1-1; } else { pos1 = pos1-1; pos2 = pos2-1; pos3 = pos3-1; pos4 = pos4-1; } $("#prod0_b").attr("src", "images/"+serverresponse.arreglo_foto[pos1]); $("#prod0_a").html(serverresponse.arreglo_producto[pos1]); $('#producto0').click(function() { window.location.href='index.php?id=detalle&producto='+serverresponse.arreglo_id[pos1]+''; }); $("#prod1_b").attr("src", "images/"+serverresponse.arreglo_foto[pos2]); $("#prod1_a").html(serverresponse.arreglo_producto[pos2]); $('#producto1').click(function() { window.location.href='index.php?id=detalle&producto='+serverresponse.arreglo_id[pos2]+''; }); $("#prod2_b").attr("src", "images/"+serverresponse.arreglo_foto[pos3]); $("#prod2_a").html(serverresponse.arreglo_producto[pos3]); $('#producto2').click(function() { window.location.href='index.php?id=detalle&producto='+serverresponse.arreglo_id[pos3]+''; }); $("#prod3_b").attr("src", "images/"+serverresponse.arreglo_foto[pos4]); $("#prod3_a").html(serverresponse.arreglo_producto[pos4]); $('#producto3').click(function() { window.location.href='index.php?id=detalle&producto='+serverresponse.arreglo_id[pos4]+''; }); } } } ); }
3) El archivo que procesará la respuesta de estas funciones anteriores, es decir "cargar_slider.php", será de la siguiente forma:
(Nota: "json_encode" lo uso como forma de enviar de forma ordenada los arreglos que enviaré de vuelta como respuesta.)
<?php include("config.php"); $action = $_POST['action']; if($action == "cargar_slider") { $arreglo_foto = Array(); $arreglo_id = Array(); $arreglo_producto = Array(); $arreglo_id = Array(); $sql = mysqli_query($link, "select * from Productos"); while($row = mysqli_fetch_array($sql)) { array_push($arreglo_foto, $row['foto']); array_push($arreglo_id, $row['id_producto']); array_push($arreglo_producto, $row['producto']); } $json = array('arreglo_foto' => $arreglo_foto, 'arreglo_id' => $arreglo_id, 'arreglo_producto' => $arreglo_producto ); echo json_encode($json); }
Si tienes cualquier duda escríbeme, si te sirvió este artículo también recuerda dejar un comentario ^^
Si quieres ver este código en funcionamiento haz click aquí,
Haciendo click aquí podrás ver el código completo del archivo html con el css y las funciones javascript incluídas.
No hay comentarios:
Publicar un comentario