Usando Swiper para crear sliders mobiles

Si necesitamos un buen slider que funcione correctamente en telefonos, podemos usar SwiperJS, el cual es bastante sencillo de usar. E; primer paso es incluir el script mediane un CDN o instalarlo y usarlo con npm: <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.css”&gt; <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/css/swiper.min.css”&gt; <script src=”https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.x.x/js/swiper.min.js”></script&gt; No debemos olvidar reemplazar el 4.x.x con la version actual. Despues, agregamos el layout: <!– Slider main container –> <div class=”swiper-container”> … Continúa leyendo Usando Swiper para crear sliders mobiles

Mostrando una imagen previa de una foto en un input field

Si tenemos un formulario desde el cual subimos una foto, podemos mostrársela al usuario  antes de que la suba, de esta forma, primero creamos un lugar donde la foto se mostrara: <img id=”output” style=”max-width:100%;”> Después creamos la función para mostrar la foto: var loadFile = function(event) { var output = document.getElementById(‘output’); output.src = URL.createObjectURL(event.target.files[0]); }; Después ejecutamos la función cuando el usuario elija una foto: … Continúa leyendo Mostrando una imagen previa de una foto en un input field

Mostrando un gif a la hora de enviar una forma

Si tenemos una forma en nuestra app o pagina que sube un archivo, podemos mostrar un gif de cargando al usuario para que sepa que la acción tomara algo de tiempo. Para esto lo primero que hacemos es poner la función dentro del form de esta forma: <form class=”” action=”/pedidos” method=”post” enctype=”multipart/form-data” onsubmit=”ShowLoading()”> Y despues creamos el script que muesta el gif y pone blanco … Continúa leyendo Mostrando un gif a la hora de enviar una forma