Bienvenidos sean a este post, hoy comenzaremos una serie de posts sobre algo muy interesante.
Porque reinventar la rueda si esta ya existe? bueno los plug-ins o complementos son basicamente eso, elementos que ya existen y pueden cubrir nuestra necesidad de hacer lo comentado, y si a esto le sumamos que implementarlos es muy simple porque solamente debemos:
- Obtener el plug-in
- Referenciarlo en la pagina
- Llamarlo desde los scripts
Para poder estudiar este concepto vamos a trabajar con un plug-in llamado cycle plugin, esto lo descargaremos desde la siguiente direccion:
En esta pagina deben descargar el plug-in completo llamado jquery.cycle.all.js, simplemente click con el boton derecho y elijan Guardar Enlace como o Save as, una vez descargado debemos hacer un par de cosas, primero debemos crear un nuevo directorio donde tendremos todos los archivos, nuestro primer archivo sera el script que descargamos, el siguiente paso sera agregar las fotos que estan en el siguiente archivo:
Deben extraerlas en el directorio creado y ya veremos como usarlas, nuestro siguiente paso sera crear la pagina HTML con el nombre de plugin.html y le agregaremos el siguiente codigo:
plugin.html
<html>
<head>
<title>Mitos de Cthulhu</title>
<link rel="stylesheet" href="estilo.css" type="text/css"/>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
crossorigin="anonymous"></script>
<script src="jquery.cycle.all.js"></script>
<script src="codigo.js"></script>
</head>
<body>
<div id="contenedor">
<h1>Libros seleccionados</h1>
<ul id="libros">
<li>
<img src="book1.jpg" alt="The call of Cthulhu" />
<div class="titulo">The call of Cthulhu</div>
<div class="autor">H. P. Lovecraft</div>
</li>
<li>
<img src="book2.jpg" alt="Conan the barbarian" />
<div class="titulo">Conan the barbarian</div>
<div class="autor">Robert E. Howard</div>
</li>
<li>
<img src="book3.jpg" alt="Hyperborea" />
<div class="titulo">Hyperborea</div>
<div class="autor">Clark A. Smith</div>
</li>
<li>
<img src="book4.jpg" alt="The color out of space" />
<div class="titulo">The color out of space</div>
<div class="autor">H. P. Lovecraft</div>
</li>
</ul>
</div>
</body>
</html>
En esta tendremos nuestra pagina, hablemos primero sobre el body en donde tendremos una lista con cuatro elementos, estos seran cuatro libros de los mitos de cthulhu donde tendremos la foto, el titulo y el autor de este, tan simple como eso, en el head cargaremos primero el archivo de los estilos (estilo.css), luego la libreria de jQuery desde el sitio, lo siguiente sera implementar el plug-in, para finalmente cargar el archivo donde tendremos nuestro codigo de jQuery, no tiene mucho mas secreto, si lo cargan lo veran bastante tosco pero para ello ahora crearemos nuestro siguiente archivo y lo llamaremos estilo.css y le agregaremos el siguiente codigo:
estilo.css
html, body {
margin: 0;
padding: 0;
}
body {
font: 62.5% Verdana, Helvetica, Arial, sans-serif;
color: #000;
background: #fff;
}
#contenedor {
font-size: 1.2em;
margin: 10px 2em;
}
h1 {
font-size: 2.5em;
margin-bottom: 0;
}
h2 {
font-size: 1.3em;
margin-bottom: .5em;
}
h3 {
font-size: 1.1em;
margin-bottom: 0;
}
code {
font-size: 1.2em;
}
a {
color: #06581f;
}
ul#libros {
list-style: none;
margin: 0;
padding: 0;
height: 210px;
width: 500px;
overflow: hidden;
}
ul#libros li {
list-style: none;
margin: 0;
padding: 0;
height: 210px;
width: 500px;
background-color: #F79321;
position: relative;
}
ul#libros li img {
position: absolute;
left: 0;
top: 0;
width: 130px;
height: 210px;
}
ul#libros li .titulo {
margin-left: 130px;
padding: 10px;
width: 370px;
font-weight: bold;
font-size: 1.2em;
background-color: #000;
color: #fff;
overflow: hidden;
}
ul#libros li .autor {
margin-left: 130px;
padding: 10px 10px 0 10px;
width: 370px;
font-weight: bold;
background-color: #F79321;
color: #fff;
}
Como se imaginan aqui aplicamos los estilos, los primeros seran los basicos para la pagina pero despues aplicamos unos especificos para la lista (ul), y cada uno de los elementos de esta, le establecemos la ubicacion, los margenes, los colores, los tipos de letra y otros detalles, si prueban la pagina ahora se vera de la siguiente manera
Con todo establecido solo nos resta trabajar con el codigo de jQuery, para ello crearemos un archivo con el nombre codigo.js y le agregaremos el siguiente codigo:
codigo.js
$(document).ready(function() {
$('#libros').cycle();
});Este es un llamado simple al plug-in por medio de la funcion cycle, si vamos a la pagina se vera de la siguiente forma
Ahora volvamos al codigo anterior y modifiquemoslo de la siguiente manera:
$(document).ready(function() {
$('#libros').cycle({
timeout: 2000,
speed: 200,
pause: true
});
});En este caso modificamos los valores predeterminados por otros para nuestras necesidades, si vuelven a cargar la pagina se vera de la siguiente manera
Con los parametros cambiados se hacen otros efectos, volvamos a tomar el codigo anterior y cambiemoslo de la siguiente manera:
$.fn.cycle.defaults.timeout = 10000;
$.fn.cycle.defaults.random = true;
$(document).ready(function() {
$('#libros').cycle({
timeout: 2000,
speed: 200,
pause: true
});
});Observen como establecimos unos valores predeterminados, el primero sera para el timeout y el siguiente sera para establecer que los elementos mostrados sean aleatoria, despues seguimos con los mismos parametros, si lo prueban trabajara de la siguiente manera
Observen que los efectos son los mismos que antes pero debido al random agregado no los mostrara en forma secuencial sino de forma aleatoria, tal como lo establecimos con los valores predeterminados, como pueden ver de una manera muy simple agregamos un efecto y pudimos alterarlo con solo unos parametros, pero no se preocupen que ahondaremos en este tema en los proximos posts, antes de finalizar les dejo todos los archivos que trabajamos en este post:
En resumen, hoy hemos visto como usar un plug-in para jQuery, como descargarlo, como implementarlo, primero de una forma basica, luego con unos parametros y por ultimo como establecerle unos valores predeterminados, espero les haya sido de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Donación
Es para mantenimento del sitio, gracias!
$1.50
El blog de Tinchicus 