Plugins de jQuery

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.

Ver monteserin gallery

Kwicks

Enlce a kwicks

Ejercicio: implementar el plugin kwicks para que muestre tres pestañas con la siguiente apariencia:

Plugin lightbox

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

jQuery(".inline").colorbox({maxWidth:'25%', maxHeight:'25%'});
$(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

https://jqueryvalidation.org/

<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.

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.