JMiur [E]

Esta es un galería de imágenes, realizada en Javascript que a su vez, funciona como slideshow. Aunque su uso tal vez sea limitado, tiene la ventaja de ser muy pequeña y bastante sencilla.

En el sitio original, podemos ver un demo y descargar el ZIP con el ejemplo completo pero, si vamos a intentar utilizarlo en Blogger habrá que hacerle algunas modificaciones más o menos importantes.

Este ejemplo utiliza esa librería adaptada y el código completo, puede ser descargado desde este otro ZIP . Allí, veremos un archivo llamado GAslideshow.js y otro GAslideshow.css que son los que tenderemos que alojar en un servidor propio. Las imágenes usadas están todas alojadas en ImageShack y también dentro del ZIP..

Por lo general, cuando hablamos de scripts siempre decimos que hay que ubicar el código en el head de la página. Eso es así porque el código lo vamos a utilizar repetidamente pero, no es el único método. En este caso, la galería está pensada para usarse en páginas individuales por lo tanto, no vale la pena insertarla en la plantilla ya que no nos interesa que se cargue siempre sino sólo cuando la vayamos a utilizar así que, la llamaremos directamente desde un post, el mismo donde irá la galería.

Vayamos por partes. Creamos un post cualquiera y nos colocamos en el modo Edición HTML. Primero que nada, necesitamos insertar el CSS; esto, en Blogger, lo hacemos importándolo:
<style type="text/css">@import url("URL_GAslideshow.css");</style>

#contenedorGaleria { /* es el bloque de toda la galería */
background-color: #848FAA;
border: 6px solid #444F6A;
margin: 0px auto;
padding: 10px;
width: 494px; /* el ancho es el único valor obligatorio y depende del tamaño de la imagen */
}
#contenedorMiniaturas-outter { /* es el bloque externo con las miniaturas */
background-color: #505961;
border:2px solid  #505961;
height: 100px; /* es igual al alto de la miniaturas */
margin-top: 10px;
padding: 0;
width: 490px; /* el ancho siempre debe ser definido */
}
#contenedorMiniaturas-inner { /* es el bloque interno con las miniaturas */
height: 100px;
overflow: hidden;
position: relative;
width: 490px;
}
#lasMiniaturas { /* son las propiedades de la etiqueta UL */
border-right: 5px solid #FFFFFF;
height: 100px;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
width: 5000px; /* o cualquier valor MUY alto */
}
#lasMiniaturas li { /* las miniaturas están en etiquetas LI */
float: left; 
cursor: pointer;
margin: 0 1px;
padding: 0;
}
#lasImagenes { /* es el bloque que contendrá las imágenes grandes */
background: #FFFFFF url(URL_loading.gif) no-repeat center center;
border: 2px solid #505961;
height: 272px;
padding: 5px;
position: relative;
width: 480px;
}
#lasImagenes img { /* cada imagen */
position: absolute;
top: 5px;
left: 5px
}
/* las propiedades de los enlaces que sirven para navegar entre imágenes */
.galNavegacion{ }
#galAtras { }
#galAtras:hover { }
#galAdelante { }
#galAdelante:hover { }
Ahora, colocaremos el código HTML de la galería y en un post de Blogger lo tendremos que escribir todo en una sola línea:
<div id="contenedorGaleria">
<div id="contenedorImagenes">
<div id="lasImagenes">
<a href="javascript:imgNav(-1)" class="galNavegacion" id="galAtras"></a>
<a href="javascript:imgNav(1)" class="galNavegacion" id="galAdelante"></a>
</div>
</div>
<div id="contenedorMiniaturas-outter">
<div id="contenedorMiniaturas-inner">
<ul id="lasMiniaturas">
<li value="1"><img src="URL_miniatura_1" height="100" width="175" /></li>
<li value="2"><img src="URL_miniatura_2" height="100" width="175" /></li>
<li value="3"><img src="URL_miniatura_3" height="100" width="175" /></li>
<li value="4"><img src="URL_miniatura_4" height="100" width="175" /></li>
<li value="5"><img src="URL_miniatura_5" height="100" width="175" /></li>
</ul>
</div>
</div>
</div>
Sólo colocamos tantos <li value="N"> como imágenes vamos a usar y las direcciones de las miniaturas que se verán en la parte inferior.

Ahora, establecemos los datos del script. En Blogger, también lo escribiremos en una sola línea:
<script type="text/javascript">
// la lista de imágenes
var imagenGaleria = new Array();
imagenGaleria[0] = ""; // dejar en blanco
imagenGaleria[1] = "URL_imagen1.jpg";
imagenGaleria[2] = "URL_imagen2.jpg";
imagenGaleria[3] = "URL_imagen3.jpg";
imagenGaleria[4] = "URL_imagen4.jpg";
imagenGaleria[5] = "URL_imagen5.jpg";

var imgid = 'lasImagenes'; // el ID del bloque donde se mostrarán las imágenes
var thumbid = 'lasMiniaturas'; // el ID del bloque con las miniaturas
var auto = true; // poner en false si no se quiere que el slideshow funcione automáticamente
var autodelay = 5; // cantidad de segundos entre cada imagen
</script>
Por último, cargamos el script y lo ejecutamos:
<script type="text/javascript" src="URL_GAslideshow.js"></script>
<script type="text/javascript">slideShow();</script>
¿Puede haber problemas? Sí, dependerá mucho de la plantilla donde queramos utilizarlo. Si todo es normal, debería funcionar en IE, Firefox, Opera y Safari.

109 comentarios:

Luis  

Muchas gracias por el visor, yo hace mucho quize insertar algo hasi en mi blog, pero por ejemplo, como le hago para que cada imagen al dar click me envie a una pagina?

Saludos

Responder
JMiur  

Para hacer eso en las miniaturas sería sencillo; en lugar de esto:

<img src="URL_miniatura_1" height="100" width="175" />

poner esto:

<a href="direccionPagina">
<img src="URL_miniatura_1" height="100" width="175" />
</a>

Hacerlo en la imagen superior, ya no es tan fácil y habría que modificar el script.

Responder
Luis  

Nuevamente muchas gracias JMiur por ayudarme y felicidades por el blog..

Saludos

Responder
Mundo Libre10  

Gran Jmiur tengo un problema maestro pido tu ayuda alguien ha comprado el dominio mundolibre10.com (y claro no he sido yo) hasta ahi no hay problema, pero perooo esta personita esta tratando de copiar todo exactamente igual a mi pagina hasta las imagenes de mis headers.

Que consejos me das Gran Jmiur, que seguridad puede brindar blogger en estos casos (si es que existe).

Responder
JMiur  

"Si es que existe", ese es el problema clave.

Acabo de verlo y es increíble. Imagino que ya sabes quien es: WHOIS

Realmente, no sé que puedo sugerirte. Enviarles una advertencia, hacer la correspondiente denuncia en Google y en Blogger. Desconozco si existe otro procedimiento práctico y espero que quien lea esto aporte información.

Me he quedado con la boca abierta.

Responder
cdg  

Tomo al pie de la letra el mensaje de bienvenida, increíble

Responder
MUndo Libre10  

Gracias amigo Jmiur, pues la verdad estoy tratando de indagar que es lo que debo hacer pero no te queda otra que entrar nuevamente a lo deje algun dia el Hacking.
Nos vemos y gracias por todo gran Jmiur.

Responder
JMiur  

Así es cdg, es realmente increíble.

mundolibre: espero que se resuelva pronto, son pocas las herramientas que tenemos pero habrá que usarlas todas.

Lo que necesites, me avisas.

Responder
LacraX07  

ES UNA HINTERESANTE HALTERNATIBA Y KOMO VIEN DISES ES PRASTIKA PARA UNA GÜEB SIN PROBLEMAS LA TENDRE EN KUENTA.AH HALGO MOLESTO EL KODIGO PERO DA GÜENOS HESFESTOS.

Responder
Mundo Libre10  

Amigo Jmiur ya se quien es Hector Cabrera como veras los datos osn los mismos esta es supagina y la verdad no se que tenga este mexicano contra mi pero en fin que mal que pasen estas cosas.

Gracias por tu ayuda Jmiur nos vemos.

Responder
JMiur  

Acabo de ver su sitio antiguo y parece que ha decidido ir a fondo y copiar lo que faltaba, incluyendo el dominio.

Supongo, que decirle que es un caradura es poco e imagino que calificarlo como ladrón puede ser considerada una injuria así que no diré que es un ladrón aunque ahora no se me ocurre ninguna otra palabra que lo califique ... seguiré pensando.

Responder
FalconFix  

Asi es gran Jmiur me ha hecho un ataque DoS (denegacion de servicio), me obligo a alojar todas mi imagenes en Blogger (lastima que la resolucion de la imagenes se ven afectadas), pero bueno seguridad es seguridad, peor es mis Headers aparezcan en blanco como hasta hace 30 min.

Ya tengo su IP es hora de visitar a mi viejo amigo Puro Hueso haber que se le puede hacer a este loco, y loco porque sinceramente hasta ahora no me explico porque se la agarro justo conmigo¿?¿?¿?

Saludos gran Jmiur gracias por tu atención.

Responder
FalconFix  

Bueno ahora manos a la obra y me voy a ver a aquel amigo mio, hasta mañana gran Jmiur espero no encontar mi pagina caida, menos mal que esta Blogger y de verdad que eso si hay que agraderecerle bastante a Google nos vemos.

Responder
JMiur  

En este momento, tu sitio se ve bien.

Agradezcamos a Google/Blogger por eso :D

Responder
Marco La Rosa Gerente General  

Saludos Jmiur, he estado probando la galeria DE IMAGENES pero no se porque razón al cargar una imagen cualquiera (en la galeria) se ve un rapido reflejo de esta en la parte inferior como si se descuadrara pero esto es solo al momento del efecto slide.

A que crees que se deba amigo Jmiur.
Si podrias ayudarme te estaria infinitamente agradecido.

Saludos.

Responder
JMiur  

Marco:
Estuve viendo la galeríade este blog; no sé si te refieres a otra. Esa en particular está perfecta salvo ese detalle que me cuentas y confieso que no entiendo por qué ocurre ya que el código está bien.

Lo que podríamos intentar es, agregarle una propiedad CSS para evitar ese parpadeo que no es otra cosa que una fracciòn de segundo en que la imagen que estás mostrando arriba, se ve abajo y luego sube.

Fíjate en esta definición:

#lasImagenes {
...........................
overflow-y:hidden;
}

Y agrega eso para forzar a que el navegador "corte" la imagen si es muy grande (o está muy abajo) y de esa manera, el efecto del parpadeo no debería verse más.

Responder
Marco La Rosa Gerente General  

Saludos amigo Jmiur, muchas gracias por la ayuda funcionó a la perfección mil mil gracias, hasta otra oportunidad nos vemos.

Responder
JMiur  

Me alegro que funcionara :)

Responder
Marco La Rosa Gerente General  

Jmiur siento molestarte una vez mas, crees que podria ponerse el efecto marquesina a a las imagenes pequeñas, lo he intentado pero sin éxito, porque siento q asi quedaria del todo bien (para sentirme completo jajaaj).

Saludos hasta la proxima amigo Jmiur.

Responder
JMiur  

Me temo que, hasta donde yo sé, ese efecto no funcionará en Internet Explorer.

Responder
Marco La Rosa Gerente General  

Cierto Jmiur, lo estuve probando y en IE no resulta mil gracias de todas maneras por tu atencion prestada nos vemos hasta la proxima.

Responder
Claudio - Poca Tinta  

Hola,

Mira estaba viendo esta Slideshow y es interesante acá te pongo el enlace:
Dhonishow
Saludos

Responder
JMiur  

Lo voy a mirar, Claudio. A simple vista, parece posible.

Responder
Anónimo  

Buen día Jmiur me llamo Kelly antes de preguntarte quería felicitarte por tu sitio web esta muy interesante.Bueno hay uno de tus servicios que me intereso que es "UNA GALERÍA DE IMAGENES CON SLIDESHOW" publicado el 20 de mayo del 2008, esta muy bueno ese sistema.Queria saber si hay alguna forma en que pueda colocar solo las imajenes pequeñas que se corran debajo del encabezado de mi blog.porque pienso que quedaría muy grande colocarlo con la imagen grande . Espero que me entiendas. Besos

Responder
JMiur  

Kelly:
Tal como es el script, no pero, tal vez pudiera modificarse, tendría que pensarlo, es una buena idea. No sé si tiene solución pero lo miraré.

Responder
Uve  

Hola JMIur... la entrada es algo antigua, pero yo recien la descubrí, jeje

No se porque razón nunca termina de cargarse la zona donde debería visualizarse la foto en grande :(

Yo he puesto todo el codigo en un elemento html... aunque he probado en un post y me sucede lo mismo...

alguna parte hay que meterla en la plantilla?
tambien he pensado en que me salto algun paso... como por ejemplo eso de "la id del bloque con... " ¿En ese apartado tengo que modificar algo?


Saludos

Responder
JMiur  

uve:
¿Podrías mostrarme un ejemplo para que pueda verlo online?

Responder
Uve  

Lo tengo en esta página JMiur :)

http://plantilla-uve.blogspot.com/

Responder
JMiur  

No estoy muy seguro de si lo que veo online es exactamente el código que está colocado pero, parecería que hay un pequeño error. Leo esto:

<script src="http://3rqkwg..../GAslideshow.js" type="text/javascript">
<script type="text/javascript">slideShow();</script>

Faltaría la barra de cierre del primer script. Puede escribirse así:

<script src="http://3rqkwg..../GAslideshow.js" type="text/javascript" />

Pero, tal vez eso es lo que confunde así que modifiqué el post para que fuera más claro. Sería de este modo:

<script src="http://3rqkwg..../GAslideshow.js" type="text/javascript"></script>
<script type="text/javascript">slideShow();</script>

Espero que se entienda.

Responder
Uve  

Perfecto Jmiur, es cierto que ese era el error... al probar ahora en una entrada me lo decía... pero en el elemento que yo lo tenía pegado no :(

Quedó genial :)

Responder
JMiur  

Me alegro que se solucionara :D

Responder
finisterra357  

Hola otra vez, me ha gustado mucho esto pero a que servidor puedo subir los archovps .js y .css , ya intente en http://hostfile.org pero no deja registrar y no se me ocurre nada muchas gracias por tu respuesta

Responder
JMiur  

Fileden y Google Sites son alternativas pero conviene colocarlas directamente en la plantilla.

Responder
puerto3.0  

hola JMiur. la pregunta es: ¨Porqué no corre las miniaturas en internet explorer al pasar el amuse sobre ellas- En tu ejemplo sale bien en cambio, cuando lo hice sçolo me funcionaba en firefox.

Responder
JMiur  

Tendría que ver tu ejemplo para decirte. Si lo ves acá y no allá, es que algo está mal colocado en alguna parte.

Responder
CHiCken  

Quisiera saber como poner las imagenes que se visualizan al tamaño del cuadro, ya las puse pero las imagenes se salen del cuadrado.

Responder
JMiur  

Estasbleciendo los valores de width y height correspondientes además de establecer esos tamaños en el CSS.

Responder
Ángeles  

Hola, soy Ángeles y tengo un problema con la barra de navegación de las imágenes, la que sale en el contenedor grande y es que todo me funciona menos esto que no me aparece siquiera. He mirado todo el css pero no logro encontrar como colocarlo. Me pasa lo mismo con las ventanas modales de floatbox. Si me puedes ayudar te lo agradezco un montón, lo estoy usando en el blog de fotografía de un amigo y me he atascado aquí

Responder
JMiur  

Ángeles: ¿Tienes un ejempl oque pueda verse online?

Responder
Ángeles  

Perdona, con el despiste se me olvidó poner en el perfil el la dirección del blog de mi amigo Jose, es todavía un comienzo de diseño -por eso sólo hay una foto-pero es importante hacerla cuanto antes y a ser posible bien. La dirección es http://pasatiemposdelalmacen.blogspot.com/2010/01/jose-manuel-gil-garcia-paisajes.html (esta dirección también es provisional, luego copio todo a otro blog. Muchas gracias.

P.D. En I.E. no corren las miniaturas, es posible que haya hecho algo mal, muy posible, si puedes verlo te lo agradezco.

Responder
JMiur  

Me costó trabajo encontrarlo, puede ser que se un problema de URLs pero, creo que es el último que peude verse en esta página ¿verdad?
http://pasatiemposdelalmacen.blogspot.com/2010_01_01_archive.html

Si es así, en Firefox no le vi problemas, anda perfectamente; la única diferencia con este ejemplo es que no se ven las imágenes de las flechas para avanzar o retroceder sobre la imagen grande. Simplemente, los enlas están pero no tienen el CSS correspondiente. El resto lo veo bien.

En IE8 algo raro pasa porque lo que no veo que funcione es el desplazamiento de las miniaturas aunque no se muestra ningún error y, aparentemente, todo es correcto.

La verdad, no sé que responderte :$

Responder
Ángeles  

Funcionar, funciona muy bien, lo explicas perfectamente y lo haces comprensible. El problema del explorer es normal, funciona cómo y dónde le da la gana, pero si logro poner las flechitas de desplazamiento no me importa porque pueden avanzar o retroceder con ellas y se ve bien en los demás exploradores. Mi pregunta es vergonzosamente de principiante pero no sé como añadir el css a los enlaces de las flechitas. Voy a leerme lo que tengas y que yo pueda entender, pero si no es abusar ¿me podrías indicar qué tengo que hacer o dónde debo mirar? Voy a intentarlo pero me temo que por mucho que esto me guste nací para otras lenguas. Un millón de gracias y siento ser pesada, normalmente no tengo problemas pero ahora me he atascado en lo de las dichosas flechitas. Un abrazo.

La dirección de la página donde esta el slide es ésta:http://pasatiemposdelalmacen.blogspot.com/2010/01/jose-manuel-gil-garcia-paisajes.html

Responder
JMiur  

Lo de las flechas (creo yo) que es indiferente, hasta podrías quitar los enlaces y debería funcionar igual, de hecho, en Firefox lo hace bien.
Agregar el CSS es simple, solo requieres las dos imagenes, cualquiera estará bien. Lo mínimo sería esto:

#galAtras {
background: transparent url(URLimagen1) no-repeat scroll left center;
left:0;
}
#galAdelante {
background: transparent url(URL_imagen2) no-repeat scroll right center;
right:0;
}

Ah bien, esa dirección esta OK, es lo mismo que vi.

Un detalle, simplemente apra verificar bien, en este ZIP hay un ejemplo completo que armé y que es el de esta entrada o algo similar. Se me ocurre que tal vez, si pruebas con eso, ahí podría saberse si es un tema de IE o si es que hay alguno de esos errores que uno no logra ver.

Responder
Ángeles  

Hola Jorge, soy Ángeles, al final tiré la toalla con esta galería y la barra de navegación. He utilizado la de floatbox que recomiendas en otra entrada y ha quedado bien (http://jmgilgarcia56.blogspot.com/2010/01/bogota-people.html). Sólo quería darte las gracias por tu ayuda. Un saludo

Responder
JMiur  

Saludos, Ángeles. Mientras que esté satisfecha con el resultado, cualquier alternativa es válida así que me alegra que lo hayas resuelto :D

Responder
hospederia  

oye JMiur , me toco que crear otro blog para poder montar ese script.

Responder
Alejandro  

Un gran detalle, como las imagenes las esta cargando por medio de una dirección URL la idea tambien seria darle dimención osea tamaño a la imagen grande. por favor sabe alguien como hacerlo.

Responder
Bilosony2™  

Hola JMiur e buscado en todos lados como hacer una galeria de imagenes como la que hacen en este post

http://ilovegraffiti.de/eng/2010/04/09/osgemeos-interview-2/#more-7763

Pero no encuentro explicacion de como hacerlo tienes algun post o idea como se ara??

Saludos!!

Responder
JMiur  

Eso es un plugin de WordPress llamado Nextgen-Gallery:
http://code.google.com/p/nextgen-gallery/source/browse/trunk/nggallery.php

Responder
Bilosony2™  

tu crees que andara en blogger???

Responder
JMiur  

No. Los plugins de WordPress no pueden usarse en Blogger.

Responder
yrene  

Hola excelente post! muchísimas gracias! tengo un problema, cuando coloco hasta 29 imagenes la marquesina de abajo de mueve perfecto pero cuando coloco más esta no funciona que puede estar pasando? Gracias!

Responder
JMiur  

Lo desconozco. Como n opuedo ver tu ejemplo, es imposible responder.

Responder
Naiara  

Hola, me estoy creando una nueva web y esto me viene de lujo! tengo una duda. ¿Donde puedo cambiar el tamaño?

Responder
JMiur  

Todos los cambios debes hacerlos en el CSS, allí hay propiedades width y heigh que deberás modificar para adaptarlas a cada caso.

Responder
TnisMaster  

Q talJmiur. Felicidades por el Blog. Mi pregunta o peticion es la siguiente. Yo SII quiero cargar este script siempre ya q utilizare este slideshow en todas mis entradas. Como adapto el codigo para esto?

http://varriormarket.blogspot.com/

Gracias de antemano y saludos.

Responder
TnisMaster  

Ah y por ultimo. Como adaptas la imagen para q no supere el marco del slideshow y de la entrada? Saludos.

http://quierestenisaquiestan.blogspot.com/

Responder
JMiur  

No sé si podrás hacerlo ya que para que se vea más de uno en una misma página, los cambios deberñian ser muchos y no tengo idea de cuales. En todo caso, si es posible usarlo en todas las entradas siempre que estas n ose meustren completas en el home y la galería sól ose vea en als pa´ginas individuales. En ese caso, no es necesario modificar nada.

La imagen principal, la grande, debe tener el tamaño justo para el espacio que has creado; en tu ejemplo, tiene 720 pixeles de ancho as´que debería ser menor, de 450 mas o menos.

Como en tu plantilla, todas las imagenes tienen borde, debes quitarle es oa la galeria:

#contenedorGaleria img {
padding: 0;
border: none;
}

Responder
TnisMaster  

Q tal JMiur. Bueno solo utilizaria uno por entrada y los pondria despues de una salto de pagina. Oie pero no se puede forzar a que la imagen no rebase el marco o contenedor?!?! Para mi eso seria lo mejor porq asi no tendria q modificar todas las imagenes, asi como se ajustan las miniaturas estaria bien q se ajustaran las grandes.
Espero sea posible. Gracias y Saludos.

http://quierestenisaquiestan.blogspot.com/

Responder
JMiur  

En el caso de la imagen grande, bastaría que le colocaras la dimensión en el CSS de este modo:

#lasImagenes img {
...
width: valorpx;
height: valorpx;
}

Esto, siempre y cuando las etiquetas IMG no contengan loa atributos width y height como veo que tienen las imágenes pequeñas ya que, en ese caso, las porpiedades definidas en el CSS n oserán tenidas en cuenta.

Tampoco es necesrio dimensionar las imágenes o subir nuevas, si son como las de tu ejemplo y estan subidas a Blogegr o Picasa, tienen este tipo de URL:

https://lh4.googleusercontent.com/..................../s720/nombre.jpg

ese dato que dice s720 indica la imagen a cargar asi que si simplemente cambias ese número por otro, se caragará una de menor tamaño:

https://lh4.googleusercontent.com/..................../s450/nombre.jpg

Responder
TnisMaster  

Oie va quedando bien. Funciono esto de:

#lasImagenes img {
...
width: valorpx;
height: valorpx;
}

Asi ya las imagens adquieren el tamaño q esta en el codigo pero sigue habiendo unos inconvenientes:
La imagen no se coloca arriba (osea esta un poco abajo de donde deberia estar, que es en el centro del marco).
Y por ultimo que cuando se esta cargado la imagen aparece muy abajo del marco y luego se coloca en él.

Velo con tus propios ojos.

http://quierestenisaquiestan.blogspot.com/

Disculpa tantas molestias y espero q haya solucion a mis problemas jeje. Gracias de antemano y Saludos.

Responder
JMiur  

Como te dije antes, las imágenes de tu blog tiene un borde y un padding que debes quitar.

Si estás caruna imagen grande que luego se "achica" con CSS y el script, ocurrirá eso, por so, l ológico en cualquier galería de este tipo es colocar las imágenes del tamaño justo.

Responder
pixeltuxpan.com  

JMiur, Me ah gustado tu galeria solo que no me salio el truco por que no entiendo muy bien donde devo de colocar los codigos :/ me lo podrias explicar mas a fondo?? porfavor te lo agradeceria :D

Responder
pixeltuxpan.com  

JMiur, Mira esta es mi web http://www.pixeltuxpan.com/p/galeria.html no me salio el efecto, yo lo quiero utilizar en post normales ya que quiero hacer varias galerias como le hago ahi??

Responder
JMiur  

Primero, si vas a importar el CSS desde dropbox, no es necesario escribir todo el estilo tal como se ve en ese ejemplo:
#contenedorGaleria { /* es el bloque de toda la galería ............... { }#galAdelante:hover { }
todo eso es innecesario y si quisieras ponerlo, deberías colcocarlo en una etiqueta STYLE

Lo que veo para abajo tiene varios errores pero, sólo estoy viendo el código fuente así que no sé que dice tu post con exactitud; por ejemplo, leo:

div id="lasImagenes"&gt;
a href="javascript:imgNav(-1)" class="galNavegacion" id="galAtras"&gt;

que no tienen el carácter < delante así que no son tomadas como etiquetas y solo se ve ese texto. Debes haber copiado algo mal.

El script tampoco andará si lo escribes así, o sale así, en una sola linea incluyendo los comentarios:

// la lista de imágenes var imagenGaleria = new Array();imagenGaleria[0] = ""; ....

elimina los comentarios, (lo que está luego de // ) o escríbelo en líneas distintas tal como se muestra en esta entrada.

Responder
pixeltuxpan.com  

Eres un Master JMiur! ya me salio n.n
que torpe no estaba conprendiendo muy bien los codigos, Gracias!

Una ultima cosa no me aparecen las flechas de desplazamiento mira: Galeria

Responder
JMiur  

Fíjate en el archivo que has subido a dropbox con el css; ,e aperece que falta un punto y coma en esta parte:

#lasImagenes img {
left: 5px

debería ser:
left: 5px;

Responder
pixeltuxpan.com  

JMiur ya modifique eso y aun no se muestran, aparte yo modifique los colores al .Css a negro y no se muestran tal como quiero :( que es lo que hice mal? te agradeceria tu ayuda, Saludos!

Responder
JMiur  

El archivo al que haces referencia, no es el que estás usando:
http://dl.dropbox.com/u/8243581/GAslideshow.css

Ahora, el archivo es otro:
http://hfcdn1.hostfile.org:13370/stoplinkingdirectly/GAslideshow.css
pero el error es el mismo.

Responder
pixeltuxpan.com  

JMiur Ya resolvi los errores de dedo que tenia, ahora te presumo mi GALERIA modificada espero y te agrade. Muchisimas gracias hombre que seria sin tu ayuda. Saludos!

GALERIA

Responder
JMiur  

Me alegra que se resolviera :D

Responder
PauGenta  

Buenas tardes, tengo un cliente fotógrafo, que me pidió que le ponga un sistema de contraseña a determinadas galerías fotográficas. Esto es posible? Gratis obvio.
Gracias!

Responder
JMiur  

En Blogger eso no es posible; pueden usarse servicios externos y establecerse que cdetermiandos albums son privados pero, todo eso es relativo, desde el momento en que alguien puede verlas, ya se acabó la privacidad porque puede copiarlas y usarlas a su antojo.

En la web, si alguien no quiere que algo sea público, lo mejor es no publicarlo.

Responder
Juanma y tal...  

Pues a mi se me queda con el icono de cargando pero no se me muestran las imagenes si me funcionan las flechas de desplazamiento, alguien sabe por que?

JMiur  

Sin ver tu ejemplo es imposible decirlo.

Juanma y tal...  

Pues lo he copiado tal cual el codigo (modificando las rutas claro esta) , el codigo es el mismo.

JMiur  

Sin verlo es imposible ya que como cualquier otra cosa, el resultado también depende del contexto.

Responder
jose david silva ricardez  

una pregunta para ponerle nombre a las imagenes de la galeria ya sea en la presentacion o en las miniaturas como le deberia de hacer?

ademas como le hago xq me carga la imagen abajo y luego la pone en su lugar, como arreglo eso

JMiur  

La verdad, no sé. Habría que modificar el script y/o el CSS.

Responder
Kenan  

lo andaba buscando como loco Gracias !!

Responder
joha  

Hola.
quiero realizar una galeria de imagenes con slideshow y lightbox, ya la hice cada una por separado pero cuando trato de hacer la galeria con las dos no me funciona, no se si es que no se puede o estoy haciendo las cosas mal... Agradeceria tu ayuda

JMiur  

Tendría que ver tu ejempo y saber qué estás haciendo para intentar responder eso.

Responder
joha  

lo que quiero hacer es una galeria como la de esta pagina.... pero no tengo muy claro com.... pense que utilizando slideshow y lightbox, pero no se como https://www.naddspublicidad.com/#print

JMiur  

Y cuál es tu ejemplo, ¿qué has hecho hasta ahora?

Responder
joha  

el codigo del slideshow lo puedes ver en esta pagina
http://www.scriptiny.com/2008/12/javascript-slideshow/ y el del lightbox
me base en este video http://www.youtube.com/watch?v=p3sF2pq1waw y aqui esta el demo http://tutorialesfullpsd.cixx6.com/project/galeria/. como hago para integrar los dos codigos

JMiur  

Me refería al ejemplo que tú hayas hecho.

joha  

lo q pasa es q yo me base en estos dos ejemplos y lo q quisiera es como unirlos. He intentado hacerlo pero siempre me funciona solo uno, quisiera q me indicaras de q forma puedo hacerlo, de tal forma que funcione todo conjuntamente.

JMiur  

Y eso es justamente lo que pido que muestres, cómo has intentado que funcione, qué has cambiado del script del slideshow para poder integrar el otro; de qué manera se te ha ocurrido que debería hacerse, etc, etc.

Porque para algo así, se debe entender cómo funciona el script y modificarlo de alguna manera. Lo que se ve en el enlace es un script comprimido por lo de tratar de entender que hace es bastante engorroso.

Por todo eso, es que pido que muestres lo que has hecho, funcione o no funcione.

Responder
Ivan Lopez  

Como hago para que no se vean las miniaturas? que solo se vean las imagenes en grande... osea las imagenes y las flechitas que se vean nada mas,... muchas gracias!

JMiur  

Eliminando el DIV contenedorMiniaturas-outter y su contenido además de modificar el script para quitar esa parte. No tiene sentido, deberías buscar otro slideshow distinto ya que hay cientos de ellos en la web.

Responder
Maldonado Landy  

hola JMIUR, muy bien tu ejemplo, soy principiante en esto, y no me funciona queda cargando la galeria podrias explicarme un poco mas, si quieres mira mi ejemplo en http://landymaldonado.comuf.com/1_6_FAQ.html

JMiur  

Para empezar, usas este archivo:
http://hostfile.org/GAslid.js
cuyo contenido es erróneo ya que incluye la etiqueta script y un archivo de tipo .js sólo debe contener código JavaScript.

Maldonado Landy  

podrias explicarme como por favor y disculpa la molestia; y que otro error tengo

JMiur  

En este momento lo veo funcionar y salvo algún problema de CSS que imagino puede corregirse, no veo que haya problemas.

Responder
pablo hernandez Ortiz  

Amigo JMiur tengo unas dudas me cunfundi mi duda es devo de tener 3 archivos en total verdad en html , css y el js lo que no entiendo es com es la estructura del js por que no me reconoce el escript solo es la parte que publicaste nadamas o como es la estructura ? y la llamada se hace desde el html tanto al css y al js ayuda porfa solo es estructura ...

JMiur  

Tendrías que mostrarme qué estás haciendo con exactitud para poder entender el problema.

pablo hernandez Ortiz  

ok JMiur mira primero hice una archivo HTML (tipica estructura) es esta inserte lo de la etiqueta div que contiene la estructura li despues en este mismo archivo dentro de la cabezera head importe el css (no hubo probelmas reconocio el formato de la galeria) despues en otro archivo externo un txt copie y pege el script que publicaste asi como esta no movi nada y guarde el archivo con extension js y el nombre "URL_GAslideshow" por ultimo en el archivo html donde tengo la galeria dentro del head carge el script y lo ejecute... lo que paso es que no me recorre las miniaturas y doy click en alguna y no me muestra la imagen grande correspondiente mi parece que no reconoce el script creo yo que tiene la funcines correspondientes para eso ... o podrias embiarme por correo los archivos si la tienes de ejemplo y ya yo me guio con esos porfa te lo agradeceria mucho pablo...

pablo hernandez Ortiz  

oye mejor te subo el archivo a media fire y te publico la descarga y checas que hacia maso menos vale =) la subo el jueves es que ahorita ando es otros rollos pero si me interesaría aprender me gusta css y javascrip =)...

Responder
mireia ramos castello  

hola!
soy principiante en esto. en el apartado donde hay que agregar las imagenes en grande,
imagenGaleria[2] = "URL_imagen2.jpg";
imagenGaleria[3] = "URL_imagen3.jpg";
imagenGaleria[4] = "URL_imagen4.jpg";

no se importan verdad? porque al importarlas salen un mitad de la web, y si directamente cambio el nombre con el de la imagen que quiero no funciona.
Como pongo la imagen grande?

JMiur  

No entiendo que quieres decir con eso de "importarlas".

Lo que se coloca allí es la dirección url de la imagen que vas a utilizar; la dirección en donde se ha guardado en la web: http://xxxxxxxxxxxxxxxxxxx

Responder
mireia ramos castello  

Perdona las molestias, soy novata y la verdad que si consiguiese hacerlo me salvarias la vida!
vale, no lo habia entendido como url de la imagen, una vez ya la tengo la agrego aqui:



var imagenGaleria = new Array();
imagenGaleria[0] = ""; // dejar en blanco
imagenGaleria[2] = "URL_imagen2.jpg";
imagenGaleria[3] = "URL_imagen3.jpg";

donde pone "url:imagen2" con la direccion de mi url, pero no funciona, no ocurre nada. He probado a hacerlo donde tengo las imagenes en miniatura como imagen de sustitucion y en estado sobre ponerlo la url de la imagen, y obviamente actua como boton normal.
Gracias!

JMiur  

Tendrías que decirme dónde está tu ejemplo para poder verlo online.

Responder
Vero isbet  

ejecute el archi y no me sale la imagen grande alguna recomendacion?? lo monte en asp. net

JMiur  

Sin ver tu ejemplo es imposible saber nada.

Responder
Estela H.  

Buen dia gran señor, felicito su compromiso con los demas, podria porfavor decirme como incluir esto en codigo html para ser usado directamente en Mercadolibre? de ser posible podria mostrarme un ejemplo completo?
Gracias

Responder
Estela H.  

Buen dia sr, felicito y agradesco su compromiso con las personas.
Podria porfavor indicarme como puedo incluir esto en codigo html de la pagina de Mercadolibre? podria darme el ejemplo final solo del codigo html si acaso se puede?
Muchas gracias

JMiur  

Dudo que pueda hacerse. Tendrías que consultar en el sitio mismo cuáles son las posibilidades disponibles. Por razones de seguridad, no creo que admitan el uso de scripts.

Responder
Marti Soler  

Un saludo y gracias anticipadas. Como buen novato te hago la siguiente pregunta: "ahora establecemos los datos del script en blogger" exactamente donde tengo que insertar el código ??

Lo mismo me sucede cuando indicas" por último cargamos el script y lo ejecutamos" donde tengo que insertar ese código ???
Muchas gracias. Tu blog me está resultando de gran ayuda aunque hay temas a los que "no llego" por mi bajo nivel. Muy agradecido.

JMiur  

En la entrada se ndica la forma de agregar cada cosa en un post:

Creamos un post cualquiera y nos colocamos en el modo Edición HTML. Primero que nada, necesitamos insertar el CSS; esto, en Blogger, lo hacemos importándolo ...

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