Currently browsing: imágenes

50 packs de iconos gratuitos

Beware: This post was published 6 years ago and its content may be outdated.
Iconos

Iconos

Ayer publicaron en Smashing Magazine una lista con 50 packs de iconos totalmente gratuitos y de diversos temas, desde iconos para reemplazar los que tienen ciertas aplicaciones (como Photoshop o Dreamweaver) hasta iconos navideños, pasando por iconos de instrumentos, iconos orientados a páginas web, etc.

Alguno de esos 50 packs ya han aparecido por el blog antes, sin embargo la gran mayoría son nuevos y pueden sernos muy útiles en algún momento.

Muestra imágenes aleatorias con el Widget de texto de WordPress

Beware: This post was published 6 years ago and its content may be outdated.

Ayer expliqué como mostrar imágenes aleatorias con PHP, para lo cual era estrictamente necesario modificar el archivo PHP en el que íbamos a mostrar la imagen aleatoria. Hoy voy a explicar cómo crear un pequeño plugin para WordPress que mediante el uso de etiquetas especiales en el Widget de texto, muestre una imagen aleatoria que definamos anteriormente.

Nota: Podéis realizar las modificaciones en el archivo functions.php de vuestro theme. También pondré a vuestra disposición el resultado del tutorial en forma de plugin, sin embargo no lo actualizaré ni lo enviaré al repositorio de plugins, ya que la idea no es crear un nuevo plugin, sino adaptar el tutorial de ayer al Widget de texto de WordPress.

Bien, utilizaremos la siguiente estructura en las etiquetas:

[RANDOM_IMG]
URL||IMG_URL[]
URL1||IMG_URL1[]
URL2||IMG_URL2
[/RANDOM_IMG]

La primera y la última línea indican que vamos a definir imágenes y enlaces y que vamos a mostrarlas. La segunda (y la tercera) línea es la estructura básica de una imagen y un enlace. Donde pone URL se debe poner la URL del destino del enlace y donde pone IMG_URL se debe poner la URL a la imagen. “[]” (sin las comillas) indica que ahí acaba una imagen y que el siguiente código corresponderá a otra imagen. La última imagen no necesita el indicador anterior.

Vista la estructura básica, pasaremos a crear la función que reemplazará las etiquetas por el código PHP correspondiente. El código que usaremos es el siguiente, que está comentado, explicando para qué sirve cada línea:

// Añadimos el filtro
add_filter('widget_text', 'imagenes_aleatorias');
// Ahí va la función
function imagenes_aleatorias($text) {
// Primero separamos el texto en búsqueda de la etiqueta que indica el final de un conjunto de imágenes aleatorias
$array_text = explode('[/RANDOM_IMG]', $text);
// Crearemos una variable que contenga el código que analizará la función
$replace_text = $array_text[0];
$replace_text .= '[/RANDOM_IMG]';
// El primer elemento de la matriz hará referencia al código anterior a la etiqueta, así que eliminaremos
$array_text[0]  = str_replace('[RANDOM_IMG]', '', $array_text[0]);
// Ahora ya tenemos en una variable todas las imágenes y las URLs, así que vamos a separar cada una en un elemento de la matriz
$array = explode('[]', $array_text[0]);
// Por cada elemento de la matriz, añadimos un elemento a la matriz de contenido
foreach ($array as $key => $value)
{
$temp_explode = explode('||', $value);
$item[] = array(
'URL' => $temp_explode[0],
'IMG_URL' => $temp_explode[1]
);
}
// Movemos el puntero de la matriz al último elemento
end($item);
// Calculamos el último índice de la matriz
$last_index = key($item);
// Sacamos un número al azar
$key = rand(0, $last_index);
// Nueva matriz con los datos del elemento a mostrar
$showed_item = $item[$key];
// Reemplazamos el código [[SHOW_IMG]] por la imagen y el link
$replace_value = '<a href="'.$showed_item['URL'].'"><img src="'.$showed_item['IMG_URL'].'" /></a>';
$text = str_replace($replace_text, $replace_value, $text);
return $text;
}

Este código se debería añadir al archivo functions.php de vuestro theme, aunque si lo preferís, podéis descargar este archivo, que es el mismo código pero pensado para usarse como plugin de WordPress. Independientemente del método que uséis, el resultado debería ser idéntico.

Mostrar una imagen aleatoria

Beware: This post was published 6 years ago and its content may be outdated.
Una imagen y un enlace aleatorio

Una imagen y un enlace aleatorio

El año pasado expliqué como mostrar una par de imágenes al azar mediante PHP. Hoy explicaré como mostrar un enlace aleatorio con una imagen aleatoria mediante un array y PHP.

La matriz tendrá un índice numérico que contendrá una nueva matriz, esta vez con dos índices: URL e IMG_URL, que indicarán la URL del enlace y la URL de la imagen, respectivamente. Mediante la función rand obtendremos un número aleatorio entre el primer índice de la matriz (0) y el último (determinado por el puntero de la matriz). Después moveremos el puntero interno de la matriz al último elemento y a continuación crearemos una nueva variable que almacene la matriz que contiene el índice N (donde N es el número aleatorio obtenido previamente) de la primera matriz.

El código de la matriz de mi ejemplo será el siguiente (que debe colocarse el principio del archivo, así se puede mostrar la imagen en cualquier otro lugar del archivo):

<?php
// Primer elemento de la matriz
$array[] = array(
'URL' => 'http://sumolari.com',
'IMG_URL' => 'http://sumolari.com/demos/imagen-aleatoria/img/sumolari.png'
);
// Segundo elemento de la matriz
$array[] = array(
'URL' => 'http://sumolari.com/mostrar-una-imagen-aleatoria/',
'IMG_URL' => 'http://sumolari.com/demos/imagen-aleatoria/img/tutorial.png'
);
// Tercer elemento de la matriz
$array[] = array(
'URL' => 'http://google.com',
'IMG_URL' => 'http://sumolari.com/demos/imagen-aleatoria/img/google.png'
);
// Movemos el puntero al último element
end($array);
// Calculamos el último índice
$last_key = key($array);
// Calculamos un número al azar entre 0 y el último índice
$key = rand(0, $last_key);
// Almacenamos los datos de la imagen que vamos a mostrar
$item = $array[$key];
?>

Y a continuación sólo tendremos que mostrar el enlace, usando un código como el siguiente:

<a href="<?php echo $item['URL']; ?>"><img src="<?php echo $item['IMG_URL']; ?>"  /></a>

La ventaja de este script comparado con el anterior es que en éste podemos mostrar un enlace y podemos definir la URL a la imagen, lo cual lo hace más flexible. Además podemos añadir tantas imágenes como queramos a la matriz sin preocuparnos por adaptar el script, ya que el último índice se calcula de forma dinámica.

Podéis ver un ejemplo del funcionamiento en esta página. Si tenéis cualquier duda con el tutorial, no dudéis en preguntarla en los comentarios.

Aprende a utilizar la función post-image de WordPress 2.9

Beware: This post was published 6 years ago and its content may be outdated.

Si habéis seguido el desarrollo de WordPress 2.9, sabréis que esta versión añade la posibildad de establecer una miniatura para cada artículo, aunque no se había dejado claro cómo funcionaba ni cómo adaptar un theme para mostrar estas imágenes. Pues bien, anteayer publicaron en Anieto2k un artículo explicando cómo utilizar esta función y cómo preparar nuestros themes para esta nueva versión,

Ya se ha elegido al ganador del concurso de Smileys de Simple Machines Forum

Beware: This post was published 6 years ago and its content may be outdated.

A finales de agosto comenzó un concurso para elegir nuevos smileys para la próxima versión 2.0 de Simple Machines Forum. Después de un mes de votaciones, se ha elegido el ganador. Los finalistas del concurso han sido Spektral, SoLoGHoST e islam2hamy, de los que finalmente ha ganado…

¡SoLoGhOsT con sus Solosmileys Non Animated!

He tratado de localizar todos los paquetes de smileys participantes, sin embargo sólo he podido localizar el ganador y uno de los finalistas.

Podéis verlos a continuación.

Finalista (s-c smiley, de islam2hamy) Smileys ganadores (Solosmileys, de SoLoGhOsT)
Smileys finalistas Smileys ganadores

Y a vosotros, ¿os gustan los nuevos smileys que probablemente veremos por defecto de ahora en adeltante en SMF?

Creando múltiples carruseles con jQuery

Beware: This post was published 6 years ago and its content may be outdated.

jQuery - Carrusel

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:

<!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>
<body>
<div class="button-next">
<a href="javascript:stepcarousel.stepBy('carousel', 1)"><img src="arrow_right.png" /></a>
</div>
<div class="button-prev">
<a href="javascript:stepcarousel.stepBy('carousel', -1)"><img src="arrow_left.png" /></a>
</div>
<div id="carousel" class="stepcarousel">
<div class="belt">
<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostraci&oacute;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&oacute;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&iacute;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 class="panel">
<img src="img7.png" />
<div class="panel-text">
<p>Bla bla bla bla bla bla bla</p>
</div>
</div>
<div class="panel">
<img src="img8.png" />
<div class="panel-text">
<p>Ble ble ble ble ble ble ble</p>
</div>
</div>
</div>
</div>
</body>
</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í:

/* 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;
}

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í:

<div class="button-next">
<a href="javascript:stepcarousel.stepBy('carousel', 1)"><img src="arrow_right.png" /></a>
</div>
<div class="button-prev">
<a href="javascript:stepcarousel.stepBy('carousel', -1)"><img src="arrow_left.png" /></a>
</div>
<div id="carousel" class="stepcarousel carousel">
<div class="belt">
<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostraci&oacute;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&oacute;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&iacute;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 class="panel">
<img src="img7.png" />
<div class="panel-text">
<p>Bla bla bla bla bla bla bla</p>
</div>
</div>
<div class="panel">
<img src="img8.png" />
<div class="panel-text">
<p>Ble ble ble ble ble ble ble</p>
</div>
</div>
</div>
</div>

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í:

<div class="button-next">
<a href="javascript:stepcarousel.stepBy('carousel', 1)"><img src="arrow_right.png" /></a>
</div>
<div class="button-prev">
<a href="javascript:stepcarousel.stepBy('carousel', -1)"><img src="arrow_left.png" /></a>
</div>
<div id="carousel" class="stepcarousel carousel">
<div class="belt">
<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostraci&oacute;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&oacute;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&iacute;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 class="panel">
<img src="img7.png" />
<div class="panel-text">
<p>Bla bla bla bla bla bla bla</p>
</div>
</div>
<div class="panel">
<img src="img8.png" />
<div class="panel-text">
<p>Ble ble ble ble ble ble ble</p>
</div>
</div>
</div>
</div>
<div class="button-next">
<a href="javascript:stepcarousel.stepBy('carousel2', 1)"><img src="arrow_right.png" /></a>
</div>
<div class="button-prev">
<a href="javascript:stepcarousel.stepBy('carousel2', -1)"><img src="arrow_left.png" /></a>
</div>
<div id="carousel2" class="stepcarousel carousel">
<div class="belt">
<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostraci&oacute;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&oacute;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&iacute;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 class="panel">
<img src="img7.png" />
<div class="panel-text">
<p>Bla bla bla bla bla bla bla</p>
</div>
</div>
<div class="panel">
<img src="img8.png" />
<div class="panel-text">
<p>Ble ble ble ble ble ble ble</p>
</div>
</div>
</div>
</div>

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í:

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']
})

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

<!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>
<body>
<div class="button-next">
<a href="javascript:stepcarousel.stepBy('carousel', 1)"><img src="arrow_right.png" /></a>
</div>
<div class="button-prev">
<a href="javascript:stepcarousel.stepBy('carousel', -1)"><img src="arrow_left.png" /></a>
</div>
<div id="carousel" class="stepcarousel carousel">
<div class="belt">
<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostraci&oacute;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&oacute;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&iacute;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 class="panel">
<img src="img7.png" />
<div class="panel-text">
<p>Bla bla bla bla bla bla bla</p>
</div>
</div>
<div class="panel">
<img src="img8.png" />
<div class="panel-text">
<p>Ble ble ble ble ble ble ble</p>
</div>
</div>
</div>
</div>
<div class="button-next">
<a href="javascript:stepcarousel.stepBy('carousel2', 1)"><img src="arrow_right.png" /></a>
</div>
<div class="button-prev">
<a href="javascript:stepcarousel.stepBy('carousel2', -1)"><img src="arrow_left.png" /></a>
</div>
<div id="carousel2" class="stepcarousel carousel">
<div class="belt">
<div class="panel">
<img src="img1.png" />
<div class="panel-text">
<p>Este carousel es una demostraci&oacute;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&oacute;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&iacute;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 class="panel">
<img src="img7.png" />
<div class="panel-text">
<p>Bla bla bla bla bla bla bla</p>
</div>
</div>
<div class="panel">
<img src="img8.png" />
<div class="panel-text">
<p>Ble ble ble ble ble ble ble</p>
</div>
</div>
</div>
</div>
</body>
</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.

El nuevo aspecto unificado de GIMP

Beware: This post was published 6 years ago and its content may be outdated.
La nueva interfaz de GIMP

La nueva interfaz de GIMP

Vía Genbeta descubro el nuevo aspecto que va a tener GIMP, el programa de edición de imágenes libre más popular, que después de mucho tiempo de quejas contínuas de los usuarios a su interfaz basada en ventanas flotantes, pasa a tener una única ventana que unifica las anteriores, dotándole de una interfaz más fácil, clara y cómoda de usar.

Además de esto, la nueva interfaz dispondrá de unas pequeñas miniaturas de las imágenes que están siendo editadas por el programa, de forma que es más cómodo y fácil cambiar entre imágenes.

Sin duda, una gran mejora de la interfaz que muchos deseaban desde hacía tiempo y que hará más fácil y cómodo este editor de imágenes.

Farm-Fresh: 900 iconos gratuitos increíbles

Beware: This post was published 6 years ago and its content may be outdated.

Vía InfectedFX descubro Farm-Fresh, un conjunto de 900 iconos gratuitos creados por la empresa de hosting FatCow. Tienen un estilo muy similar a los de fam³ (silk icons), aunque tienen la ventaja de estar tanto en 16x16px como en 32x32px, por lo que es más adecuado para proyectos que requieran iconos más grandes.

Puedes descargarlos desde aquí.