JMiur [E]

liteAccordion es un pequeño plugin para JQuery que nos permite agregar acordeones donde se mostrarán imágenes, animándolas con distintos efecto que funcionarán en cualquier navegador, incluyendo Internet Explorer 8.

El demo completo podemos descargarlo desde github pero para agregarlo a un sitio, sólo necesitamos dos archivos: liteaccordion.jquery.js y liteaccordion.css. Entonces, primero agregamos jQuery antes de </head> si es que no la tenemos:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
Luego, el script con el plugin:
<script src="URL_liteaccordion.jquery.js"></script>
o lo agregamos directamente en al plantilla, copiando y pegando el contenido de ese archivo:
<script type='text/javascript'>
//<![CDATA[
  ....... aquí pegamos el contenido del archivo liteaccordion.jquery.js .......

//]]>
</script>
Por último, el estilo, del mismo modo:
<style>
  ....... aquí pegamos el contenido del archivo liteaccordion.css .......
</style>
Eso es todo; ahora, hay que crear el HTML allí donde quisiéramos utilizarlo:
<div id="miejemplo" class="accordion">
  <ol>

    <!-- cada una de las pestaña -->
    <li>
      <h2><span>Pestaña UNO</span></h2>
        <div>
          <!-- el demo original usa etiquetas de HTML5 pero, el contenido puede ser cualquier otra -->
          <span class="figure">
            <img src="URL_imagen1" />
            <span class="figcaption">un texto optativo</span>
         </span>
      </div>
    </li>

  </ol>
</div>


Podemos activarlo colocando el llamado a la función debajo de eso o bien, con el resto de los scripts siempre y cuando nos aseguremos que se ejecute cuando la pagina se haya cargado, estableciendo en ese llamdo, las opciones :
<script>
$(document).ready(function(){ 
  $('#miejemplo').liteAccordion({
    onActivate : function() { this.find('span').fadeOut(); },
    slideCallback : function() { this.find('span').fadeIn(); },
    autoPlay : true, pauseOnHover : true, theme : 'dark', rounded : true, enumerateSlides : true     
  }).find('span:first').show();
});
</script>
Algunas de las opciones se agregan ahí y otras en el plugin mismo donde, por ejemplo, se define el ancho y alto:

containerWidth : 600 // ancho total
containerHeight : 350 // alto total
headerWidth : 48 // ancho delas pestañas cerradas
firstSlide : 1 // el número de la primer pestaña activa
slideSpeed : 800 y cycleSpeed : 6000 // velocidad de la animación
rounded : false // si no se quieren bordes redondeados
enumerateSlides : false // muestra u oculta un número en cada pestaña
theme : 'basic' // el tema CSS que puede ser 'basic', 'light', 'dark', o 'stitch'

Esto ultimo, también puede ser modificado ... con paciencia y si se usan textos, habría que agregarle propiedades extras como:
span.figure {
  display: block;
  height: 100%;
  margin: 0;
  width: 100%;
}
span.figcaption {
  background: #000;
  background: rgba(0,0,0,0.7);
  border-radius: 4px;
  bottom: 20px; 
  color: #FFF;
  padding: 10px 15px;
  position: absolute;
  right: 30px; 
  z-index: 3;
}

33 comentarios:

Rodrigo  

Claro amigoo esto es lo que te preguntaba jejeje para hacerlo = a la pagina de fanatico ejjeje sos un grandeee

Responder
Graciela  

Las 'cosas' con jQuery quedan rebonitas :D

Responder
Beben Koben  

hihihihi same with me master
Add Lite Accordion jQuery to Blogger
this is awesome too master
Add Slider jQuery Plugins on The Blog
hihihihi :D
and this is newest Slidorion

Responder
Monica  

sabes si se puede pasar la plantilla de tumblr a plantilla de blogger?
mi intención seria pasar està plantilla, però no tengo ni idea de como hacerlo la verdad, y tampoco si es posible... :((
muchísisisisisimas gracias de antemano de verdad!!
un beso, y espero que no sea de mucha molestia..:S

Responder
Rodrigo  

Ahora lo que no entiendo es como poner ese escrip, osea que cosa tengo ke vajar exactamente por cuando hago clic en "github" se me abre una pagina y no se que vajar si sos un poquito mas claro te agradeceria mucho amigoo

Responder
JMiur  

Rodrigo:
Hay cientos y cientos de estos sliders.

Graciela:
Ya veo que se ha jQuerizado :D

Monica:
¿De modo automático? No. Hay que leer el código e irlas traduciendo.

Rodrigo:
Debes bajar el archivo ZIP.

Responder
Lui'S Y  

Estupendo!!
JUSTO JUSTO lo que estaba buscando..

JMiur ya sé que con los consejos eres duro pero..

Tenía pensado este acordeón (o bien una transacciones de imagen) colocarlas justo debajo de la cabecera (entre la cabecera y el bloque de las entradas), para darle mas vidilla y estetica al blog.. La cuestión es que:
Para lo que quiero y donde lo quiero poner, se "cargaría" cada vez que alguien entre en la pagina..

Lo que me lleva a 2 interrogantes:

1. No es muy pesado ni puede llegar a molestar en la carga de algún usuario/visitante?

2. No es muy pesado como para que los bots de google me miren feo y perder posicionamiento?

Ya había leído, lo de evitar usar flash y cosas de esas a toda costa por que los bots de google son un poco cabrones y noseque..

si podrías darme tu opinión al respecto..

Un saludo Crack!

Responder
Lui'S Y  

PS. llevo un par de horas intentandolo.. Y que va.. no me sale..

Este mismo acordeon lo instale hace un tiempo en una web (no blogger) y la verdad no era nada complicado.. PERO ahora que quiero hacerlo de nuevo y en blogger, nada que me sale :(

No sé si el estilo va en head en body,
No sé si el plugin va en head en body,
No sé si el llamado a la función va dentro del mismo gadget donde quiero poner el acordeon.. O.o

Pues, vaya lio.. =(

Responder
Lui'S Y  

EDITO:
jajaja estoy pesado no?
Ya lo logre, he metido el acordeón donde deseaba!! El error estaba en la llamada de la función que no la había puesto bien ni donde era!!

Ahora solo queda editarlo un poco y listo..

JMiur, igual si que pasará lo que te comentaba en el primer mensaje!!
Al cargar la pagina, se ve por unos momentos el acordeón "mal" y bueno no se si eso a los motores de búsqueda les haga gracia :(
Me van a mandar al ultimo lugar de la lista jaja.. =S

Responder
JMiur  

Lui'S Y
Obviamente, se cargaría cada vez que se entra a la pagina como cualquier otra arte de esta.
El peso o no peso es subjetivo. Son decisiones personales. Más aún son decisiones que debemos tomar cada uno de nosotros y no Google :-;
No sé dónde has leído eso de los boots; los motores de búsqueda (boots) no leen ni JavaScript ni Flash ni CSS ni nada de eso, sólo leen textos, indexan imágenes e indexan enlaces; el resto, es ignorado.

El estilo CSS va donde quieras, normalmente en el head lo mismo que el script; el llamado a la función va en cualquier parte siempre que se la ejecute después del HTML Si se pone tal como dice la entrada, va en cualquier parte ya que se ejecutará después de haberse cargado la pagina.

Insisto; los motores de búsqueda no leen scripts. Si quieres saber lo que ven, simplemente, deshabilita JavaScript del navegador y deshabilita los estilos; eso que veráss, es lo que ellos verán.

Responder
Lui'S Y  

Hola JMiur,

Pues si, tienes razón.. Me he expresado mal.
Es que con tantos líos y mitos.. Puff..

La cosa es:
1. Los robots de google, dicen que pasan cada cierto tiempo por tu web y con un tiempo "cronometrado", lo que vio lo indexo y lo que no no.. y pues, la cosa es, que si metemos mucho código "javascript" en el encabezado y todo el rollo, igual nos estamos poniendo la gillotina al cuello!! AUNQUE con lo que dices que el flash y JS es totalmente ignorado, NO DEBERÍA de perder el tiempo el robot en ello y scanear la web entera sin problemas.

2. La velocidad de carga.
Google quiere lo "mejor" para quien busca información.. Una pagina que dura 20s en abrir y que pesa un huevo, lo mas seguro es que la tire a la pagina +10 (siendo optimista)
Yo tengo una velocidad de internet de 50mb. Pero quizás en Colombia o Venezuela las conexiones ni siquiera lleguen a eso, el usuario común podría navegar con una conexión de 5 veces menos que aquí.. Que pasa?
Si yo considero que me abre lento y tal.. No me quiero imaginar el dolor de cabeza que puede ser para alguien con una conexión de internet mas pobre..

(conclusión: el tiempo de carga SI que perjudica, y la pregunta iba por aquí.. Crees que un acordeón consuma mucho tiempo de carga?)

He estado trabajando la optimización, escalando peldaños con palabras clave y todo el rollo.. No me gustaría que por un nuevo juguete que pille (un javascript) me retroceda lo que hasta ahora he ganado :(
Ya de por si, jugamos con desventaja!! Sin poder darle tiempo cache a un .htaccess , ni unir archivos JS y CSS..

Y la pregunta (un poco ridicula) que te hice antes es mas que nada por esto: Entra a mi blog y echa un vistazo de como se "ve" el acordeón al justo momento de entrar.. Verás que sale entrecortado y LUUUEGO es que carga completo.. Por mas que le doy vueltas a la cabeza no sé que hacerle a eso..

Responder
Rodrigo  

luis cual es tu blog amigoo yo tb quiero ver como queda este scrip en un blogg

Responder
Rodrigo  

luis entre a tu blogg y no demora nada el escrip.

Ahora alguien seria tan amable de explicarme como meter el escrip,ya me vaje de la pagina lo que tenia que vajar ahora que sigue??

Responder
JMiur  

Rodrigo:
Eso es lo que pretende explicar esta entrada:
El demo completo podemos descargarlo desde github pero para agregarlo a un sitio, sólo necesitamos dos archivos: liteaccordion.jquery.js y liteaccordion.css. Entonces, primero .......

Lui'S Y:
El mejor consejo para todo eso lo da el mismo Google en su página para desarrolladores y lo resumo:

"NO CREE SITIOS PARA LOS MOTORES DE BÚSQUEDA, CREE SITIOS PARA LA GENTE"

Un script, un slider, una imagen, información adicional, cualquier cosa que se agregue a un sitio, esta en función de eso; lo demás es subjetivo y absolutamente imposible de evaluar.

Responder
Rodrigo  

COMO HAGO para abrir o ver el codigo liteaccordion.jquery.js ??

Responder
Lui'S Y  

jajajaja..

JMiur;
Tienes tanta razón y suena tan lindo eso..
El problema es que si no sales en un buscador no habrá "gente" que te vea! jajajaja.. Menudo lío eh.. Y Ironía..

Pues ahí se queda el acordeón!! Tampoco voy a vivir preocupándome por cada imagen que suba la mire bonito google o no =S
Optimizaré como pueda y que dios me agarre confesado!!

Una ultima pregunta, para ya dejar las molestias;
Sabes donde o como se llama la propiedad que da el efecto a las imágenes? ese que cuando cambia de pestaña se pone todo negro y vuelve a aparecer la imagen.. Quiero quitarlo! Pero no lo encuentro entre tanto código!! Que quede como en el demo. (imagen fija)


Rodrigo:
Bueno me alegra saberlo, aunque apenas carga la web si se nota como distorsionado, pero supongo que ya ahí no hay mucho que hacer!!
Reducirle peso al blog para que cargue lo mas rápido posible como mucho..

Responder
JMiur  

Rodrigo:
usando el block de notas de Windows o cualquier editor de texto.

Lui'S Y:
No es un problema de lindo o feo, sí, tal vez es un problema de ideologías.

Eso del color de fondo, no tengo idea si es una propiedad o es parte del script.

Responder
Lui'S Y  

Yo creo que el problema es que las web/blog deben estar diseñadas para la gente SI, pero son a través de los buscadores como te encuentran!! Porque si quisiera hacer una web exclusivamente para el populacho, igual la hacia mejor toda en flash!! ;)
Pero, "si no estas en google no existes" al menos fue lo que me enseñaron en la escuela de niño..

De modo tal, que debe haber un equilibrio divino.. Que, quien lo puede conocer?

PS. Ya solucione lo de el efecto que te decía..
Era: FadeOut , FadeIn.

$('#miejemplo').liteAccordion({
onActivate : function() { this.find('span').fadeOut(); },
slideCallback : function() { this.find('span').fadeIn(); },

He ahí, el "culpable" de dicho efecto :P jeje..

Un saludo cordial colega..

Responder
JMiur  

Que los sitios deben ser optimizados dentro de las limitaciones que cada sistema o conocimientos da, no cabe duda. Los sitios y cualquier actividad que uno haga. Siempre se trata de hacer lo mejor y aplicar el sentido común.

Pero, como dije; es un problema de ideologías.

En lo personal:
existo antes de Google
con Google
sin Google
a pesar de Google
y seguiré existiendo después de Google.

Y jamás hubiera usado la palabra "populacho" para referirme a nada ni a nadie.

Responder
Rodrigo  

hola mira liteaccordion.css este si puedo abrir con el blog de notas.

liteaccordion.jquery.js con este tengo problemas a este no lo puedo ver con nada y no se ke hacer, tal vez necesito algun programa especial

Responder
Martín Rocha  

Hola JMiur esta muy bueno ademas es ligero d10.
Vi esto por la web http://www.onextrapixel.com/2011/08/31/enhance-your-sites-with-css3-animations/ repente te es util para alfuna entrada.
Un saludo que andes bien.

Responder
JMiur  

Rodrigo:
Los archivos de extensión js son archivos de texto asñi que no requieren ningún soft especial para ser abiertos, se abren con cualquier editor.

Martín Rocha:
Por algún lado he puesto alguna entrada sobre esas propeidades.

Responder
Rodrigo  

Me vaje el adobe dreamweaver y recien pude ver el archivo, segui todo lo que dices y solo me queda un pantaya oscura sin ninguna imagen cual puede ser el problema o me faltan agregar mas cosas

http://rodrigo-modoprueba.blogspot.com/

Responder
JMiur  

En ese demo donde sólo hay una pestaña, no hay ninguna imagen ya que la URL que estás poniendo es la dirección de una pagina de etiquetas de tu blog.

Responder
Flenning  

No sá cómo modificar el css para que la imagen despliegue un texto como en aquel otro post suyo: http://vagabundia.blogspot.com/2009/05/efecto-hover-sobre-las-imagenes.html. Sería una forma interesante para combinar galeria de imagenes con texto

Responder
JMiur  

No sé a que te refieres con exactitud ya que este acordeón tiene un texto en cada imagen. Es el que se encuentra en:
&ltspan class="figcaption"&gltun texto optativo&lt/span&gt

Responder
Flenning  

Vi la clase “figcaption”, pero ese texto me lo imagino discreto, breve, o de otro modo taparía la imagen. Ese caption del que usted habla podría asimilarse con el LEER MÁS de aquel otro post suyo: http://vagabundia.blogspot.com/2009/05/efecto-hover-sobre-las-imagenes.html. Concretamente, yo me refiero a un texto que aparezca al pasar el mouse por la imagen. Siguiendo con la comparación con su post pasado, sería algo así como el famoso “.imgteaser a:hover .desc {…}”

Responder
JMiur  

Entiendo. Me aprece que eso requeiría cambiar el script y en esa parte no puedo ayudarte porque lo desconozco.

Responder
Ikari  

Y COMO AGREGO LA SEGUNDA PESTAÑA

JMiur  

Lo dice la entrada:

<!-- cada una de las pestañas -->

Responder
Nelson  

Buenas tardes excelente post. Como le hago para colocarlo Vertical.
Actualmente se encuentra como horizontal

Agradezco su colaboracion....

JMiur  

Este script sólo crea acordeones horizontales.

Responder
Mykeh  

Hola!.. gran post...

Tengo una duda... he bajado el plugin de liteAccordion
y he logrado hacer esto:

http://cverde.u7.cl

estoy buscando la forma de cambiarle los colores a las pestañas,
necesito colocarle colores mas vivos, mas fuertes..

qué archivo (css, js o html) debo modificar y qué sección especificamente?
Gracias de antemano
Miguel

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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