Feliz Navidad 2011

El Mejor Regalo de Navidad es una sonrisa.. X eso Aqui esta la Mia !!!

Feliz Navidad para todos nuestros Fans, Amigos, Clientes y todos los seres que aman.

fancybox galeria de imagenes con una Imagen

Jul 27, 2011   //   by Diseño Web Roger Soto   //   Programacion  //  20 Comments

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 osea fancybox galeria de imagenes con una Imagen, 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" href="fancybox/jquery.fancybox-1.3.4.css"  rel="stylesheet" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

Una vez acabado con la cabecera en el body aplicamos un simple link. Algo asi como esto :

<a id="galeria" href="javascript:;" title=""><img src="http://farm7.static.flickr.com/6014/5959496794_8204d68b54_m.jpg" /></a>

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([
			'http://farm7.static.flickr.com/6145/5959495794_24bf75f750_z.jpg',
			'http://farm7.static.flickr.com/6014/5959496794_8204d68b54_z.jpg',
			'http://farm7.static.flickr.com/6029/5959497570_5de855a97e_z.jpg',
			{
				'title'	: 'PP-Kuy Super Star',
				'href'	: 'http://farm7.static.flickr.com/6024/5959498482_33ffc416cf_z.jpg',
				

			},
			{
				'href'	: 'http://farm7.static.flickr.com/6125/5958937859_da6a4d4370_z.jpg',
				'title'	: 'Titulo con Link <a id="galeria" href="http://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!!!

20 Comentarios

  • por que en ie 8 tiene problemas con fancybox/jquery.fancybox-1.3.4.css

    • 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.

  • 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!

    • 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 «http://miweb.com/imagenes/miimage.jpg
      pruebalo y ojala te sirva

  • Genial, pero como puedo hacer que detecte una carpeta de imagenes especifica y me muestre todas las imagenes de esta?

    • 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.

  • hola roger sabes como puedo poner estaticas las flachas del fancybox tal cual como la imagen de cerrar?

    • 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

  • copie tu ejemplo y lo adapte a mis necesidades, pero al dia de hoy ya no funciona
    y el de tu pagina funciona perfectamente

    • 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!!!

  • Gracias por el aporte, me estaba quemando la cabeza!!! saludos!!

  • Gracias ROGER… excelente aporte.. !! he modificado un poco el codigo para amoldarlo a mis necesidades pero estuvo excelente la explicación…. Roger una pregunta… Me puedes explicar o hacer un post de como uno puede dibujar graficas con JQuery?.. se que existe en HTML5.. pero no lo necesito así.

  • Gracias a TvCelulares !!! <-- que bueno que te sirvio. Romy Bompart que exelente propuesta, aunque ultimamente tengo en borrador varias ayudas para wordpress, pero en definitiva creo que el siguiente post de codigo a a se con graficos estadisticos en jquery por ahora si la solucion te urge te recomiendo seguir este link https://chart.googleapis.com/chart?cht=p3&chd=t:60,40&chs=350×100&chl=Me%20gusta|Me%20gusta%20mucho

    y como lograrlo aki
    http://code.google.com/intl/es/apis/chart/image/

    Espero te sirva mientras escribo algo sobre el tema

  • no funciona

    • Tienes Razon!! estuve haciendo cambios en la web y perdio una referencia la corrijo en este instante.

  • amigo, y si esto utilizando WordPrees, ¿Cómo puedo usarlo? es igual que en html o qué me recomiendas?

  • Muchas gracias por la aportación, me sirvió de mucho. La implementaré dentro de poquito en esta web que tengo de pruebas. Ya por contarte mi vida, aunque le he puesto ‘cyclic’:false, y sigue haciéndome el ciclo.

    P.D: La web final será como la original pero sin el «.esy»
    P.P.D: Me encanta las imágenes que has utilizado para el ejemplo 😛 jejeje

  • Excelente ayuda! me anduvo perfecto en un proyecto «vacio»..
    Cuando intente meterlo en un proyecto mas complejo no me anda.

    Estoy casi seguro que es por que ya tengo incluidas otras versiones de Jquery, como soluciono el conflicto?

    o como hago tu ejemplo con la version mas nueva de fancybox??

    Desde ya muchas gracias!

Que opinas de esto?