Plugins jQuery

Monteserín Gallery

Descargar monteserinGallery.js y atendiendo a la documentación del enlace, reproducirlo con nuestras propias fotos.

http://www.pablomonteserin.com/monteserin-gallery/

Kwicks

http://www.jeremymartin.name/projects.php?project=kwicks

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

kwicks http://www.lokeshdhakar.com/projects/lightbox2

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.

lightbox

Photo Info

jQuery photo info

Otros plugin jQuery

  • Slide reveal, hace aparecer un panel a un lado de la pantalla
  • jQuery.youtubebackground, para poner videos de background. Ojo, que si utilizamos este plugin en un dominio https, tendremos que añadir la "s" en el fichero jquery.youtubebackgroud, en la línea tag.src = 'http://www.youtube.com/iframe_api';
  • Menú responsive
  • Mapa de imágenes
  • Autoscroll
  • Maquetación tipo revista
  • Skrollr Parallax
    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
  • SuperSlides (full screen 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:

    var mySwiper1 = new Swiper('#page1 .swiper-container',{
    		//Your options here:
    		mode:'horizontal',
    		loop: true
    		//etc..
    	});  
    var mySwiper2 = new Swiper('#page2 .swiper-container',{
    		//Your options here:
    		mode:'horizontal',
    		loop: true
    		//etc..
    	});

Validación con plugin

http://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.

Validation sin rules

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.

Validation con rules
icono de mandar un mail¡Contacta conmigo!
contacta conmigoPablo Monteserín

¡Hola! ¿En qué puedo ayudarte?