Galería lightbox. Cambiar parámetros

ceaped · #1 (**permalink**) 02/09/2011, 07:41

Buenos días para todos.

Estoy utilizando esta galería:

http://www.no-margin-for-errors.com/.../#!prettyPhoto

Cuando se carga la imagen aparecen 2 iconos de Twitter y Facebook, tres cosas:

1. Como cambie el icono de Twitter por flickr.
2. Como puedo cambiar la ruta de esos enlaces.
3. Como se pueden eliminar.

Gracias por su ayuda

Naahuel · #2 (**permalink**) 03/09/2011, 21:38

La documentación del plugin está pésimamente presentada: http://www.no-margin-for-errors.com/...documentation/

Aparentemente utiliza un parámetro llamado social_tools. Ahí podés presentar vos tu propio enmarcado HTML para usar los botones que quieras. Ejemplo:

Código Javascript:

Ver original$("a[rel^='prettyPhoto']").prettyPhoto({
    social_tools: '<div class="pp_social"><div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="http://www.facebook.com/plugins/like.php?locale=en_US&href='+location.href+'&amp;layout=button_count&amp;show_faces=true&amp;width=500&amp;action=like&amp;font&amp;colorscheme=light&amp;height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div></div>' /* html or false to disable */
});

Fijate que ese es el enmarcado por defecto. Podés usar lo que vos quieras (false para desactivar):

Código Javascript:

Ver original$("a[rel^='prettyPhoto']").prettyPhoto({
    social_tools: false
});

O lo que vos quieras:

Código Javascript:

Ver original$("a[rel^='prettyPhoto']").prettyPhoto({
    social_tools: '<div><a href="http://www.google.com">Ir a google</a></div>'
});

ceaped · #3 (**permalink**) 13/09/2011, 19:26

Hola Naahuel. Gracias por tu respusta.
Me indicas donde localizo este parametro "social_tools"?, no logro ubicarlo.
En el HTML no está dentro del script javascript.

Gracias por tu ayuda

Naahuel · #4 (**permalink**) 13/09/2011, 19:44

Cita:

Iniciado por ceaped

Hola Naahuel. Gracias por tu respusta.
Me indicas donde localizo este parametro "social_tools"?, no logro ubicarlo.
En el HTML no está dentro del script javascript.

Gracias por tu ayuda

...

Naahuel · #5 (**permalink**) 13/09/2011, 19:46

Mostrame cómo estás utilizando el plugin. Ese parámetro es opcional, si no pasás nada entonces te pone esos botones.

Si vos le pasás ese parámetro con tus botones o bien false, entonces lo vas a poder manejar.

ceaped · #6 (**permalink**) 15/09/2011, 06:52

Hola Naahuel

Dentro del <head> pongo este código:

Cita:

Pero no veo que haga referencia a ningún botón como me indicas.
Y no logro localizar dentro de la carpeta "image" los iconos de Facebook y Twiter, no se como se cargan (te digo lo de los iconos porque pense ubicar en el css la ruta hacia estos iconos pero hummm no la veo...jejeje).

Gracias por tu ayuda

Naahuel · #7 (**permalink**) 15/09/2011, 09:01

Y tenés que agregar el parámetro a cada llamado que hacés a .prettyPhoto().

Un ejemplo con los primeros:

Código Javascript:

Ver original$("area[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'li ght_square',slideshow:3000, autoplay_slideshow: true,social_tools: false});
$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:1 0000, hideflash: true,social_tools: false});

Eso quitaría los botones. Si querés usar botones propios, tenés que definir tu HTML. Algo así:

Código Javascript:

Ver originalvar social_HTML = '<div><a href="http://www.google.com.ar/">Google</a></div>';
$("area[rel^='prettyPhoto']").prettyPhoto({social_tools: social_HTML});
$(".gallery:first a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'normal',theme:'li ght_square',slideshow:3000, autoplay_slideshow: true,social_tools: social_HTML});
$(".gallery:gt(0) a[rel^='prettyPhoto']").prettyPhoto({animation_speed:'fast',slideshow:1 0000, hideflash: true,social_tools: social_HTML});

Está todo en la documentación del plugin. Leé ahí :)

ceaped · #8 (**permalink**) 15/09/2011, 15:03

Hola Naahuel

Funciono muy bien.

Yo te pregunto algo más:

Cita:

Cuando se carga la imagen aparecen 2 iconos de Twitter y Facebook, tres cosas:

1. Cual es el beneficio de ponerle enlaces a Twitter y Facebook sí ya tengo la galéria en el sitio Web?.

2. A mayor número de enlaces las posibilidades que encuentren mi sitio o imagen?.

3. Yo tengo perfiles en Facebook y Flirck. Es útil relacinar, enlazar la imagen del sitio Web con Facebook y Flirck, porque?

Aunque ya hice esta pregunta en el foro te pregunto a ti si sabes que beneficio tiene poner enlaces.

Gracias por tu ayuda.

ceaped · #9 (**permalink**) 28/09/2011, 06:23

Hola Naahuel
Nuevamente a hacerte 2 preguntas:

1. Como haga para detener el play de las fotos?. Ellas cuando son un grupo tienen un play y stop, yo deseo que se inicie en stop. Como lo hago?.

2. Cuando uno carga la imagen, en la parte superior se muestra un texto, pero solo se queda viendo en la primera en las demas no. te pongo un ejemplo:

Cita:

<a href="images/01_img.jpg" rel="prettyPhoto[galeria1]" title="nombre imagen">
<img src="images/01_img_min.jpg" alt="nombre imagen" />TÍTULO SOBRE LA IMAGEN 1</a>

<a href="images/01_img.jpg" rel="prettyPhoto[galeria1]" title="nombre imagen">
TÍTULO SOBRE LA IMAGEN 2</a>

ÍTULO SOBRE LA IMAGEN 1
ÍTULO SOBRE LA IMAGEN 2 Ya en esta no me aparece el título.

Gracias por tu ayuda

Naahuel · #10 (**permalink**) 28/09/2011, 06:30

De nuevo te muestro el link de la documentación:
http://www.no-margin-for-errors.com/...documentation/

Hay dos parámetros que tienen que ver con autoplay:
autoplay_slideshow y autoplay.

Ninguno parece ser lo que buscás igual. Probando los demos de galerías en el página noté que no inician automáticamente...

Y el 2 no sé. Según los demos, el título lo toma del atributo alt de la imagen.

ceaped · #11 (**permalink**) 28/09/2011, 08:45

Hola Naahuel.
Gracias si yo tenia en "true" autoplay, pero ya lo puse en false y funciono.

Con respecto a lo otro si tengo ese problema con el título que sale sobre la imagen pues el lo toma del atributo "alt" y como yo solo pongo una imagen por grupo solo me sale en la primera, te muestro como está en la galería y como lo implemento:

Cita:

Y así lo utilo yo:

Cita:

Se me ocurre algo. Hay forma que en vez que me tome el parametro "alt" me tome el parametro "title".

Gracias por tu ayuda

Naahuel · #12 (**permalink**) 28/09/2011, 08:51

¿Y por qué no podés ponerle el mismo alt a todas las imágenes? Eso haría que el título de arriba siempre sea el mismo.

ceaped · #13 (**permalink**) 28/09/2011, 13:09

Hola Naahuel.
Porque solo pongo por grupo una imagen en miniatura así:

Cita:

Por este grupo de estas 3 imagenes tengo una imagen que es la que contiene el alt="Título superior", para las demás no me quedan con el "alt".

Gracias por tu ayuda

ceaped · #14 (**permalink**) 04/10/2011, 17:05

Hola Naahuel

Como hago para combinar Lightbox + mootools. Que adentro del acordeón tenga texto e imagenes que se carguen con efecto Lightbox.

Hice un ejercicio el cual no me funciona.

Mira los archivos:

http://www.megaupload.com/?d=91RHFEPX

Gracias por tu ayuda

Omura · #15 (**permalink**) 05/10/2011, 20:10

yo justo estoy haciendo pruebas con la misma galería

el tema de mantener el mismo titulo para todas las imágenes lo puedes solucionar poniéndole un gif transparente de 1px para tener acceso al alt=""

<a href="images/fullscreen/1.jpg" rel="prettyPhoto[pp_gal]" title="Título"><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Título superior" /></a>

<a href="images/fullscreen/2.jpg" rel="prettyPhoto[pp_gal]" title="Título"><img src="mages/thumbnails/x.gif" alt="Titulo superior" /></a>

<a href="images/fullscreen/3.jpg" rel="prettyPhoto[pp_gal]" title="Título"><img src="images/thumbnails/x.gif" alt="Titulo superior" /></a>

ceaped · #16 (**permalink**) 06/10/2011, 05:40

Hola Omura
Gracias por tu aporte.

Te pregunto tu sabes como combinar Lightbox + mootools. Ahí puse en ejemplo en cual no me funciona.

Gracias por tu ayuda

ceaped · #17 (**permalink**) 17/10/2011, 07:56

Hola Omura
Siguen mis preguntas, que pena pero mira en el ejemplo ponen unos botones "light_square" y se ven otros en el ejercicio. Yo deseo utilizar los que se ven en el ejemplo. Se encuentran en la carpeta...prettyPhoto > images > default (estos son los que se ven en el ejercicio). Ahora yo hago una trampita y yo pego estos botones que hay en la carpeta "default" a la carpeta ight_square, pero se ven mal.

Y por último yo pongo el título y demás textos desciptivos de la imagen, pero si es un poco larga el texto no queda alineado, se pone debajo de los botones play y stop.

gracias por tu ayuda

Omura · #18 (**permalink**) 17/10/2011, 15:00

no tengo el código a la mano pero que recuerde esa galería viene con varias plantillas y cada una con sus respectivos botones, digamos default, light_square, y creo que otras 3 o 4 opciones mas, la galería que quieras usar si no lo defines al momento de crearla, me parece que lo puedes especificar en el código javascript que pegas en tu web, mas tarde le doy una mirada y te digo, ahora lo del texto no lo he probado, pero... que tan largo es el texto y de que tamaño son las imágenes que usas.

ceaped · #19 (**permalink**) 25/10/2011, 13:05

...

No logro resolver lo que subí y para colmos ahora tengo más problemas.

La cosa fue que cogí exactamente el ejercicio que ponen, mire el código en el index.html y no se como poner esos botones que están ahí.

El la Gallery 2 pone un borde negro redondeado que tampoco se como lo pone

Además sucede otro problema cuando se amplía la imagen a lo alto se daña en la parte inferior, se ve blanco.

Subo el ejemplo que trae la geleria y pongo en gallery 2 la última foto un ejemplo de una imagen alargada:

http://www.megaupload.com/?d=GGF8UGHN

Por favor si me puede ayudar les estaré muuuuuyyyy agradecido