Es una tooltip que aparece sobre un fondo en la imagen sobre la que se pasa el ratón, con la información de la misma y, si se quiere, un link.
Un ejemplo para entender mejor cómo funciona: pasad el ratón sobre el dibujo de una flor que hay en la sidebar de Este Blog; o entrad en la demo de la web del hack webhike.
A ver cómo se hace:
.- Vamos a colocar un CSS:
.use_credits {
display:none;
}
.moofilm {
text-align: center;
border: 0px none;
color: white;
background-color: black;
}
.film_title {
color:Pink;
margin-top:20px;
font-size: 14px;
font-weight: bold;
}
.film_info {
font-size: 0.85em;
line-height: 1.3em;
padding:5px;
margin:0 10px;
}
.film_link {
font-weight: bold;
color:lime;
}
.film_link:hover {
color:lime;
font-size:1.3em;
}
.- Los SCRIPTS: que podéis bajar en la página que os he dado. OJO CON EL MOOTOOLS... porque aquí se está aplicando ya la nueva versión Beta.
<script src='http://.../mootools-beta-1.2b2.js' type='text/javascript'/>
<script src='http://.../moofilm.0.4.js' type='text/javascript'/>
<script type='text/javascript'>
// var jQuery = jQuery.noConflict();
window.addEvent('domready', function() {
var credits = new MooFilm();
});
</script>
¡OJO!: Esta línea // var jQuery = jQuery.noConflict(); no va en el script original: la he incluído yo en mi blog de pruebas para evitar futuros conflictos con query, de manera que podéis eliminarla.
.- HTML: he probado a insertar este hack en una entrada, y no ha habido forma humana de que funcionase allí... la verdad que ni idea porqué :( . En cualquier otro lugar del blog (footer, sidebar, pie de entradas, cabecera...) funciona sin problemas (tengo que investigar más a fondo los scripts).
<ul class='items'>
<li class='item'>
<a class='use_film' href='http://cafe-junio.blogspot.com/' target='_blank' title='Flor'><img src='http://.../FlorBoli.jpg'/>
<div class='use_credits'>Flor: <br/>Dibujo con boli</div>
</a>
</li> </ul>
Está muy bien, un detalles interesante es que veo que la clase va en el enlace y no en la imagen, así que puede que permita incorporar más de una clase si usas lightbox o zooms.
ResponderEliminarVeo que sigues your scripts en la comunidad de Mootools, ya habrás visto esta otra galería entonces:
http://poudro.adegios.net/example/
Aunque esto mismo podría hacerse con Thumbnoo la verdad, galería, galería propiamente no es.
Es guapa, pero... hay algo que no me "llena"... y no sabría decirte el qué (capricho, supongo)-
ResponderEliminarY sí :D . Gracias a tí me he metido más a menudo en el foro y la verdad es que me encanta. De hecho me llamó la atención esa galería que comentas (muy, muy bonita) y tendré que probarla en algún momento.
También he visto un "alert" distinto a los demás, fantástico; y una adaptación fabulosa del Remooz, que ya he probado y te comentaré cuando enga un ratín.
La verdad es que... ¡no damos a basto! :D