Muro de fotografias estilo google plus con jQuery

Este maravilloso plugin javascript le permite crear una fantastica galería de fotos o muro de fotos estilo google plus.

Enlaces patrocinados:



Comentarios

ricardo:
2012-01-01 17:01:50

Muy interesante la galería.Ademas que incorpora botones sociales

Alejandro Santiago:
2012-01-04 20:01:27

Fantástico... es todo un derroche de calidad.

arise83:
2012-01-23 11:01:53

hola,
estoy un poco pez en esto y queria saber como asociar este codigo a mi galeria de picasa,
intento sustituir la direccion que viene por la mia pero no se qhago mal ya que no me sale, igual es una tonteria pero tampoco ando muy puesto en el tema, a ver si me podiais ayudar, gracias

Giovanni Alberto:
2012-01-30 13:01:53

Por favor alguien que me diga como anexar imágenes propias a esa galería, por favorr es que es tan genial ! :(

chabeluka:
2012-04-29 23:04:38

caray pues ya somos varios :( nomas no encuentro como hacer que funcione pero con las fotos de mi carpeta :( si alguien sabe la solución le agradecería mil que pasara el tip.

Saludos a todos :)

PD: me encanta su sitio :)

drbafle:
2012-05-08 09:05:04

Como puedo modificar este script para que no me cargue las fotos desde picasa? he estado mirando la parte de la URL de picasa, pero no se ni por donde empezar...

doña preciosa:
2012-11-07 18:11:02

Deben configurar el álbum como "público en la web"

BCarrasco:
2013-04-25 15:04:34

existe la posibilidad de cambiar las fotos???

Maxi:
2013-05-21 11:05:55

Usando este script en el hmtl en vez de que se encuentra en el archivo van a poder cargar imagenes de una carpeta de uds... Miren que lo que hace es cargar un array al que le pasa el id de la imagen y las rutas del la imagen pequeña, la del zoom al pasar el mouse y el de la imagen en grande... Quizas puedan modificarlo para cargarle los datos por medio de un xml para no hacer un script muy extenso en caso de ser muchas imagenes.


<script type="text/javascript">
$(document).ready(function(){
PhotoWall.init({
el: '#gallery' // Gallery element
,zoom: true // Use zoom
,zoomAction: 'mouseenter' // Zoom on action
,zoomTimeout: 500 // Timeout before zoom
,zoomDuration: 100 // Zoom duration time
,showBox: true // Enavle fullscreen mode
,showBoxSocial: true // Show social buttons
,padding: 10 // padding between images in gallery
,lineMaxHeight: 150 // Max set height of pictures line
// (may be little bigger due to resize to fit line)
});

/*

Photo object consist of:

{ // big image src,width,height and also image id
id:
,img: //src
,width:
,height:
,th:{
src: //normal thumbnail src
zoom_src: //zoomed normal thumbnail src
zoom_factor: // factor of image zoom
,width: //width of noraml thumbnail
,height: //height of noraml thumbnail
}
};

*/

var PhotosArray = new Array(
{id:1,img:'img_big1.jpg',width:500,height:400,
th:{src:'img_small1.jpg',width:50,height:40,
zoom_src:'img_zoomed1.jpg',zoom_factor:4
}
},
{id:2,img:'img_big2.jpg',width:500,height:400,
th:{src:'img_small2.jpg',width:50,height:40,
zoom_src:'img_zoomed2.jpg',zoom_factor:4
}
},
{id:3,img:'img_big3.jpg',width:500,height:400,
th:{src:'img_small3.jpg',width:50,height:40,
zoom_src:'img_zoomed3.jpg',zoom_factor:4
}
},
{id:4,img:'img_big4.jpg',width:500,height:400,
th:{src:'img_small4.jpg',width:50,height:40,
zoom_src:'img_zoomed4.jpg',zoom_factor:4
}
}
);

PhotoWall.load(PhotosArray);
});

</script>

killerz:
2013-07-25 14:07:00

gracias maxi era lo que necesitaba

Jonatan:
2014-09-18 12:09:53

He ido al codigo, y sinceramente no tengo ni idea como se hace, y ya he puesto varios sliders de esta web, pero este me pierde.

Como se haria

Designer Man:
2015-01-29 16:01:28

Buenas, Por favor alguien que me ayude a saber COMO pongo mi galeria de picasa para poder ver mis imagenes he intentado todo lo que se y todavia nada, quiero mostrar mi galeria picasaaaa por favorrr , es imposiblee??? :(

Deje un Comentario
[Opcional]
(No se mostrará en el sitio)
[Opcional]
[Opcional]

Ultimos Comentarios

jhonydepp dijo:

excelente recurso gracias por compartirlo

monipodio dijo:

Tu pagina es un horror,... o no es compatible con Chrome, no pude ver absolutamente nada, ni código fuente ni demostrativo. ...

candy neyra dijo:

como puedo obtener el codigo para implementar

Ramesh Sampangi dijo:

Really nice post. I liked it. Keep sharing some more posts again quickly! <a href="https://aipatasala.com/courses/DS@HYD/Data-Science-Course-in-Hyderabad">Data ...

teja aswani dijo:

This is a well-written article. I read the material and found it to be extremely beneficial. Thank you for sharing this information. ...

Artificial Intelligence course in Chennai dijo:

I really enjoy every part and have bookmarked you to see the new things you post. Well done for this excellent article. Please ...

AWS Training in Hyderabad dijo:

Excellent pieces. Keep posting such kind of info on your blog. I?m really impressed by your site. <a href="https://www.kellytechno.com/Hyderabad/Course/amazon-web-services-training">AWS ...

www.amazon.com/mytv dijo:

<a href="https://sites.google.com/view/avgcomenusactivation/" rel="dofollow">avg.com/retail</a> <a ...

Brajput123 dijo:

<a href="https://www.amzoncamzon.com/"> Amazon.com mytv </a> - you merely unboxed a fresh ...