JMiur [E]

FrogJS es una galería de imágenes que con muy poco, crea un efecto muy vistoso e incluye la opción de soportar textos adicionales y enlaces.

Requiere Prototype + Scriptaculous así que, si no las tenemos en nuestra plantilla, primero, deberemos agregar esas librerías.

Luego, descargamos el ZIP donde, lo único necesario es el archivo frog.js que agregaremos a la plantilla.
<script type="text/javascript" src="URL_frog.txt"></script>
El CSS es muy sencillo. Lo colocamos inmediatamente después:
<style type="text/css">
#FrogJS { /* es el bloque donde se mostrará la galería */
height: 650px; /* el alto total */
margin: 0 auto; /* será centrado */
width: 600px; /* el ancho total */
}
#FrogJSCredit { /* son los textos visibles del atributo TITLE */
/* cualquier propiedad */
}
#FrogJSCaption { /* son los textos visibles del atributo ALT */
/* cualquier propiedad */
}
</style>
Para usarla, sólo debemos colocar una serie de enlaces dentro de un DIV al que le daremos un ID exclusivo llamado FrogJS:
<div id="FrogJS">
<a href="URL_imagen" title="texto optativo" rel="URL_optativa">
<img src="URL_miniatura" alt="texto optativo" />
</a>
.......
</div>
Lo logico es tener dos imágenes, la de tamaño normal y una miniatura pero, también sería posible usar sólo una y redimensionarla en el HTML:
<img src="URL_imagen" alt="texto optativo" width="tamaño" />
En el atributo HREF del enlace, colocamos la imagen "grande"; en el atributo TITLE el texto (optativo) que se verá inmediatamente debajo y en el atributo REL el enlace optativo a alguna página.

En la etiqueta IMG colocamos la miniatura y en su atributo ALT, el texto inferior optativo.

Modificando el script, podemos configurar algunos detalles extras:
// CONFIGURATION VARIABLES
var thumbTop = '60px'; // es la distancia superior de las miniaturas
var loadingAni = 'images/loading.gif'; // es la imagen de carga que se muestra al cargar las imágenes
var scalePercent = '300'; // la escala del efecto fade
Un detalle más. Aconsejan agregar, luego del DIV, un script para ocultar la galería mientras esta se carga. Para evitar tener que hacer eso, agregué ese código en el archivo de esta manera. Vamos al final y ponemos:
function frogHIDEthumbs() {
var ribbit = document.getElementById('FrogJS');
ribbit.innerHTML += '<center>... cargando ...</center>';
// o bien si queremos una imagen en lugar del texto
// ribbit.innerHTML += '<img src="URL_imagen" />';
var anchors = ribbit.getElementsByTagName('a');
for (var i=0; i
anchors[i].style.display = 'none';
}
}
Así que, en el post, luego del DIV escribo:
<script type="text/javascript">frogHIDEthumbs();</script>

38 comentarios:

Anónimo  

Me encantó.
Ay, perdón, pero en WP dónde se coloca la libreria con el enlace ? Tengo la plantilla separadas por muchos archivos.
Seria function?

Responder
Unknown  

:) qué bonito!!!...he estado jugando con las imágenes para gentes como yo, encantada con esta entrada de bichitos y lo de la galería fantástico...besitos

Responder
no  

Lamentablemente tengo Jquery en mi blog :(

Responder
Unknown  

Fantastica, muy buen efecto y se ve sencilla de implantar. Una cosa... todas las librerias de Google Apli necesarias exactamente donde se colocan?, da igual en orden de como se colocan en el caso de tener más .js? y por último... es lo mismo tener el .js que el txt?

Responder
La Blogueria  

Preciosa, me encantó, gracias.

Responder
Anónimo  

Que efecto más bueno tiene el FrogJs!!! Las imágenes que has puesto son una pocholada :)

Responder
JMiur  

Monjaguerrillera: En WP es sencillo. Por ejemplo, puedes crea una carpeta SCRIPTS y subir los archivos JS o CSS allí. También puedes colocar el archivo con el script en la misma carpeta donde guardas el tema en uso, junto con los otros PHPs.

Marcos: Eso me pasa pero, al revés :D

Malina: Se colocan antes de </head>. El orden, depende. Por ejemplo, como esta usa Proptotype, las APIs se colocan ANTES. Siempre es así, la librería principal va primero y el script que usa esa librería va después. Si se usan otros scripts independientes, el orden de esos otros no tiene mayor importancia.

Graciela, La Bloguería: Me alegro que les guste :D

Espinelli: ¿Qué será una pocholada? Translate, please :D

Responder
Unknown  

Gracias JMiur por la respuesta.

Volviendo a lo de Adsense he probado a incluir el código manualmente despues de footer-line-3 pero sigue sin aparecer nada, debe ser algún error de la plantilla, es esa que me da problemas con los saltos de linea también y que sigue sin solucionarse. Cuando quiero implantar alguno tengo que poner el br/ porque con p no me hace caso.
Mira que he buscado pero no he encontrado ninguna plantilla con ese formato de columnas y me resisto a cambiarlo.
En fin... hasta el proximo problema que me den.

Responder
Unknown  

Ah, una pocholada es algo muy chulo en plan pijo, osea un poco cursi finolis pero que se utiliza mucho sobre todo entre mujeres

Responder
JMiur  

Aclarada la traducción, Malina :D

¿Aún poniendo los scripts de Adsense en la plantilla misma ocurre el problema?

Responder
Chilam Balam  

tengo un problema al cargar el blog aparecen todas las minuaturas y al pasar de una a otra (cuando ya está cargaada todo lo que está abajo sube, como puedo solucionar el problema?

Responder
JMiur  

¿Has agregado al final el script para que se oculten?

Responder
Unknown  

si, he incluido el codigo que provee adsense para incluir en la plantilla, lo pongo a continuacion de footer-line-3 y tampoco los muestra

Responder
José GDF  

Hola, JMiur:

Lo primero, saludarte, pues hace tiempo que no me paso por aquí.

Lo segundo, he detectado un error en la línea que dice:

<script type="text/javascript" src="URL_frog.txt"></style>


Debería acabar en </script>

He probado a implementar este truco en una entrada suelta y funciona, solo que con algún problema en los estilos que hay que pulir, o quizá es el tamaño de las fotos, que es descomunal.

Dejaría un enlace, pero lo estoy haciendo, de momento, en un blog para pruebas, pero es posible que lo integre en un blog de fotografías que tengo, pues me ha gustado mucho.

Gracias y saludos.

Responder
JMiur  

Saludos, José. Corregido el error de transcripción.

Responder
El h@Cker De la vel@  

hola m gustaria saber que maximo de fotos se pueden colocar en FrogJS: Galería de imágenes con Prototype y si se pueden colocar las imagenes en de ir al lado ir debajo no se si se podria saludos a todos y gracias espero prona respuesta

Responder
JMiur  

La cantidad sólo está limitada por la memoria del usuario.
Supongo que la ubicación podría cambairse pero no estoy seguro.

Responder
Flenning  

Hola,
QUeria preguntarte dónde alojas el script de forg. ¿Qué usas, Fileden?

Responder
JMiur  

Sí, exactamete, está en Fileden subido con extensión TXT.

Responder
Flenning  

Gracias por la aclaración.

Finalmente he logrado que funcione, pero con tu galería de imágenes, No sé qué estoy haciendo mal al poner las mías. Tengo otras dudas:

¿La url de la imagen miniatura es la que corresponde al src o al href de la imagen cargada?
¿Las imágenes miniaturas son imágenes realmente más chicas o se trata de de la opción “pequeña”, por ejemplo, en el asistente de carga de imágenes del editor de post?

Responder
JMiur  

La URL de la imagen al subirlas a Blogger es la de la etiqueta IMG o sea la del atributo SRC.

la miniatura, pude ser ua imagen especial o bien puedes usar las que se crean al usar Blogger para alojarlas; hay muchas opciones y no sólo las tres que muestra el editor. Si te fijas en esta entrada verás una lista de ellas y son muy fáciles de usar.

Responder
La hormiguita  

Hola... le hago, una pregunta?
Hice esta galeria, tal cual está en la página FrogJS Image Gallery , para una página web, pero me queda muy separada la miniatura de la foto central y se me va encima de la sidebar y veo que en la suya esta pegadita.. no hay ese espacio, como hago para que diminuya????
Muchisimas gracias.:)

Responder
JMiur  

La hormiguita:
puede ser que el ancho del DIV principal sea excesivo pero, debería ver el ejemplo concreto para responderte con más exactitud.

Responder
La hormiguita  

Si gracias era eso..... ya se solucionó.
Muchas gracias..... :)
Feliz ;)

Responder
JMiur  

Perfecto :-)

Responder
La hormiguita  

Buenas noches.... bueno quería preguntarle como hago para que no se vean las imágenes pequeñas al cargarse la galería... yo no la hice en un blog, la hice en un sitio y no encuentro en Dynamic drive el script?
gracias. :)

Responder
JMiur  

Es lo que dice al final de la entrada, agrega la función frogHIDEthumbs(); puedes copiarla del mismo post y la colocas entre etiquetas SCRIPT como cualquier otra. Luego, la llamada a la función tal com odice ahí, después del DIV.

Responder
La hormiguita  

Gracias...recién ayer lo pude hacer... lo había hecho antes de preguntarle y resulta que todo lo escrito se veia en la página....:$ ahora en su ayuda me di cuenta que había que ponerle script, lo hice y no se ve, lo puse a continuación de la galería en el #main content pero las fotos pequeñas se ven igual.. estará bien colocado ahí? o no entendí bien.Los puse en el orden de arriba 1ºfunction bla,bla,bla y 2ºscript type=blablabla ?????

Responder
JMiur  

El orden es:

primero el script
luego el div con las imágenes
por último lo ejecutamos con <script type="text/javascript">frogHIDEthumbs();</script>

No recuerdo donde estaba el demo para verlo :-$

Responder
La hormiguita  

ahhhhh :O cuando me dijo la demo...me acordé que venian dos html??? pa que...dije en ese momento, no le di importancia y seguí :P, nada ahora que me dice me fijé y está el código para que no se muestren las thumbnails, lo puse y funciona. Al fin terminé la página.:D
El de arriba, el suyo es para un blog...no?
Mil gracias.... hoy ya lo dejo tranquilo.... ;)

Responder
JMiur  

PERFECTO !!!

Responder
Cristo te necesita  

Sinceramente soy un NOOB en esto, espero q tengas paciencia

1º No sé cmo poner prototype y scriptaculos
2º Donde se pone el código? en la entrada o se modifica la plantilla?
3º Lo hice en una entrada (trate de seguir paso a paso xD) pero cuando pongo vista previa me aparecen las miniaturas en una ilera hacia abajo, y al picharla se abre como una nueva pagina :(

me sale el error: Warning; unhandled protocol

Espero me puedas ayudar, ya ñp dije anteriormente soy ultra noob para esto, hace pocos días q hice mi primer blog y tu pagina me ha ayudado mucho, gracias de antemano! :D

Responder
JMiur  

Para cargar las librerías, mira en esta entrada.

El script será dificil ponerlo en una entrada a menos que se cargue desde un archivo externo. Lo mejor es que este en la plantilla, antes de </head>

Es posible que con vista previa no funcione ya que a veces, en Vista Previa no se ejecutan scripts. De todos modos, si las librerías no están cargadas, no funcionará en absoluto y se ostarrán errores de todo tipo así primero que nada, debe hacerse eso: poner los scripts.

Prudencia y paciencia; esta no es una galería sencilla.

Responder
Cristo te necesita  

Ufs realmente se me complica al saber casi nada sobre blogs, scripts y html, heemm si ingreso a ese enlace q me das a "prototype" despues q le lleva a su pagina debo clickear donde dice "Download Prototype 1.7 RC2" ??
sale un código, es ese el que debo ingresar antes de "head" ??

Responder
JMiur  

No. Lee esa entrada y ahí te dice el código que debes agregar en tu plantilla para cargar esas librerías.

Responder
Pepe  

Hola, tengo un problema. Quiero poner la galeria en mi sitio pero cuando saco los nombres dinamicos de mi base despues del div no me imprime nada, hago por ejemplo echo "XXX"; y no sale nada. Alguien puede decirme por que?

Saludos

Responder
Pepe  

hola

ALguien sabe por que no puedo hacer un echo de php dentro del div FrogJS.

Saludos

Responder
GonzaKPO  

acabo de ver esto mañana voy a implementarlo a ver como me va muy bueno el efecto

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