Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.
Monteserín Gallery
Descargar monteserinGallery.js y atendiendo a la documentación del enlace, reproducirlo con nuestras propias fotos.
Kwicks
Ejercicio: implementar el plugin kwicks para que muestre tres pestañas con la siguiente apariencia:
LightBox 2
Descargar este plugin y echarlo a andar siguiendo su documentación.
Notas:
– Para que la fotografía no se vea a pantalla completa cuando pulsemos sobre su link es necesario que el documento tenga un doctype. Además, la librería de javascript debe cargarse justo antes del cierre del body.
<!DOCTYPE html> – La carga de jQuery y del plugin, debe estar justo antes del cierre del body.
Photo Info
Otros plugin jQuery
- Slide reveal, hace aparecer un panel a un lado de la pantalla
- Menú responsive
- Mapa de imágenes
- Autoscroll
- Maquetación tipo revista
- Skrollr Parallax
- Demo de scrollr.
- Descarga de scrollr
- Documentación de Scrollr .
Para determinar el momento en el que irán apareciendo las cosas, lo más fácil es tomar como referencia el límite superior de la página usando el atributo: data–100-top=»estilo» (A 100 px de arriba hago cosas)
- Color Box: Para redimensionarlo podemos usar este código:
jQuery(".inline").colorbox({maxWidth:'25%', maxHeight:'25%'});- NavNav
- Flex slider
- Animated Pie Chart
- Aniview Permite detonar animaciones cuando un elemento está a la vista. Para ello, deberemos cargar, además, la hoja de estilos de animate.css y usar el siguiente código para inicializar:
$(function(){
var options = { animateThreshold: 100 };
$('.aniview').AniView(options);
})Las animaciones que usaremos en el atributo data-av-animation=»slideInRight», serán las de animate.css.
- Swipe slider:
La documentación de este plugin está en este enlace:
idangero
Aquí se indica que para cambiar el ancho y el alto del slider accedamos al estilo:
.swiper-container, .swiper-slide
Nota importante:
Si en un mismo proyecto tenemos varios sliders, deberemos identificarlos de forma diferente al aplicar el script:
const mySwiper1 = new Swiper('#page1 .swiper-container',{
//Your options here: mode:'horizontal', loop: true //etc..
});
const mySwiper2 = new Swiper('#page2 .swiper-container',{
//Your options here: mode:'horizontal', loop: true //etc..
});Imágenes vectoriales de precarga
Validación con plugin
<script>
$(document).ready(function(){
$("#myform").validate();
});
</script>
class="required number email url"
minlength="5"
maxlength="5"
equalTo="#idPassword"Ejercicio
Nota: el plugin requiere que todos los elementos tengan un name.
Todos los campos son requeridos.
Los campos edad y código postal deben contener valores numéricos.
No podremos poner más de 5 dígitos en código postal.
Los campos password deben visualizarse como asteriscos y para que todo valide correctamente la segunda ve que introducimos el password debemos poner el mismo valor que la primera vez.
El campo página web debe contener una URL.
Campo correo electrónico debe contener una dirección mail.
Utilizando rules
$(document).ready(function(){
$("#myform").validate({
rules: {
fieldNombre:{//los name de los elementos
required:true
},
…
},
messages: {
fieldNombre: "Por favor, inserte su nombre",
fieldEdad: {
required: "Por favor, inserte la edad",
number: "Sólo puedes introducir números"
},
...
},
submitHandler: function(){
alert("rqr");
}
});
});
rules
required:true,
number:true,
minlength:3,
maxlength:5,
min:300,
max:600
email:true
url:true
equalTo: "#password"Ejercicio
Nota: el plugin requiere que todos los elementos tengan un name.
Todos los campos son requeridos.
Los campos edad y código postal deben contener valores numéricos.
No podremos poner más de 5 dígitos en código postal.
Los campos password deben visualizarse como asteriscos y para que todo valide correctamente la segunda ve que introducimos el password debemos poner el mismo valor que la primera vez.
El campo página web debe contener una URL.
Campo correo electrónico debe contener una dirección mail.