A veces pasa que por alguna razón te empeñas en que tus publicaciones comiencen con una línea triunfal, poderosa o atractiva. Entonces recurres a las letras capitales.
Si quieres ver a qué me refiero, visita mi otro blog para que te des una idea:
Pero, ¿como logras esto en una página? La respuesta es muy sencilla si utilizamos a nuestro querido amigo jQuery. Separemos esto en unos simples pasos.
Paso 1: Creación del Strip
Aquí necesitarás un poco de paciencia y conocimientos de algún editor de imágenes. La idea general es crear un solo archivo que contenga todas las imágenes posibles. Imagina esto como una rejilla en donde en cada casilla colocarás una letra. No te preocupes por el orden, solo asegúrate de que la forma sea sencilla de manejar.
Por ejemplo, puedes imaginar que cada casilla en tu imagen es como sigue:
Para mi otro blog hice una que quedó bastante bien, aunque tiene algunos detalles que no me salieron bien y probablemente luego lo cambie, pero si te gusta o te sirve de ejemplo, puedes tomarla y utilizarla sin problemas. Utilicé una tipografía que se llama Ruritania cuya licencia es gratuita:
Paso 2: Analizando la estructura del sitio
Te voy a dar una idea general de como lograr esto, aunque la estructura de un sitio es diferente para cada quien, por lo que tendrás que hacer los ajustes necesarios. En mi caso, estoy usando WordPress con un tema de Elegant Themes modificado, así que es posible que lo que te muestre a continuación necesite de algunos ajustes para que funcione bien para ti.
En mi blog existe un elemento DIV que tiene asignado la clase “entry”, el cual representa una publicación, y este a su vez está formado por muchos elementos P que presentan el contenido. Para mí está sencillo, además de que planeo (como siempre) dejar este ejemplo lo más simple y claro posible. Lo que tengo que hacer es lo siguiente:
- Localizar el elemento en donde está eso que quiero modificar. En mi caso se trata del primer elemento P de un contenedor “entry”.
- Tomar la primer letra y verificar si puedo cambiarla por una capital.
- Borrar la letra original y sustituirla por la imagen correspondiente.
Para esto, supón que tenemos un documento con la siguiente estructura:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Letra Capital con jQuery</title> <link rel="stylesheet" type="text/css" href="styles.css"/> </head> <body> <div class="page"> <div class="content"> <h1>Letra capital con jQuery</h1> <div class="entry post clearfix"> <p>Ahora veo que la vida es ...</p> <p>Creo que uno debería sentirse satisfecho al caer la noche y ...</p> </div> </div> </div> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="script.js"></script> </body> </html>
Eso está sencillo, ¿no? Si te fijas en la línea 12 encontrarás el contenedor del que te hablaba hace un momento. En mi caso es un DIV, pero en el tuyo podría tratarse de otra cosa, un P incluso.
Paso 3: Creando el script en jQuery
Este es muy sencillo, veamos el contenido del archivo “script.js” que se menciona en el paso anterior:
jQuery(
function()
{
var p = jQuery(".entry > p:first");
if (p && p.length)
{
var alphabet = "abcdefghijklmnopqrstuvwxyz";
var c = p.text().substr(0,1).toLowerCase();
if (c && alphabet.indexOf(c,0) >= 0)
{
p.text(p.text().substr(1));
jQuery("<span class='alphabet alphabet-"+c+"'></span>").prependTo(p);
}
}
}
);
Observa que en la línea 4 estoy creando un filtro (o selector) en donde le indico a jQuery que deseo localizar un elemento que es el primer P contenido dentro de otro elemento que tiene asociado la clase “entry”.
En la línea 9 valido que el caracter que recuperé está dentro de la colección de letras que puedo reemplazar. Esto lo defines tu, en mi caso solo hice imágenes para las que están en el arreglo.
Finalmente, en la línea 11 elimino el caracter y en la línea 12 inserto un elemento SPAN que contiene la imagen que me interesa mostrar. Si observas bien, utilizamos una clase CSS con la letra que reemplazamos. Por ejemplo, si reemplazo la A, la clase que se inserta es “alphabet-a”. Simple.
Paso 4: Creando las clases CSS
Observa que ese SPAN que inserto está controlado por dos clases CSS: “alphabet” y “alphabet-*”. La primera controla como vamos a mostrar la imágen, mientras que la segunda muestra cual de todas las que están en nuestro archivo es la que deseamos mostrar.
Ahora veamos el contenido del archivo “style.css” que se menciona en el paso 1:
.alphabet {
display: inline-block;
background: url(images/alphabet.png) top left no-repeat;
width: 63px;
height: 55px;
float: left;
margin-top: -10px;
margin-right: 3px;
}
.alphabet-a { background-position: 0 0 }
.alphabet-b { background-position: -64px 0 }
.alphabet-c { background-position: -126px 0 }
.alphabet-d { background-position: -188px 0 }
.alphabet-e { background-position: -250px 0 }
.alphabet-f { background-position: -312px 0 }
.alphabet-g { background-position: -374px 0 }
.alphabet-h { background-position: -436px 0 }
.alphabet-i { background-position: -498px 0 }
.alphabet-j { background-position: -560px 0 }
.alphabet-k { background-position: -622px 0 }
.alphabet-l { background-position: -684px 0 }
.alphabet-m { background-position: -748px 0 }
.alphabet-n { background-position: -810px 0 }
.alphabet-o { background-position: -934px 0 }
.alphabet-p { background-position: -996px 0 }
.alphabet-q { background-position: -1060px 0 }
.alphabet-r { background-position: -1122px 0 }
.alphabet-s { background-position: -1184px 0 }
.alphabet-t { background-position: -1246px 0 }
.alphabet-u { background-position: -1308px 0 }
.alphabet-v { background-position: -1372px 0 }
.alphabet-w { background-position: -1434px 0 }
.alphabet-x { background-position: -1498px 0 }
.alphabet-y { background-position: -1558px 0 }
.alphabet-z { background-position: -1622px 0 }
Esto es todo lo que se necesita, espero que haya quedado claro y que puedas aplicarlo fácilmente a tu sitio.
