jQuery | Lluís Ulzurrun de Asanza i Sàez blog

Comienza el desarrollo de WP Carousel 0.6

July 30, 2010

This post was published 13 years ago so it may be outdated.

No tenía pensado retomar el desarrollo de WP Carousel hasta finales de verano, pero durante estos días que he estado fuera he recibido muchas sugerencias sobre nuevas características, que sumadas a las que tenía en mente al liberar la versión 0.5 hacen que me decante por comenzar el desarrollo de la próxima versión hoy mismo. No me gusta dar fechas de lanzamiento, pero esta versión estará disponible antes de finales de verano, y la siguiente gran revisión tardará mucho en llegar (no tengo pensados grandes cambios después de estos).

En esta versión me centraré en la sección de opciones (veréis muchos cambios a nivel de usuario y otros tantos a nivel de desarrolladores) y en un nuevo motor para los carruseles. A continuación os resumo las principales novedades.

50 técnicas CSS / JS para mejorar nuestros diseños

This post was published 14 years ago so it may be outdated.

Anteayer publicaron en SmashingMagazine un recopilatorio de 50 técnicas CSS / JS para mejorar el aspecto de nuestros diseños, que van desde hacer un menú desplegable usando CSS3 hasta crear una réplica de la barra inferior de Facebook, pasando por crear galerías de imágenes al estilo de las de la web de Apple o ajustar el alto de diversas columnas usando jQuery.

Haz que WordPress cargue los frameworks desde servidores externos

This post was published 14 years ago so it may be outdated.

WordPress utiliza varios frameworks Javascript para hacer diversos efectos y mejorar a interfaz, además de que algunos themes se aprovechan de esto para añadir mejoras al diseño utilizando funciones que ofrecen estos frameworks. Recurrir a estos métodos ocasiona un aumento del tiempo de carga de la página y del ancho de banda consumido por el servidor al enviar los archivos solicitados al usuario, sin embargo, podemos hacer que WordPress cargue estos archivos desde servidores externos que nos reducen el ancho de banda gastado y que, en algunos casos, son más rápidos que nuestro servidor. Además, usar este método también nos permite cargar automáticamente la versión más actualizada de los diversos frameworks, evitando tener que volver a subir las nuevas versiones a nuestro servidor.

En este artículo me centraré en jQuery, jQuery UI y Prototype, los frameworks que utiliza actualmente Sumolari.com, pero antes de hacer que WordPress cargue los archivos desde servidores externos (usaremos los de Google), veremos primero el método general.

wp_deregister_script, wp_register_script y wp_enqueue_script

WordPress tiene varias funciones para gestionar el código Javascript que se carga en cada página. Esta funciones permiten, a grandes rasgos, añadir un script con un nombre identificatorio (del cual se definen la URL del archivo, las dependencias, la versión o incluso si se puede cargar en el pie de página o no), eliminarlo o cargarlo.

Para el primero de todos los usos, recurriremos a la función wp_register_script. Esta función tiene 5 parámetros: $handle, $src, $deps, $ver e $in_footer.

[php]wp_register_script( $handle, $src, $deps, $ver, $in_footer );[/php]

La primera de todas debe contener el nombre identificatorio del script. Yo recomiendo usar nombres coherentes, así evitamos posibles problemas al usar muchos scripts y no distinguir unos de otros por su nombre.

El segundo parámetro de la función indica la URL del archivo a cargar. Tanto el primer parámetro como éste son obligatorios, los otros tres son opcionales y son, por orden de aparición, la matriz que indica las dependencias (estas dependencias se deben indicar usando el nombre identificatorio del script correspondiente), la versión del archivo a cargar (se utiliza para evitar problemas con la caché y demás, pero en muchos casos basta con dejarlo en blanco) y si el script se puede cargar al final de la página o no.

La función wp_deregister_script es la que elimina un script previamente registrado. Esto nos permitirá eliminar los script registrados por WordPress y añadir los nuestros modificados. El uso sería el siguiente:

[php]wp_deregister_script( $handle );[/php]

La función wp_enqueue_script es la que le indica a WordPress que debe cargar cierto script. Admite los mismos parámetros que wp_register_script, sólo que en la primera, a diferencia de la segunda, el nombre identificatorio le indica a la función qué script debe cargar (ya que esta función no registra ningún script) y sólo usará los demás parámetros en caso de no existir el script solicitado.

El uso es el siguiente:

[php]
wp_enqueue_script( $handle ); // Mínimo
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); // Parámetros opcionales
[/php]

Tenéis más información sobre estas funciones en el Codex de WordPress.

Dicho lo cual ya podemos pasar a aplicar lo visto hasta ahora.

Cargando jQuery, jQuery UI y Prototype desde los servidores de Google

Una pequeña aclaración antes de comenzar: podemos cargar cualquier script de WordPress (lista completa) desde cualquier servidor, de hecho veréis como no es nada complicado hacerlo.

Los scripts están alojados en los servidores de Google, que ofrecen una buena velocidad y se actualizan con cada nueva versión. También almacenan versiones antiguas de los frameworks, con lo que podemos optar por cargar una versión actualizada, la última o una más antigua.

El proceso para cargar los scripts es el siguiente:

Eliminamos (des-registramos) el script correspondiente a los frameworks jQuery, jQuery UI y Prototype de WordPress
Registramos de nuevo los tres scripts anteriores, cambiando la URL de los archivos
Cargamos los scripts recién registrados

Esto en código quedaría así:

[php]
// jQuery
wp_deregister_script(‘jquery’); // Des-registramos jQuery
wp_register_script(‘jquery’, ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, ”); // Registramos de nuevo jQuery, con la URL de la última versión del framework alojada en el servidor de Google
wp_enqueue_script(‘jquery’); // Cargamos jQuery

// jQuery-UI
wp_deregister_script(‘jquery-ui-core’); // Des-registramos jQuery-UI
wp_register_script(‘jquery-ui-core’, ("http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"), false, ”); // Registramos de nuevo jQuery-UI, con la URL de la última versión del framework alojada en el servidor de Google
wp_enqueue_script(‘jquery-ui-core’); // Cargamos jQuery-UI

// Prototype
wp_deregister_script(‘prototype’); // Des-registramos Prototye
wp_register_script(‘prototype’, ("http://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"), false, ”); // Registramos de nuevo Prototype, con la URL de la última versión del framework alojada en el servidor de Google
wp_enqueue_script(‘prototype’); // Cargamos Prototype
[/php]

Como veis, no tiene mucho misterio y es muy fácil ampliarlo a otros scripts. Como siempre, cualquier duda o sugerencia la podéis hacer en los comentarios.

Nota: La versión que carga por defecto WordPress de jQuery incluye una llamada a la función jQuery.noConflict, por lo que en el primer script que utilice jQuery deberemos hacer una llamada a esta función para asegurar que todos los scripts funcionen correctamente.

Simula el reloj de un HTC con jQuery

February 15, 2010

This post was published 14 years ago so it may be outdated.

Vía Anieto2k descubro jDigiClock, un plugin para jQuery que te permite añadir un reloj con el aspecto del de un HTC, además de añadir información meteorológica sobre una ciudad a nuestra elección.

Podéis ver una demostración o descargar el script.

Añade un efecto nieve a tu WordPress

This post was published 14 years ago so it may be outdated.

Cada día están más cerca las Navidades, y ya hay algunas webs que han actualizado su diseño cambiando el logo, colores, iconos… Otros optan por añadir algún que otro efecto a la página, como por ejemplo, un efecto que simule que nieva. Anteayer publicaron en Anieto2k un plugin que añadía este efecto navideño a WordPress mediante MooTools o jQuery.

Podéis encontrar más información y los enlaces de descargar del plugin (versión MooTools) aquí o (version jQuery) aquí.

Creando múltiples carruseles con jQuery

This post was published 14 years ago so it may be outdated.

En vista de que algunos tenían problemas para mostrar varios carruseles con aquel tutorial que escribí sobre cómo crear un carrusel con jQuery, hoy voy a explicar cómo crear varios carruseles, a modo de continuación del anterior tutorial, así que os recomiendo leerlo antes de continuar con éste.

Bien, partiremos del código que usé en la demo (que podéis descargar aquí), y tendremos que cambiar tanto el CSS como el Javascript que hay incrustado en el HTML, dejando intacto los dos primeros códigos Javascript que llamamos (jQuery y Stepcarousel), en definitiva, que partiremos del siguiente código:

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carousel con jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="carousel.js" type="text/javascript"></script>
<script type="text/javascript">
stepcarousel.setup({
galleryid: ‘carousel’, //id of carousel DIV
beltclass: ‘belt’, //class of inner "belt" DIV containing all the panel DIVs
panelclass: ‘panel’, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
statusvars: [‘statusA’, ‘statusB’, ‘statusC’], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [‘external’] //content setting [‘inline’] or [‘external’, ‘path_to_external_file’]
})
</script>
<style type="text/css">
/* Carousel */

#carousel {
position: relative; /* Necesario */
overflow: hidden; /* Necesario */
height: 250px;
margin-left:35px;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
}

#carousel .belt {
position: absolute; /* Necesario */
left: 0;
top: 0;
margin:0 10px 10px 0;
}

#carousel .panel {
width:265px;
float: left; /* Necesario */
overflow: hidden;
margin: 15px;
padding:7px;
border:1px solid #5B5B5B;
background:#383838 url(carousel-panel-bg.png) bottom left repeat-x;
}

#carousel .panel .panel-text {
padding-top:5px;
font-size:13px;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
}

#carousel .panel .panel-text a {
color:#CCC;
text-decoration:none;
}

#carousel .panel .panel-text a:hover {
color:#FFF;
text-decoration:underline;
}

/* Botones del carousel */

.button-prev {
height:250px;
width:35px;
float:left;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
-moz-border-radius:10px 0 0 10px;
}

.button-prev a {
display:block;
padding:5px;
margin-top:105px;
}

.button-next {
height:250px;
width:35px;
float:right;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
-moz-border-radius:0 10px 10px 0;
}

.button-next a {
display:block;
padding:5px;
margin-top:105px;
}

a img {
border:none;
}
</style>
</head>

<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostración</p>
</div>
</div>

<div class="panel">
<img src="img2.png" />
<div class="panel-text">
<p>de un tutorial de <a href="http://sumolari.com">Sumolari.com</a>.</p>
</div>
</div>

<div class="panel">
<img src="img3.png" />
<div class="panel-text">
<p>Puedes ver el tutorial en cuestión</p>
</div>
</div>

<div class="panel">
<img src="img4.png" />
<div class="panel-text">
<p>en <a href="http://sumolari.com/?p=1708">este artículo</a> del blog.</p>
</div>
</div>

<div class="panel">
<img src="img5.png" />
<div class="panel-text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>

<div class="panel">
<img src="img6.png" />
<div class="panel-text">
<p>Amet sit dolor ipsum lorem.</p>
</div>
</div>

</div>
</div>
</body>
</html>
[/html]

Vale, primero nos centraremos en el CSS, que es la parte más fácil de adaptar, lo que tenemos que hacer es cambiar todas las líneas que definan un estilo para el elemento con ID carousel, ya que al haber varios carruseles necesitaremos un estilo común a ellos, y no es lo mejor usar el mismo ID para dos elementos (además de que no sería compatible con Stepcarousel), así que básicamente lo que tenemos que hacer es cambiar #carousel por .carousel, dejando el código CSS así:

[css]
/* Carousel */

.carousel {
position: relative; /* Necesario */
overflow: hidden; /* Necesario */
height: 250px;
margin-left:35px;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
}

.carousel .belt {
position: absolute; /* Necesario */
left: 0;
top: 0;
margin:0 10px 10px 0;
}

.carousel .panel {
width:265px;
float: left; /* Necesario */
overflow: hidden;
margin: 15px;
padding:7px;
border:1px solid #5B5B5B;
background:#383838 url(carousel-panel-bg.png) bottom left repeat-x;
}

.carousel .panel .panel-text {
padding-top:5px;
font-size:13px;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
}

.carousel .panel .panel-text a {
color:#CCC;
text-decoration:none;
}

.carousel .panel .panel-text a:hover {
color:#FFF;
text-decoration:underline;
}

/* Botones del carousel */

.button-prev {
height:250px;
width:35px;
float:left;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
-moz-border-radius:10px 0 0 10px;
}

.button-prev a {
display:block;
padding:5px;
margin-top:105px;
}

.button-next {
height:250px;
width:35px;
float:right;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
-moz-border-radius:0 10px 10px 0;
}

.button-next a {
display:block;
padding:5px;
margin-top:105px;
}

a img {
border:none;
}
[/css]

Como os podréis imaginar, ahora tendremos que actualizar el código HTML del carrusel para que se adapte al nuevo CSS. Lo único que hay que hacer es añadir la clase carousel al div con ID carousel. Fácil, ¿verdad? El código quedará así:

[html]
<div class="button-next">
<a href="javascript:stepcarousel.stepBy(‘carousel’, 1)"><img src="arrow_right.png" /></a>
</div>

<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostración</p>
</div>
</div>

<div class="panel">
<img src="img2.png" />
<div class="panel-text">
<p>de un tutorial de <a href="http://sumolari.com">Sumolari.com</a>.</p>
</div>
</div>

<div class="panel">
<img src="img3.png" />
<div class="panel-text">
<p>Puedes ver el tutorial en cuestión</p>
</div>
</div>

<div class="panel">
<img src="img4.png" />
<div class="panel-text">
<p>en <a href="http://sumolari.com/?p=1708">este artículo</a> del blog.</p>
</div>
</div>

<div class="panel">
<img src="img5.png" />
<div class="panel-text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>

<div class="panel">
<img src="img6.png" />
<div class="panel-text">
<p>Amet sit dolor ipsum lorem.</p>
</div>
</div>

</div>
</div>
[/html]

Lo siguiente será crear el código HTML del segundo carrusel. En mi caso serán idénticos (tendrán los mismos elementos), así que lo único que tendré que hacer será duplicar el código HTML y cambiar la ID del segundo carrusel de “carousel” a “carousel2“, de forma que el código quedará así:

[html]
<div class="button-next">
<a href="javascript:stepcarousel.stepBy(‘carousel’, 1)"><img src="arrow_right.png" /></a>
</div>

<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostración</p>
</div>
</div>

<div class="panel">
<img src="img2.png" />
<div class="panel-text">
<p>de un tutorial de <a href="http://sumolari.com">Sumolari.com</a>.</p>
</div>
</div>

<div class="panel">
<img src="img3.png" />
<div class="panel-text">
<p>Puedes ver el tutorial en cuestión</p>
</div>
</div>

<div class="panel">
<img src="img4.png" />
<div class="panel-text">
<p>en <a href="http://sumolari.com/?p=1708">este artículo</a> del blog.</p>
</div>
</div>

<div class="panel">
<img src="img5.png" />
<div class="panel-text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>

<div class="panel">
<img src="img6.png" />
<div class="panel-text">
<p>Amet sit dolor ipsum lorem.</p>
</div>
</div>

</div>
</div>

<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostración</p>
</div>
</div>

<div class="panel">
<img src="img2.png" />
<div class="panel-text">
<p>de un tutorial de <a href="http://sumolari.com">Sumolari.com</a>.</p>
</div>
</div>

<div class="panel">
<img src="img3.png" />
<div class="panel-text">
<p>Puedes ver el tutorial en cuestión</p>
</div>
</div>

<div class="panel">
<img src="img4.png" />
<div class="panel-text">
<p>en <a href="http://sumolari.com/?p=1708">este artículo</a> del blog.</p>
</div>
</div>

<div class="panel">
<img src="img5.png" />
<div class="panel-text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>

<div class="panel">
<img src="img6.png" />
<div class="panel-text">
<p>Amet sit dolor ipsum lorem.</p>
</div>
</div>

</div>
</div>
[/html]

Ya sólo queda adaptar el código Javascript. Lo primero que tenemos que hacer es añadir una línea más al código original que nos evitará problemas: defaultbuttons: {enable: true, moveby: 1, leftnav: [‘arrowl.gif’, -10, 100], rightnav: [‘arrowr.gif’, -10, 100]}, . A continuación duplicaremos el código y añadiremos un punto y coma (;) al final del código original. Por último cambiaremos la ID que hay en el segundo código de “carousel” a “carousel2“. El código Javascript quedaría así:

[javascript]
stepcarousel.setup({
galleryid: ‘carousel’, //id of carousel DIV
beltclass: ‘belt’, //class of inner "belt" DIV containing all the panel DIVs
panelclass: ‘panel’, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: [‘arrowl.gif’, -10, 100], rightnav: [‘arrowr.gif’, -10, 100]},
statusvars: [‘statusA’, ‘statusB’, ‘statusC’], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [‘external’] //content setting [‘inline’] or [‘external’, ‘path_to_external_file’]
});
stepcarousel.setup({
galleryid: ‘carousel2’, //id of carousel DIV
beltclass: ‘belt’, //class of inner "belt" DIV containing all the panel DIVs
panelclass: ‘panel’, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: [‘arrowl.gif’, -10, 100], rightnav: [‘arrowr.gif’, -10, 100]},
statusvars: [‘statusA’, ‘statusB’, ‘statusC’], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [‘external’] //content setting [‘inline’] or [‘external’, ‘path_to_external_file’]
})
[/javascript]

Y con esto ya lo tenemos acabado. El código final que tendríamos sería este:

[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Carousel con jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="carousel.js" type="text/javascript"></script>
<script type="text/javascript">
stepcarousel.setup({
galleryid: ‘carousel’, //id of carousel DIV
beltclass: ‘belt’, //class of inner "belt" DIV containing all the panel DIVs
panelclass: ‘panel’, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: [‘arrowl.gif’, -10, 100], rightnav: [‘arrowr.gif’, -10, 100]},
statusvars: [‘statusA’, ‘statusB’, ‘statusC’], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [‘external’] //content setting [‘inline’] or [‘external’, ‘path_to_external_file’]
});
stepcarousel.setup({
galleryid: ‘carousel2’, //id of carousel DIV
beltclass: ‘belt’, //class of inner "belt" DIV containing all the panel DIVs
panelclass: ‘panel’, //class of panel DIVs each holding content
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: [‘arrowl.gif’, -10, 100], rightnav: [‘arrowr.gif’, -10, 100]},
statusvars: [‘statusA’, ‘statusB’, ‘statusC’], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [‘external’] //content setting [‘inline’] or [‘external’, ‘path_to_external_file’]
})
</script>
<style type="text/css">
/* Carousel */

.carousel {
position: relative; /* Necesario */
overflow: hidden; /* Necesario */
height: 250px;
margin-left:35px;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
}

.carousel .belt {
position: absolute; /* Necesario */
left: 0;
top: 0;
margin:0 10px 10px 0;
}

.carousel .panel {
width:265px;
float: left; /* Necesario */
overflow: hidden;
margin: 15px;
padding:7px;
border:1px solid #5B5B5B;
background:#383838 url(carousel-panel-bg.png) bottom left repeat-x;
}

.carousel .panel .panel-text {
padding-top:5px;
font-size:13px;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
}

.carousel .panel .panel-text a {
color:#CCC;
text-decoration:none;
}

.carousel .panel .panel-text a:hover {
color:#FFF;
text-decoration:underline;
}

/* Botones del carousel */

.button-prev {
height:250px;
width:35px;
float:left;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
-moz-border-radius:10px 0 0 10px;
}

.button-prev a {
display:block;
padding:5px;
margin-top:105px;
}

.button-next {
height:250px;
width:35px;
float:right;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
-moz-border-radius:0 10px 10px 0;
}

.button-next a {
display:block;
padding:5px;
margin-top:105px;
}

a img {
border:none;
}
</style>
</head>

<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostración</p>
</div>
</div>

<div class="panel">
<img src="img2.png" />
<div class="panel-text">
<p>de un tutorial de <a href="http://sumolari.com">Sumolari.com</a>.</p>
</div>
</div>

<div class="panel">
<img src="img3.png" />
<div class="panel-text">
<p>Puedes ver el tutorial en cuestión</p>
</div>
</div>

<div class="panel">
<img src="img4.png" />
<div class="panel-text">
<p>en <a href="http://sumolari.com/?p=1708">este artículo</a> del blog.</p>
</div>
</div>

<div class="panel">
<img src="img5.png" />
<div class="panel-text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>

<div class="panel">
<img src="img6.png" />
<div class="panel-text">
<p>Amet sit dolor ipsum lorem.</p>
</div>
</div>

</div>
</div>

<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostración</p>
</div>
</div>

<div class="panel">
<img src="img2.png" />
<div class="panel-text">
<p>de un tutorial de <a href="http://sumolari.com">Sumolari.com</a>.</p>
</div>
</div>

<div class="panel">
<img src="img3.png" />
<div class="panel-text">
<p>Puedes ver el tutorial en cuestión</p>
</div>
</div>

<div class="panel">
<img src="img4.png" />
<div class="panel-text">
<p>en <a href="http://sumolari.com/?p=1708">este artículo</a> del blog.</p>
</div>
</div>

<div class="panel">
<img src="img5.png" />
<div class="panel-text">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>

<div class="panel">
<img src="img6.png" />
<div class="panel-text">
<p>Amet sit dolor ipsum lorem.</p>
</div>
</div>

</div>
</div>
</body>
</html>
[/html]

Como en el tutorial anterior, he publicado una pequeña demo para que veáis el código en acción, que podéis descargar desde aquí.

Nota: Acabo de ver que han actualizado el script de Stepcarousel y le han añadido algunas funciones nuevas. En cuento tenga algo de tiempo libre (últimamente ando algo ocupado) actualizaré WP Carousel.

Otro método para mejorar los checkboxes con jQuery

August 27, 2009

This post was published 14 years ago so it may be outdated.

Vía Anieto2k descubro un excelente tutorial para mejorar el aspecto de los checkboxes de nuestros formularios con jQuery.

Sin duda, muy útil para darle un toque único y genial a nuestro próximo proyecto.

Descubro los plugins de jQuery que usa una página con un simple marcador

May 20, 2009

This post was published 14 years ago so it may be outdated.

Vía Anieto2k descubro un marcador que nos permite saber los plugins de jQuery que utiliza una página.

Basta con guardar este enlace en los marcadores y hacer clic en él cuando estemos en la web que nos interesa.

Otro interesante marcador es el de este otro enlace, que nos permite saber qué Framework Javascript se utiliza en la página. La forma de usarlo es la misma que el anterior.

Crea un carrusel con jQuery

This post was published 15 years ago so it may be outdated.

En muchas páginas webs hay carruseles que muestran una imagen y un pequeño texto. Un ejemplo de estos carruseles lo podemos ver algunas páginas de empresas de diseño web, donde nos muestras el nombre de uno de sus diseños y una pequeña captura. También son frecuentes en webs de revistas, usados para mostrar los artículos más destacados.

Desde hacía tiempo quería crear un carrusel con jQuery y hace un rato he encontrado un plugin de este framework que es precisamente lo que andaba buscando: Step Carousel.

Para añadir el carrusel basta con enlazar jQuery y el plugin mediante <script /> y luego añadir el siguiente código Javascript, que inicia el carrusel:

[js]
<script type="text/javascript">
stepcarousel.setup({
galleryid: ‘carousel’, //ID del div que contiene el carrusel
beltclass: ‘belt’, //Clase del primer div dentro del carrusel, que contiene al resto de divs
panelclass: ‘panel’, //Clase de cada panel individual
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
statusvars: [‘statusA’, ‘statusB’, ‘statusC’], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: [‘external’] //content setting [‘inline’] or [‘external’, ‘path_to_external_file’]
})
</script>
[/js]

También es necesario incluir un poco de CSS para que el carrusel funcione correctamente:

[css]#carousel {
position: relative; /* Necesario */
overflow: hidden; /* Necesario */
height: 250px;
margin-left:35px;
background:#5B5B5B url(carousel-bg.png) bottom left repeat-x;
}

#carousel .belt {
position: absolute; /* Necesario */
left: 0;
top: 0;
margin:0 10px 10px 0;
}

#carousel .panel {
width:265px;
float: left; /* Necesario */
overflow: hidden;
margin: 15px;
padding:7px;
border:1px solid #5B5B5B;
background:#383838 url(carousel-panel-bg.png) bottom left repeat-x;
}[/css]

Finalmente, este es el código HTML que usaremos en el carrusel:

[html]
<a href="javascript:stepcarousel.stepBy(‘carousel’, 1)">Anterior</a>
<a href="javascript:stepcarousel.stepBy(‘carousel’, -1)">Posterior</a>

<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostración</p>
</div>
</div>

<div class="panel">
<img src="img2.png" />
<div class="panel-text">
<p>de un tutorial de <a href="http://sumolari.com">Sumolari.com</a>.</p>
</div>
</div>

</div>
</div>
[/html]

El código es sencillo de entender y fácil de personalizar. Por ejemplo, para añadir más paneles basta con añadir más bloques, que tienen la siguiente estructura:

[html]
<div class="panel">
<img src="img2.png" />
<div class="panel-text">
<p>de un tutorial de <a href="http://sumolari.com">Sumolari.com</a>.</p>
</div>
</div>
[/html]

Si lo que queremos es que el link pase dos paneles en lugar de uno, basta con cambiar el -1 o el 1 por -2 o 2 respectivamente.

He montado una demostración del carrusel que se puede ver aquí.

Por último, podéis descargar la demostración desde aquí (incluye imágenes, Javascript y CSS).

Sustituyendo CSS3 por jQuery

February 25, 2009

This post was published 15 years ago so it may be outdated.

Ayer en Anieto2k se publicó un interesante artículo sobre algunas técnicas y propiedades de CSS3 que se pueden conseguir con jQuery.

Para los que no estéis al tanto del asunto, el principal problema de CSS3 es que no todos los navegadores lo soportan, y entre los que sí lo hacen, no todos soportan todas las funciones que nos trae CSS3. Por eso actualmente no es viable usar únicamente CSS3 para nuestros diseños, ya que muchos usuarios no podrán ver el resultado final como debería.

Y aquí es donde entra jQuery, que mediante javascript (un código que sí que ejecutan la mayoría de los navegadores, por no decir todos) obtiene unos resultados similares a los que conseguiríamos con CSS3.

Ulzurrun de Asanza i Sàez

Tag: jQuery

Comienza el desarrollo de WP Carousel 0.6

Read more →

50 técnicas CSS / JS para mejorar nuestros diseños

Haz que WordPress cargue los frameworks desde servidores externos

wp_deregister_script, wp_register_script y wp_enqueue_script

Cargando jQuery, jQuery UI y Prototype desde los servidores de Google

Simula el reloj de un HTC con jQuery

Añade un efecto nieve a tu WordPress

Creando múltiples carruseles con jQuery

Otro método para mejorar los checkboxes con jQuery

Descubro los plugins de jQuery que usa una página con un simple marcador

Crea un carrusel con jQuery

Sustituyendo CSS3 por jQuery