Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Sin Resultado
Ver Todos los Resultados
Tutorial Monsters - Diseño Web, Photoshop, Wordpress, CSS, Lightroom
Sin Resultado
Ver Todos los Resultados
Home CSS

FancyBox

7 junio, 2012
en CSS
0
FancyBox
Share on FacebookShare on Twitter

Resumen del Contenido

  • ¿Qué es FacnyBox?
  • Características
  • Como utilizar
    • 1. Primero, asegurarse que utilizas un  DOCTYPE válido
    • 2. Incluir los ficheros JS necesarios
    • 3. Añadir el fichero CSS de FancyBox
    • 4. Crear enlaces (a href)
  • Descarga y Manuales

¿Qué es FacnyBox?

FancyBox es una herramienta para la visualización de imágenes que flota sobre una página web. Está construido con la librería jQuery bajo licencia MIT y GPL. Que podemos utilizarlos

Características

  • Puede mostrar imágenes, elementos HTML, vídeos SWF, iframes y las solicitudes también se Ajax
  • Personalizable a través de la configuración y CSS
  • Grupos relacionados con los elementos y añade navegación.
  • También es posible utilizar eventos para la rueda del ratón
  • Transiciones
  • Añade una gota de sombra agradable con el tema del zoom

Como utilizar

1. Primero, asegurarse que utilizas un  DOCTYPE válido

El obligatorio para que FancyBox funcione correctamente

2. Incluir los ficheros JS necesarios

Descarga jQuery desde CDN (Content Delivery Network), recomendado para disponer de la última versión revisada.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

El primer fichero se descarga directamente del api de google y el segundo fichero tienes que copiarlo a la carpeta fancybox de tu directorio raíz

Opcional: añadir transiciones con jQuery, por defecto solamente soporta «swing» and «linear»

<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>

Opcional:añadir eventos para la rueda del ratón y navegar al girar la rueda

<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

3. Añadir el fichero CSS de FancyBox

Comprobar las rutas de las imágenes sino se mantiene la misma estructura de directorios, edita la hoja de estilos y comprueba


4. Crear enlaces (a href)

Images

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt="" /></a>

Inline content: para contenido en otras url

<a id="inline" href="#data">This shows content of element who has id="data"</a></pre>
<div style="display: none;">
<div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<pre>

Iframe

<a href="http://www.example?iframe">This goes to iframe</a>
 o
<a href="http://www.example">This goes to iframe</a>

Ajax

<a href="http://www.example/data.php">This takes content using ajax</a>

Opcional – Utiliza el atributo de título para los anclas, para mostrar una leyenda

5. Modificar jQuery, si te atreves

En este caso, para los que ya conocen jQuery pueden modificar los parámetros, por ejemplo

$(document).ready(function() {
 /* This is basic - uses default settings */
 $("a#single_image").fancybox();
 /* Using custom settings */
 $("a#inline").fancybox({ 'hideOnContentClick': true });
 /* Apply fancybox to multiple items */
 $("a.group").fancybox({
 'transitionIn' : 'elastic',
 'transitionOut' : 'elastic',
 'speedIn' : 600,
 'speedOut' : 200,
 'overlayShow' : false
 });
 });

Nota: Las galerías creadas a partir de un mismo elemento tienen que tener el mismo «rel» como etiqueta, por ejemplo:

</pre>
/* HTML */
<a href="image_big_1.jpg" rel="group1"><img src="image_small_1.jpg" alt="" /></a>
<a href="image_big_2.jpg" rel="group1"><img src="image_small_2.jpg" alt="" /></a>
<a href="image_big_3.jpg" rel="group2"><img src="image_small_3.jpg" alt="" /></a>
<a href="image_big_4.jpg" rel="group2"><img src="image_small_4.jpg" alt="" /></a>
/* Con esto crearás dos galerías */
$("a.grouped_elements").fancybox();

Descarga y Manuales

  • Version 1.3.4 (2010/11/11)
Etiquetas: cssfancyBox
ANUNCIO
Post anterior

Galería de imágenes en php

Próximo Post

WordPress 3.4 «Green». Disponible la versión final

Otros Posts

Reglas CSS por defecto para los navegadores

Selectores y propiedades más usadas en CSS3

10 febrero, 2016
1

Los selectores son lo que definen sobre qué elementos se aplican las reglas. Pueden ser una combinación de: Nombre de etiquetas HTML Nombres de clases, precedidos por carácter “.” Identificador de elemento, precedido por carácter...

Novedades con Bootstrap 3

Novedades con Bootstrap 3

28 octubre, 2013
0

Com ya sabemos, Bootstrap es una herramienta con un montón de funciones de HTML y CSS que te permitirán usar muchas de sus novedades, ya que te dará tipografía estilizada, botones, formularios, tablas, navegación, y...

Recomendados

¿Le interesa a mi empresa una estrategia de inbound marketing?

¿Le interesa a mi empresa una estrategia de inbound marketing?

27 mayo, 2021
Web semantica con HTML5

HTML5 Cheat Sheet

6 agosto, 2012
Reglas CSS por defecto para los navegadores

Ejemplos con Div

31 mayo, 2011
Manual HTML: Cómo crear y hacer tablas en HTML (con ejemplos prácticos)

Manual HTML: Cómo crear y hacer tablas en HTML (con ejemplos prácticos)

13 febrero, 2011

Tutotial Monsters

Somos un equipo creativo apasionado por brindar los mejores recursos gratuitos y premium a la comunidad de diseño.
PADAWAN

  • Home
  • Política de privacidad
  • Política de Cookies
  • Aviso Legal
  • Contactar

© 2020 Tutorial Monsters - Estamos para Colaborar SEOConsultora.

Sin Resultado
Ver Todos los Resultados
  • Html5
  • CSS3
  • PHP
  • Photoshop
  • WordPress
  • SEO
  • eCommerce
  • Marketing
  • Store
Este sitio web utiliza cookies. Al continuar utilizando este sitio web, usted da su consentimiento para que se utilicen cookies. Visite nuestra Política de privacidad y cookies .