fancybox galeria de imagenes con una Imagen
La Mayoria de diseñadores o desarrolladores alguna vez hemos utilizado el fabulozo fancybox Su página oficial es:FancyBox
No voy a explicar su uso ya que eso esta muy bien explicado por toda la red, pero lo que si voy a explicar es como usar una sola imagen para mostrar varias imagenes con fancybox, ya que eso no es muy claro
Primero el HTMl asi ke en la cabecera (
) ponemos los codigos necesarios para cargar el Fancy box asi :<link type="text/css" class="fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" media="screen" /> <script type="text/javascript" src="/img/spacer.gif">
Una vez acabado con la cabecera en el body aplicamos un simple link. Algo asi como esto :
<a id="galeria" class="javascript:;" title=""><img src="/img/spacer.gif">Este codigo le indica al navegador que al hacer clik sobre el Div “galeria” llame al FancyBox, pero con los paremetros que le hemos configurado en el Script de abajo.
<script type="text/javascript"> $(document).ready(function(){ $("#galeria").click(function() { $.fancybox([ 'farm7.static.flickr.com/6145/5959495794_24bf75f750_z.jpg', 'farm7.static.flickr.com/6014/5959496794_8204d68b54_z.jpg', 'farm7.static.flickr.com/6029/5959497570_5de855a97e_z.jpg', { 'title' : 'PP-Kuy Super Star', 'href' : 'farm7.static.flickr.com/6024/5959498482_33ffc416cf_z.jpg', }, { 'href' : 'farm7.static.flickr.com/6125/5958937859_da6a4d4370_z.jpg', 'title' : 'Titulo con Link <a id="galeria" class="rogersoto.com" title="prubea">a Roger Soto</a>', }, ], { 'title' : 'PP-Kuy', 'padding' : 0, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'image', 'changeFade' : 0 }); }) }); </script>Podemos apreciar que en las tres primeras imagenes usan el titulo por defecto, que hemos configurado junto con las transiciones, y que luego a dos imagenes le hemos cambiado el titulo, esto obedece a las que estan entre llaves, tiene que trabajar en par, es decir imagen, y titulo entre llaves, para que funcione.
como nota aparte se puede usar html en el titulo, incluso hasta un link.Si quieres ver como quedo el ejemplo dale click aky!!!
.
10 Comentarios
-
-
Roger Soto Diseño Web 14 septiembre, 2011 a las 11:16
En Teoria ese Bug de IE8 habia desapareciondo con la version 1.3.4, pero al parecer no es asi, la unica solucion probada, era dimencionar manualmente las imagenes algo asi:
jQuery(‘#example’).fancybox({
‘titlePosition’ : ‘inside’,
‘overlayOpacity’ : ’0′,
‘autoDimensions’ : false, /* estas tres lineas son importantes */
‘width’ : 610,
‘height’ : 130
});Espero te sirva.
Responder
-
-
Vizaq 26 septiembre, 2011 a las 8:33
Hola Roger, gracias por esto!
ya lo estoy usando!
Ahora no se porque no me funciona online, en mi pc lo veo perfecto pero online no pasa nada, podrá no ser compatible con algún otro java? En ninguno de los diferentes navegadores anda.
Gracias!
Saludos!Responder-
Diseño Web Roger Soto 26 septiembre, 2011 a las 9:17
Bonita pagina Dr. Vizaq
la verdad sin ver el codigo es un poko dificil saber la causa del problema,
pero lo ke usualmente da problemas son las llamadas referenciales. es decir si llamas la imagen desde ../imagenes/miimage.jpg, a veces no lo encuentra prueba con imagenes/miimages.jpg,(depende desde donde llamas a la imagen) o en su defecto hasle llamadas absolutas es decir “miweb.com/imagenes/miimage.jpg
pruebalo y ojala te sirvaResponder
-
-
daniel 26 octubre, 2011 a las 17:44
Genial, pero como puedo hacer que detecte una carpeta de imagenes especifica y me muestre todas las imagenes de esta?
Responder-
Diseño Web Roger Soto 26 octubre, 2011 a las 17:53
Eso el Fancy box solo no lo va a hacer,
pero, pueder aplicar java script o php. esta galeria fotografica usa php para mostrar todas las images de una carpeta, pero no usa fancy box, si te interesa me avisas y te explico como.Responder
-
-
michael 1 diciembre, 2011 a las 23:48
hola roger sabes como puedo poner estaticas las flachas del fancybox tal cual como la imagen de cerrar?
Responder-
Diseño Web Roger Soto 2 diciembre, 2011 a las 12:55
Michel, lo que hay que hacer es modificar el css de fancy box, para que se adapte a tus requerimientos, quise hacer algo rapido pero se descuadraban las flechas, pero la solucion esta en el css, buena tu pagina web. Suerte
Responder
-
-
leobardo 9 diciembre, 2011 a las 16:48
copie tu ejemplo y lo adapte a mis necesidades, pero al dia de hoy ya no funciona
y el de tu pagina funciona perfectamenteResponder-
Diseño Web Roger Soto 9 diciembre, 2011 a las 18:11
Que Bien que te haya servido el codigo, pero si antes funcionaba y ahora ni, lo mas problable es que hayan cambiado algunos links de la imagenes, te recomiendo que verifiques el link de cada una de las imagenes o verifique si has actualizado el jquery o fancy box, y si estas actualizaciones son compatibles, aun asi deberia funcionar.
Gracias por seguirnos!!!Responder
-
Que opinas de esto?
por que en ie 8 tiene problemas con fancybox/jquery.fancybox-1.3.4.css