miércoles, 7 de diciembre de 2016

Crear slider de elementos que están en la BDD

Hola amigos Arcanitos!
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