Hace tiempo que deseaba probar los efectos de la librería Mootools es una librería que permite múltiples efectos con herramientas de lo más variado.
Con Mootools podemos conseguir crear una galería de imágenes como esta, pero eso es algo que últimamente no puedo permitirme ya que requiere tiempo y organizar las imágenes, bastantes imágenes.
Lo que si he tratado de llevar a buen término es image menu, se trata de un menú con imágenes muy atractivo y efecto persiana. Ver prueba.
Para la creación de este menú son necesarios los archivos mootools.js que podemos descargar en mootools.net y imageMenu.js en phatfusion.net luego los alojamos en un servidor para conseguir la url y añadirla de la siguiente forma.
Nos situamos justo antes de </head> y añadimos lo siguiente:

<script src='url-del-archivo-mootools.js' type='text/javascript'/>
<script src='url-del-archivo-imageMenu.js' type='text/javascript'/>

El texto en negrita lo reemplazamos por la URL de nuestros archivos mootools.js y imageMenu.js
Ahora vamos a los estilos, nos situamos antes de ]]></b:skin> para añadir lo siguiente:


/*Images menu*/
#kwick {
width:580px;
height:200px;
overflow:hidden;
position:relative;
padding:0;
margin:0pt auto;
}
#kwick ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
display:block;
width:1000px;
height:200px;
padding:0;
margin:0px;
}
# .kwicks {
display: block;
height: 200px;
margin: 0px;
}
#kwick li {
float: left;
}
li:after {
content: "";
}
#kwick .kwick {
display: block;
cursor: pointer;
overflow: hidden;
height: 200px;
width: 95px;
/*padding: 10px;*/
background: #fff;
/*border-right: 5px solid #202020;*/
border-right: 2px solid #000000;
}
#kwick .kwick span {
display: none;
}
#kwick .opt1 {
outline: 0; background: #9ce782 url(url-de-la-imagen) ;
}
#kwick .opt2 {
outline: 0; background: #92bdfa url(url-de-la-imagen);
}
#kwick .opt3 {
outline: 0; background: #faa892 url(url-de-la-imagen);
}
#kwick .opt4 {
outline: 0; background: #e78282 url(url-de-la-imagen);
}
#kwick .opt5 {
outline: 0; background: #000 url(url-de-la-imagen);
border-right: 0;
}

#kwick .opt6 {
outline: 0; background: #e78282 url(url-de-la-imagen);
border-right: 0;
}


"Donde url-de-la-imagen añadiremos la url de nuestras imágenes"
Guardamos los cambios y nos dirigimos a Plantilla/Añadir un elemento de página/HTML/Javascript para añadir el siguiente código:


<div id="kwick">
<ul class="kwicks">
<li><a class="kwick opt1" href="http://gemablog-.blogspot.com/"></a></li>
<li><a class="kwick opt2" href="http://gemablog-.blogspot.com/"></a></li>
<li><a class="kwick opt3" href="http://gemablog-.blogspot.com/"></a></li>
<li><a class="kwick opt4" href="http://gemablog-.blogspot.com/"></a></li>
<li><a class="kwick opt5" href="http://gemablog-.blogspot.com/"></a></li>
<li><a class="kwick opt6" href="http://gemablog-.blogspot.com/"></a></li>

</ul>
</div>
<script type="text/javascript">
var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:200});
</script>


Donde http://gemablog-.blogspot.com/ lo debéis sustituir por la dirección que deseáis enlazar ya sea una sección de vuestro blog o una página externa.
Podemos variar el color background que aparece antes de la url de nuestras imágenes es el color de fondo que se visiona al cargar la página.
outline: 0; background: #000 url(url-de-la-imagen);
border-right: 0;
En #kwick .kwick {
border-right: 2px solid #000000;
podemos variar el color y grosor de la línea de separación entre imágenes.

"Antes de añadir este menú debo aclarar que si tenemos aplicados en nuestra plantilla la librería Prototype nos puede crear problemas, al igual que Mootols son lo que se denomina por framework (conjunto de rutinas que permiten crear otros scripts) debemos escoger una u otra librería pero no añadir las dos al mismo tiempo"

(J.Miur ha sido mi fuente de información, en su entrada VideoBox pueden ver más detalles.)

Anónimo

Holaaa, hace poco descubri tu blog y la verdad debo felicitarte! cada vez que entro, encunetro algo nuevo!.

Sabes, que quisiera armar un plano de mi colegio, para ponerlo en el blog...pero no se como hacerlo, osea no se que programa bajarme, si sabes de alguno, te agradeceria nuevamente.


Besos!

Responder
Meigo,aprendiz de Druida

PUes... ya me pongo manos a la obra.
Besos Gema.

Responder
Gem@

Siento no poder ayudarte anónimo no tengo idea.
¿Quizás con Google Maps?

!!Hola Meigo¡¡
¿De verdad lo vas a intentar? si es así hazlo en un blog para pruebas no es que no confíe en tu buen hacer es lo que recomiendo siempre ;)

Responder
Abril Lech

Holaaaaaa!!!!
Felicitaciones!!! ¡Qué belleza lo que hiciste en la casa de Meigo y Druida! Qué suerte conocerte, ya te enlazo y vengo con tiempo a leer todos los consejos que veo que vas posteando. Tienes un gusto especial, independientemente de los conocimientos informáticos, muy buen trabajo Gem!!!!

Responder
Gem@

Bienvenida y muchas gracias Abril regresa cuando gustes ;)

Responder
Anónimo

que bueno, como siempre..
todo lo que sirva para ayudar y mejorar nuestros blog hay que compartirlo y enseñarlo, por eso aquí les dejo el link de un concurso para ganar un dominio y hosting profesional gratis

http://www.bloggea2.com/2008/02/26/gana-un-dominio-y-hosting-profesional-gratis-con-bloggea2/

yo ya me apunte y a ver si tengo suerte,..

suerte para todos tambien
chau

Responder
Gem@

Gracias por compartirlo anónimo ;)

Responder
Email Urbano

esta muy buena esta galería, siempre con cosas interesantes...saludos

Responder
Gem@

Gracias Leny ;)

Responder
PUNKITO

HOLA!!!
A MI NO ME SALIO Y NO SE POR QUE Y:
Guardamos los cambios y nos dirigimos a Plantilla/Añadir un elemento de página/HTML/Javascript para añadir el siguiente código:

ESTO YO NO LO TENGO Y NO SI SI ESE ES MI ERROR YO USO html kit Y NO EN DONDE TENGO QUE ENTRARA PARA ESO SI ME AYUDARAS PASO A PASO TE LO AGRADECERIA MUCHO!!!! ley_63@hotmail.com Contactame

Responder
Un poco de mi

http://cartografiasdesplegadas.blogspot.com/
hola gema es aqui donde vi el header con imagenes hacia los post

Responder
Gem@

PUNKITO esa parte es la que corresponde al menú, la puedes añadir justo donde deseas que aparezca en tu blog.

Un poco de mí... se trata de un textarea.
La forma de hacerlo es la siguiente:
En añadir un elemento de página html agregas lo siguiente:
<marquee direction="right" style="background-color: #002A76; text-align: center; width:754px;height:40px;border:1px solid #000000;padding:3px" onmouseover="this.scrollAmount='0'" scrollamount="2" onmouseout="this.scrollAmount='2'">

<font face="Comic Sans" color="white" weight="bold" size="2">>> Búsqueda por Imágenes <<</font>

<a href="url-de-post "><img style="width: 40px; height: 40px" src="url-de-la-pagina " title="titulo "/></a>

<a href="url-de-post "><img style="width: 40px; height: 40px" src="url-de-la-pagina " title="titulo "/></a>

<font face="Comic Sans" color="white" weight="bold" size="2"</font>
</marquee>
En la url del post añades la url que aparece en la barra del navegador cuando clicamos el el título del post.
En ur de la imagen la url de tu imagen ;)

Responder
Un poco de mi

hola gem@. te dije que no entiendo nada de codigos, el tema es que arme todo pero no se donde pegarlo, ahora lo pero en la plantilla? de ser asi donde? y si no en donde?
src="url-de-la-pagina " title="titulo
donde dice url de la pagina? se pega el url de la imagen?
perdon y gracias

Responder
Un poco de mi

Otra vez, me habia olvidado de decirte el color de fondo me gustaria que fuese negro, como hago?
Un mar de dudas, diria un universo.

Responder
Gem@

Donde dice url de la página hay que pegar la dirección del navegador que aparece en la página que vamos a enlazar.
La url de la imagen es para pegar las imágenes, es decir la dirección que obtenemos al alojarlas en un servidor .
En la entrada aclara donde añadir cada código en la plantilla.
Los scripts justo antes de </head>

El siguiente código para las imágenes justo antes de ]]></b:skin>


Y en Plantilla/Añadir un elemento de página/HTML/Javascript el último código para los enlaces de las páginas.

Para variar el color de fondo dice: variamos el color de fondo en background: #000 por el color que deseamos.
;)

Responder
jabier

hola, muy bueno el blog, felicidades, ocurre estoy viendo herramientas nuevas para reformar miblog, y ese efecto en el menu, vendria genial, me gustaria saber, si conoces de algun hosting gratuito para subir los archivos de js, por que el hosting de gogle no lo permite no?
muchas gracias

Responder
Gem@

Hola Jabier, el hosting de Google es Google Pages y a final de año ya no estará en funcionamiento. Por ese motivo la búsqueda de un alojamiento gratuito y que permitiera archivos js. me llevó a decidirme por Sky Drive.
Si quieres saber más sobre este tema puedes ver algo aquí y aquí
Y este último enlace es un tutorial sobre como utilizar Sky Drive.
Cualquier duda me dices algo... :)

Responder
jabier

¿me estas diciendo que blogger deja de funcionar?
¿o es un hosting aparte el de blogger al de google?

Responder
jabier

aaa sos una genia, mil gracias por la info, disculpa lo brusco del comentario anterior, lo que pasa es que termine, hace un ratito de hacer la webblog a un amigo, en blogger.
saludos y 1000000 de gracias :)

Responder
Gem@

Tranquilo Blogger sigue como hasta ahora, con algunos días mejores que otros pero ha mejorado bastante este último año :)

Responder
Lucas

te agradesco de nuevo la buena onda, he probado el menu, y no me funciona, este es el linck del blog de prueva

prueba

te comento que use Sky Drive para el hosting de los archivos llava, ¿sera por eso que no anda? proque las imagenes se ven, pero estan duras, no se mueven.

por cierto tambien podria ser el tamaño de las imagenes yo las puse de 1000 x 200 anch-alt.

saludos jabier

Responder
Gem@

Hola Jabier veo varias contrariedades en esa prueba por una parte los archivos que alojaste en Sky Drive no enlazan con el archivo sino con la página. Para obtener la url del archivo debes alojarlo, luego clicas sobre él y donde dice "descargar" pones el puntero del ratón, botón derecho y propiedades.
Te proporciona una url muy larga sería algo así:
http://7e3ywg.blu.livefilestore.com/y1pz-uavKabZP6u3S-/unitpngfix.js?download
Debes copiarla omitiendo lo que está en negrita es decir, para cualquier cosa que necesites una url de Sky Drive "?download" no lo añadimos. La url termina siempre donde se lee la clase de archivo en este caso .js

A parte de eso también hay que considerar el tamaño de las imágenes que vas a añadir al menú no se puede añadir 5 imágenes de 1000px × 200px en un menú de 580px de ancho lo ideal sería una imagen no mayor a 300 ancho x 200 alto.
También he observado que intentas añadir la imagen a una especie de barra menú para añadirle un título y bastaría con añadirlo sobre la misma imagen.

Por último recomendarte que cuando hagas la prueba intentes añadirlo en el espacio que disponemos para el header donde va el logo.
La librería Mootools es muy bonita sin embargo incompatible con Prototype hay que tenerlo en cuenta por si en un futuro vamos a usarla.
Hay otro menú muy parecido creado con jQuery puedes ver el efecto aquí

Responder
Diego Fernandez

aaaaa 1000 gracias por el dato, esa es solo de prueva es mi cajon del desastre jejeeje, lejos estoy de hacer un blog tan despatarrado jaja, 1000 gracias por la ayuda, ya lo estoy probando :)

Responder
Gem@

Aunque sean pruebas si no utilizas las medidas adecuadas difícilmente obtendrás buen resultado Diego :)

Responder
Diego Fernandez
Este comentario ha sido eliminado por el autor.
Responder
Lucas

Algo que descubri sobre Sky Dribe,es que debes estar logeado en tu espacio de MS para que los archivos esten en linea, sino, no funcionan los link a los documentos almacenados alli, ¿o no?

Responder
Gem@

No hace falta que estés logueado Lucas, es suficiente con poner los archivos en una carpeta pública ;)

Responder
Anónimo

aaaaa mil gracias, por eso no me andaba nada jojoj :)
Lucas

Responder
Gem@

Un problemilla menos ;)

Responder
Anónimo

prometo que es la ultama vez que te molesto, ocurre que estoy poniendo objetos java/html con imagenes de sustitucion para la botonera en la barra lateral de mi blog Texto
cuando abro el blog con mozilla, la botonera se ve correcta, pero cuando la abro con el internet explorer,se ve espaciada, cada boton, ¿sabes si tiene arreglo?

Responder
Gem@

Hola Lucas, ante todo decirte que no me molestas en absoluto siento si te da esa sensación :O
Y sobre la botonera yo la veo igual con Firefox que con Exploer ¿no será que deberías actualizar el Explorer? ¿qué versión tienes?

Responder
Anónimo

noo para nada, vos tenes la mejor honda, soy yo que en realidad no me gusta monopolizar las prejuntas, y sabes que puede ser lo de la actualizacion del navegador, mi explorer esta medio viejo es el 5,voy actualizarlo aver que ocurre, mil gracias :)

Lucas

Responder
Gem@

Te recomiendo la última versión, creo es el 8, yo utilizo normalmente Firefox aunque me gusta ver como quedan las cosas en Exploer y con esta última versión Explorer ha ganado mucho en lo que a transparencias de imágenes se refiere :)

Responder
Anónimo

Hola, quiero enseñaros un blog que he montado con el efecto persiana, a ver qué os parece:

www.caelusbooks.com

Responder
Gem@

Este efecto de la librería Mootools me encanta, te quedó estupendo :)

Responder
Solidaridad

Hola Gema, casi siempre utilizó tus conocimientos sin ningún inconveniente, he querido utilizar el mototols en mi plantilla de prueba, y no andan, las imágenes. me puedes ayudar observando mi plantilla de prueba, gracias Gema

Responder
Gem@

Solidaridad no veo los scripts en su sitio :O

Responder
ana

Hola Gema que rabia jejeje no van los links para descargarte mootools.js y imageMenu.js, me los puedes pasar porfavor para poder hacer este menu. Muchas gracias.

mjcc122@hotmail.com

Responder
Gem@

yz Hola Ana llevas toda la razón, con el último cambio de alojamiento la url de los scripts no era válida.
He añadido en su lugar el enlace a la página donde se encuentran las descargar, de ese modo evitamos que ocurra de nuevo ;)

Responder
ana
Este comentario ha sido eliminado por el autor.
Responder
ana

Da igual que sea mootools 1.2.2? lo digo porque en phatfusion dice que es necesario mootools v1.11 y en moontools solo deja descargar el 1.2.2. Gracias por todo.

(he borrado el otro comentario para editarlo)

Responder
ana

estas?

Responder
Gem@

yz Hola Ana, estoy pero no continuamente claro :)
Mira yo lo tengo añadido en ese ejemplo como archivo de texto, es decir que puedes probar a descargarlo desde aquí si no te resulta la descarga mándame un mail y te lo envío al correo.
Image
mootools
Los archivos igualmente lo subes a tu alojamiento no dejes de hacerlo porque yo luego elimino estos archivos y dejaría de funcionarte el menú.

Responder
ana

Gracias por responder, he logrado poner todo pero no hace el efecto, pensé que podían ser las imagenes pero puse las originales del menú y tampoco, si das click en la imagen te lleva al sitio que pusiste pero no hace el efecto :(
Sabrias decirme porqué?

Responder
ana

Los link que me has puesto en tu comentario llevan a solo texto, me podrias pasar por correo los archivos js, por favor.

mjcc122@hotmail.com

Responder
Gem@

yz Hola Ana no tengo los archivos js la descarga son los que yo tengo añadidos pero no influye negativamente porque sea archivos de texto, puedes ser algún error de la url del archivo pero no he podido ver tu blog porque el perfil no está disponible y no puedo ser más precisa :(

Responder
ana

esta es la url
http://otrapureba.blogspot.com/

Gracias por ayudarme, y perdon por ser tan pesada pero esque este menu me gusta mucho.

Responder
Gem@

yz No te preocupes, es normal que preguntes ;)
Ocurre lo siguiente, donde va la url de los archivos lo que añadiste es la url del sitio donde se encuentran y debe ser la url directa.
Botón derecho sobre el archivo, propiedades de enlace.
Nos ofrece una url así:
http://lowvaw.bay.livefilestore.com/y1pNh-uixtOLMWGuUsleNGe10k2EuuxA_9G2gprZCNcX8l7oZ9gQEhMJfTeDGIXzgpMqo9XhDCe0HhhbmOKZ8IHJw/mootools.js?downloadNo hay que añadir lo que está en negrita porque entonces enlazamos la página.
Esa era para mootools.js para el script de imageMenu sería:
http://lowvaw.bay.livefilestore.com/y1paJIYKV_q5CrmhPKJYpUTt24AGddKjF-cYUSvRUVQZJWlJn-3HHc__b_a2QsOg4WVwn7oTd_ZQsyJy4xiqIP2sg/imageMenu.js?download(También suprimiendo la negrita)

Hay una cosa más que quería decirte los archivos los tienes en SkyDrive hace unos dos meses los archivos alojados en Sky Drive cambiaban continuamente quiero decir que cambiaba la url y los archivos dejaban de funcionar no sé si eso se ha normalizado pero si vieras que algo no funciona comprueba si es eso.
Para saber si una url está online copiamos la url del archivo y la pegamos en la barra del navegador, si el archivo se muestra o proporciona la descarga es porque está bien pero si no... es que algo no está bien ;)

Por otra parte no sé si habrás leído la entrada completa, la librería Mootools es una maravilla pero si se añade junto a otras librerías crea conflictos sobre todo con Prototype , ten eso en cuenta si piensas añadir más scripts, procura que sean de Mootools también ;)

Responder
ana

ueeeeeeeeee me funciona, vaya error de principiante jejejeje. Muchisimas gracias, como te lo puedo recompensar? si tu vieras publi te daria unos cuantos clicks :D
Donde me acosejarias alojar los scripts?

Responder
ana

Gema perdona que abuse de tu generosidad pero poniendo esto me he dado cuenta de una cosa: en la zona de los post veo que el lado izquierdo tiene un pequeño margen pero el lado derecho no, me gustaria añadir el mismo margen a la derecha, como lo hago? porque si te fijas en el nuevo menu la imgen de la derecha es cortada por la linea de puntos y quiero que haya un margen como a la izquierda. Muchas Gracias :)

Responder
Gem@

yz La alegría ha durado poco Ana, los scripts ya no funcionan, te paso el enlace donde se habla de soluciones para el problema de alojamiento.
http://gemablog-.blogspot.com/2009/03/problemas-soluciones-y-alternaticas-con.html

Hay otro sitio que Ro informaba hace poco donde alojar scripts (lo explica en portugués pero puedes usar el traductor que tiene en su página)
http://www.bloggersphera.com/2009/04/hospedar-javascript-e-php-ripway.html

El problema de los márgenes en los post puede solucionarse, para probar añade una entrada con más texto he visto una línea y ahí no se ve el espacio de los márgenes. De todas formas si has visto que se ha modificado esa parte a partir de añadir el menú creo que la solución sería otra y es añadir el menú en la sección del crosscol porque lo añadiste en el main y ese puede ser el problema.
Mira aquí donde está y cómo añadirlo en esa zona.
http://gemablog-.blogspot.com/2009/02/personalizar-el-crosscol.html

Responder
ana

hola muchas gracias, ya estoy viendo donde alojar los scripts.

Lo del margen ya estaba, no es por el menú. Tenía antes más entradas de prueba y tambien observe que no tenia margen a la derecha pero no le daba importancia pero ahora con el menu si me gustaria que tuviese margen. Gracias por ayudarme

Responder
Denshou

Hola GEMA!
¿Qué servidor nos recomiendas para alojar los archivos ".js"?

¿Como puedo ssaber si tengo 1 o 2 librerías?

Gracias!

Responder
Gem@

yz Ana busca donde dice:
.post {
margin-top:0px;
margin-right:0px;
margin-bottom:30px;
margin-left:0px;
}
y sustitúyelo por:

.post {
padding: 25px 25px 25px 20px;
margin:.5em 0 1.5em;
padding-bottom:1.5em;
word-wrap: break-word;
overflow: hidden;
}
(Mira en vista previa antes de guardar los cambios)


yz Denshou mira esta entrada ahí hay varias opciones de alojamiento.
Normalmente cuando nos descargamos un script siempre se indica a la librería que pertenece al menos yo intento hacerlo cuando creo una entrada sobre un script ;)

Responder
Diequel

Muy buena explicación :D . Ahora, y perdona mi ignorancia, como hago para que los posts tengan comentarios fijos sí como este y que tengan emoticons ?. Desde ya muy agradecido.

Responder
Gem@

yz Saludos Diequel estuve mirando la forma en que tienes los comentarios y es la misma que ves aquí, la única diferencia es la personalización.
Hay muchas formas de personalizar los comentarios, demasiadas para explicarlas aquí.
Te recomiendo ver la etiqueta de "comentarios" que encontrarás en la nube de mi sidebar
Añadir emoticones es otra cosa... los pasos a seguir puedes verlos en el blog de Vagabundia.
http://vagabundia.blogspot.com/2007/08/blogger-y-los-emoticones.html
Y aquí tienes otra forma para añadirlos en los comentarios y en los post :
http://gemablog-.blogspot.com/2007/06/emoticones-segn-daleclikc.html
:D

Responder
Diequel

Muchas gracias Gem@ . La verdad que me parecía distinto ya que aquí están fijos y en mi blog me figura los comentarios hechos y tengo que hacer click allí para verlos. Acá se ven directamente.
Cabe mencionar que mi blog está en completo desarrollo y es un desastre ahora. Es que recién me inicio y estoy modificando la plantilla :p . Gracias por tu ayuda, te recomendaré en alguna sección de mi blog. No te desvirtuo mas el tema. Saludos ;)

Responder
Gem@

yz Se muestran igual Diequel lo que ocurre que si visualizamos los comentarios cuando accedemos por una etiqueta, el archivo o desde el mismo correo nos muestra la página completa, es decir sin tener que hacer click en el enlace de comentarios :)

Responder
nm

Hola gema, exelente este menu persiana, me encanto. Segui todos los pasos como explicas y logre insertar el menu pero no logro q tenga el efecto. Coloque las archivos en una carpeta publica en boxstr.com. Me lei todos los comments pero no logre solucionarlo al problemita. El blog es http://nmsoftwares.blogspot.com/. Estaria infinitamente agradecido si me puedes dar una ayudita. Saludos!:D

Responder
Gem@

yz nm son los archivos, hay uno que no está online, prueba añadiendo estos y me dices que tal funciona.

<script src='http://img24.xooimage.com/files/0/d/f/mootools-comp-f2ce66.js ' type='text/javascript'></script>
<script src='http://img1.xooimage.com/files/3/c/a/imagemenu-c3676f.js' type='text/javascript'></script>

Responder
nm

Gema sos extremadamente grosa! siempre tenes soluciones! te admiro mucho! Andubo de lujo;). Puedo dejar esos archivos o los vas a borrar?

Responder
Gem@

yz Me alegra que funcionara :D
Puedes dejarlos, los subí a este nuevo sitio (nuevo para mi)
http://gemablog-.blogspot.com/2009/06/xoo-image-donde-estabas-antes.html

Responder
Tinkertripper

Mmmh... bien, aquí la bruta mayor del reino, que no se ha enterado ya desde el principio. Quiero poner en mi tinkertrips este menú, pero he entrado en mootools y no sé lo que quiere decir "Para la creación de este menú son necesarios los archivos mootools.js que podemos descargar en mootools.net y imageMenu.js en phatfusion.net luego los alojamos en un servidor para conseguir la url y añadirla de la siguiente forma." Si es que yo siempre lo he dicho, nací para el arte, todo lo demás es un mundo lejanoooo...

Responder
Gem@

:: Tinkertripper mándame un mail y te explico lo que debes añadir :)

Responder
Tinkertripper

Te lo mandaré, lo tengo en mente, pero ahora estoy un poco liadilla... gracias!

Responder
Tania

Brutal!!! Ha quedado genial en mi blog!
Cuando me sienta con fuerzas, y sobre todo, con tiempo, intentaré hacer de esta manera una galería para mi otro blog de imágenes.
Gracias por compartirlo!! SALUDOS GEM@!!

Responder
Gem@

:: Genial? ha quedado fantástico!!

Responder
Diego Ledrado

Hola, veo que hace bastante que nadie comenta ni dice nada, así que me animo yo. Lo primero darte la enorabuena por el trabajo hecho. Esta realmente bien explicado y he conseguido casi lo que quería.

Mi dudas son las siguientes. ¿Se puede reducir el numero de opcciones del menu? Actualmente tengo 6, pero me gustaria reducirlo a 4.

Otra duda es sobre el ancho total de las imagenes. Ocupan un poco menos que la cabecera que hice, por lo que me gustaria que estuviesen más o menos cuadradas en ese espacio. Donde puedo cambiar esas dimensiones?

Mucchas gracias de antemano! Y de nuevo mi enorabuena, esta genial!

Responder
Diego Ledrado

Buenas de nuevo!! Dos comentarios en un dia, sorry por las molestias XD. He conseguido hacer todo lo que pregunte en el primer comentario.

Pero ahora tengo otra duda que me veo incapaz de resolver. He dejado un menu de 5 viñetas y lo que quiero es que cuando se abran se pueda ver mas imagen. Me explico, ahora cuando pasas el raton encima de una opcion se una la imagen un poco mas grande (aprox 240px de ancho) y me gustaria que llegase a los 400 o asi.

Muchas gracias de antemano, de nuevo. Ciao!

Responder
Gem@

:: No sabría decirte Diego Ledrado porque el tamaño de la imagen juega un papel importante con las medidas del menú, habría que modificar todo empezando por el ancho del menú. Demasiado laborioso :s

Responder
Diego Ledrado

Finalmente lo conseguí, aunque no se ni explicar como, ahora toca diseñar las fotos para el menu.

www.dledrado.blogspot.com

Responder
Gem@

:: Pasaste la primera fase :)

Responder
Frank Quesada

@Gem@
Hola Gema!, ire directo al grano. y si deseeo que el menu sea vertical, haciendo que las imagenes que aparezcan dejando el texto visible se deslicen o separen hacia arriba o hacia bajo?

yo he conseguido poner las imagenes unas encima de otras y se deslizan hacia la derecha pero no es lo que quiero.

aqui os dejo uno que tambien me gusto, pero que todavia no he tocado, probad a ver que os parece.

http://www.mastercafe.com/?jquery/jQuery_Menu_SlideBox_con_Imagenes/1537/po/es

Responder
Frank Quesada

Hola Gema!! mi pregunta es... y si queremos este menu vertical. que las fotos y el texto se deslicen hacia arriba o abajo?

gracias
un saludo

Responder
Gem@

:: No sabría responderte a eso Frank Quesada, es un menú diseñado para mostrarse en horizontal :S

Responder
EpideMia

hola gema!!
te hago una pregunta. sabes si puedo lograr este efecto con jqueri??

es que yo estoy usando justo este ejemplo de mootools que mostraste, pero resulta que mootools no es compatible con jqueri.

no quiero perder este gadget porque me gusta mucho, pero me gustaria poder usar la libreria de jqueri que tambien tiene cosas muy buenas.
por eso necesito saber si con esta libreria puedo conseguir el mismo efecto.

tenes idea si se puede??

gracias como siempre.

Responder
Gem@

:: EpideMia yo diría que si pero no sé indicarte dónde localizarlo :S

Responder
Rodrigo

holaa esta pagina no anda para descargar este archivos phatfusion.net la podrias revisar

Responder
Rodrigo
Este comentario ha sido eliminado por el autor.
Responder
Rodrigo

otra cosa me podrias explicar como es eso de que tengo que subir los archivoss a skydrive??

Ya subi los archivos (los vaje de otra pagina) pero no se como hacer para ke me den el link ke dices, por que el que a mi me da no es para nada parecido al que vos pones de ejemplo en entradas anteriores

Responder
Rodrigo
Este comentario ha sido eliminado por el autor.
Responder
Gem@

:: Hola Rodrigo, esta entrada es de hace tres años y desde entonces las cosas cambiaron, el servidor de skydrive ya no acepta subir scripts ni proporciona la url directa qu enos hace falta, en su lugar la mayoría está usando Google Sites.
Quitando ese detalle, en la entrada está todo explicado.
Por cierto ¿Por qué preguntas si hay alguien Rodrigo?

Responder
Rodrigo

disculpa pregunte si habia algien por que nadie me contestaba solo fue por eso no quice molestarte, yy otra cosa es scrip ke tienes es compatible con los que tengo?? me gustaria saber eso este es mi blog seducevip.blogspot.com

y perdon por las molestiass

Responder
Rodrigo

yy una cosa mas http://www.phatfusion.net este link no anda podrias volver a subirlo??

Responder
Gem@

:: No hay motivo para pedir disculpas Rodrigo, hiciste una pregunta y yo también :)
Este menú requiere la librería de mootools no es compatible con otras librerías por ejemplo la jQuery que tanto usamos últimamente. Si ya estás usando jQuery te recomiendo buscar un menú para esa misma librería, hay menús con ese efecto persiana.
Ese sitio que está roto es un enlace al sitio de la descarga http://www.phatfusion.net/

Responder
Rodrigo

jejejej disculpa mi ignorancia pero como se si alguno de los scrip ke tengo es de query?? solo los sake del blog de oloman eso fue todo pero no se si son de query

Responder
Gem@

:: Se puede saber si se utiliza jQuery mirando la plantilla y buscando en los scripts (dirá jQuery en alguna parte) o repasando aquellas entradas de Oloman que seguiste los pasos y averiguarlo. O si me dices de qué blog estamos hablando lo miro yo.

Responder
Rodrigo

www.seducevip.blogspot.com este es mi blog y me avisas si puedo meter el escrip ke tienes o no jejeje, aclaro ke me encanta tu scrip pero hace mucho tiempo ke lo buscaba y recien como hace 2 semanas me pasaron tu blog no lo conocia, pero sabes mucho al igual que vagabundia parece jejeje

saludoss

Responder
Rodrigo

otra cosa entre aqui http://www.phatfusion.net/ yy exactamente en que parte de la pagina tengo que descargar??

Responder
Rodrigo

gema creo ke te olvidaste de mi =(

Responder
Gem@

:: Tienes rázon Rodrigo me olvidé de este comentario :S
Los archivos que necesitas son los siguientes:
%% mootools.js

%%imageMenu.js

Responder
Gem@

:: El enlace está roto prueba con esta url para descargarlo:

http://img22.xooimage.com/files/1/7/f/mootools-dd318d.js

http://img24.xooimage.com/files/a/0/7/imagemenu-fdbefe.js

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top