JMiur [E]

No sé muy bien si puede ser útil pero, este plugin de jQuery es divertido. Se llama Flip y lo que hace es animar un DIV cualquiera, mostrando diferentes textos que pueden tener algún tipo de formato elemental.

Si descargamos el ZIP veremos los archivos necesarios que son tres. Uno de ellos es jQuery mismo que si ya tenemos insertado no hace falta agregarlo, el segundo es la librería genérica de efecto jquery-ui y ambos, podemos cargarlos desde Google Ajax API, agregando esto antes de </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js' type='text/javascript'/>
Luego de eso, el plugin en si mismo que viene en dos versiones, una normal (jquery.flip.js) y otra minimizada (jquery.flip.min.js); podemos usar cualquiera de ellas y alojarlas en un servidor externo o ponerlas directamente en la plantilla:
<script type='text/javascript'>
//<![CDATA[
... y aquí copiamos y pegamos el contenido del archivo JS ...
//]]>
</script>
Hacemos que funcione cargando el plugin con algo similar a esto:
<script type='text/javascript'>
//<![CDATA[
$(function(){
$("#flipPad a").bind("click",function(){
var $this = $(this);
$("#flipbox").flip({
direction: $this.attr("rel"),
color: $this.attr("rev"),
content: $this.attr("title"),
onBefore: function(){$(".revert").show()}
})
return false;
});
});
//]]>
</script>
donde #flipbox será el ID del DIV a animar y donde pueden modificarse o agregarse opciones:

content es el texto a mostrar que en el ejemplo, colocaremos en el atributo title
direction indica el tipo de animación (tb, bt, lr, rl) y l ocolocaremos en el atributo rel
color es el color de fondo que colocaremos en el atributo rev
speed define la velocidad

Ahora, nos falta el HTML que ponemos donde nos guste:
<div id="flipbox"> ... el texto a mostrar ... </div>
Y a continuación, por ejemplo, unos botones para que cambie el contenido:
<div id="flipPad">
<a title=" el segundo texto " rev="#00BBCC" rel="rl" href="javascript:void(0);">left</a>
<a title=" el tercer texto " rev="#AABB00" rel="bt" href="javascript:void(0);">top</a>
<a title=" el cuarto texto " rev="#82BD2E" rel="tb" href="javascript:void(0);">bottom</a>
<a title=" el quinto texto " rev="#C8D97E" rel="lr" href="javascript:void(0);">right</a>
</div>


Eventualmente, el contenido puede tener alguna clase de formato y para agregarlo, debemos cambiar los caracteres < y > de la etiqueta por sus equivalentes &lt; y &gt;, por ejemplo:
title=" el tercer texto con &lt;strong&gt;negrita&lt;/strong&gt;"

22 comentarios:

Gem@  

Y si el div de flipPad lo incluimos en el div de flipbox para conseguir que los botones quedaran dentro seguiría funcionando? sería una buena idea para un banner distinto :)

Responder
Edwar  

Master sería más interasante aún con imágenes !!!

Responder
Luis Reyes  

JMiur:

perdon que me salga del tema, espero me puedas ayudar.
tengo problemas con las metadescripciones duplicadas que puedo hacer gracias JMiur

Responder
Unknown  

Muy bueno esta. Gracias por compartir!!!
Necesito una ayudita JMiur.
Como quito el espacio ente imágenes de mi blog??? Esto: http://i30.tinypic.com/w6owfm.png. El blog al que se lo quiero cambiar es: http://www.planeta-grandt.com.ar/.
Espero puedas ayudarme :)

Responder
Anónimo  

Me recordo a CU3ER (http://www.progressivered.com/cu3er/), aunque este es mas ligero

Responder
JMiur  

Gem@:
Pués la verdad, no sé. Ud ya sabe que jQuery y yo no nos llvmaos bien pero, es cosa de probar :D

DMJ:
Se puede intentar, en realidad, es posible aunque en Blogegr se complica un poco pero, dentro de title, habría que poner el código HTML que puede sr una imagen o cualquier cosa.

zona lerh:
En Blogger, no mucho ya que no puedes crear descripciones diferentes; dame un par de dias y muestro en un post una posible solución que no es maravillosa pero puede ayudar en algo.

Pozo:
Eso no va a ser fácil pero, puedes probar agregándoles un amrgen negativo en lugar de cero.
.post a img {
......
margin:-6px 0 0 0;
}

Responder
Unknown  

Si complicado pero no pude jajaja
Probé con:
a img {
margin: 0px 0 0 0;
padding: 0px 0px 0px 0px;
}

O

a img {
margin: 0px 0 0 0;
}

Y ya con el -1px o el 0px queda mal el Ir Arriba e Ir Abajo y los escudos se corren mucho, pero en las entradas no hay cambios :S

Responder
JMiur  

Con esas definiciones afectas a todas las imágenes excepto a las de las entradas. Usa .post a img {} o mejor aún:

.post-body a img { margin:-6px 0 0 0; }

para limitar el efecto a las entradas y nada más que a las entradas.

Responder
Unknown  

Gracias JMiur :D :D :D :D :D :D
Ahora si muchas gracias por su ayuda :D

Responder
JMiur  

Me alegro que funcionara. Es un poco raro pero si anda, no hay nada que decir :D

Responder
Luis Reyes  

graicas JMiur 10 espero cualquier ayudar sera bienvenida

Responder
fran  

hola a todos , ¿hay algun ejemplo de como tiene que ser el div del #flipbox?
gracias por vuestra ayuda

Responder
JMiur  

En este ejemplo, simplemente dice:

<div id="flipbox">Hello! I'm a flip-box! :)</div>

Responder
Karla Castañeda  

jaja, si es que es divertido JMiur!

Responder
Hector020  

Exelente efecto muy bueno el post.. Saludos

Responder
christian neyra  

Hola JMiur hubiera alguna forma de ponerle a esto algo así como un estilo galería ? con imágen de fondo y enlace ?

Responder
JMiur  

No sé. Se me ocurre que sería abstante complciado de hacer algo semejante ya que está pensado para que sólo sean textos.

Responder
Quintanaroo  

Master como puedo hacer mas chico el rectangulo . Gracias Master

Responder
JMiur  

El ancho esta definido en el DIV llamado flipbox; en eeste caso, dice:
flipbox {
width:500px;
}

Responder
Quintanaroo  

Gracias Master te agradezco Mucho por la ayuda, Mira encontre en la red una pagina de Jquery , pero ya llevo una semana y no me sale, sera que me puedas ayudar a jalar el codigo para Blogger, se ve sensillo pero no camina en blogger, como tu te llevas bien con Jquery espero me puedas apoyar. Bendiciones para ti y tu familia, aca esta el enlace :http://www.electricprism.com/aeron/slideshow/

Responder
JMiur  

Por lo que dice la página, ese script no es para jQuery sino para la librería Mootools; no es una librería que conozca ni use así que nada puedo hacer al respecto y es probable que no te funcione justamente por eso, porque te falta la librería.

Responder
Quintanaroo  

Master ya pude consegui libreria jquery de js y pude hacer el slider desplace la ora libreria mira te paso la pagina donde programo y realice el slider http://cosechade1971.blogspot.com/, si gustas te envio los cogidos para contribuir ala pagina.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR