La plataforma Futudownloads está en desarrollo.

13 abr. 2012

Fancybox: Ventanas modales multimedia en Blogger

Hay un plugin para Jquery llamado Fancybox el cual muchos sitios estan utilizando, sitios como MCAnime.net y otros.
esto funciona como Shadowbox solo que Fancybox tiene una interfaz más compleja y más estilo.
  • para agregar esto en Blogger sigue los siguientes pasos.
  • Ve a Plantilla Luego has click en Edicion de HTML.
  • Luego expande plantilla de artilugios y busca la etiqueta </head>.
  • y encima de ella pega lo siguiente.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/fancybox/jquery-1.4.3.min.js'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/fancybox/jquery.mousewheel-3.0.4.pack.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/fancybox/jquery.fancybox-1.3.4.pack.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/53097108/ihojosestudios/example/fancybox/jquery.fancybox-1.3.4.pack.js' type='text/javascript'/>
<link href='http://dl.dropbox.com/u/53097108/ihojosestudios/example/fancybox/jquery.fancybox-1.3.4.css' media='screen' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
// IJ tutorials
//<![CDATA[
        $(document).ready(function() {
            /*
            *   Estilos - imagenes
            */

            $("a#fancy1").fancybox();

            $("a#fancy2").fancybox({
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'elastic'
            });

            $("a#fancy3").fancybox({
                'transitionIn'    : 'none',
                'transitionOut'    : 'none'   
            });

            $("a#fancy4").fancybox({
                'opacity'        : true,
                'overlayShow'    : false,
                'transitionIn'    : 'elastic',
                'transitionOut'    : 'none'
            });

            $("a#fancy5").fancybox();

            $("a#fancy6").fancybox({
                'titlePosition'        : 'outside',
                'overlayColor'        : '#000',
                'overlayOpacity'    : 0.9
            });

            $("a#fancy7").fancybox({
                'titlePosition'    : 'inside'
            });

            $("a#fancy8").fancybox({
                'titlePosition'    : 'over'
            });

            $("a[rel=example_group]").fancybox({
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'titlePosition'     : 'over',
                'titleFormat'        : function(title, currentArray, currentIndex, currentOpts) {
                    return '<span id="fancybox-title-over">Imagen ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
                }
            });

            /*
            *   Examples - various
            */

            $("#various1").fancybox({
                'titlePosition'        : 'inside',
                'transitionIn'        : 'none',
                'transitionOut'        : 'none'
            });

            $("#various2").fancybox();

            $("#various3").fancybox({
                'width'                : '75%',
                'height'            : '75%',
                'autoScale'            : false,
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'type'                : 'iframe'
            });

            $("#various4").fancybox({
                'padding'            : 0,
                'autoScale'            : false,
                'transitionIn'        : 'none',
                'transitionOut'        : 'none'
            });
        });
//]]>
</script>
  •  Y luego guardas.
  • Ahora cuando vallas a hacer una entrada podras hacer cosas como lo siguiente.
Imagen que se desvanece al cerrar.

<a id="fancy1" href="URL de la imagen"><img src="URL de la miniatura" /></a>

Imagen que hace Zoom al habrir y se minimiza al cerrar

<a id="fancy2" href="URL de la imagen"><img src="URL de la miniatura" /></a>

Imagen que se habre y cierra sin animacion

<a id="fancy3" href="URL de la imagen"><img src="URL de la miniatura" /></a>

Imagen que hace Zoom al habrir pero cierra sin animacion

<a id="fancy4" href="URL de la imagen"><img src="URL de la miniatura" /></a>

Imagen con Closed Caption

<a id="fancy5" href="URL de la imagen" title="Aqui escribe el Closed caption"><img src="URL de la miniatura" /></a>

Imagen con Closed Caption mas extendido y fondo más oscuro

<a id="fancy6" href="URL de la imagen" title="Aqui vendrá el texto de closed caption extendido donde puedes hacer varios renglones de escrito"><img src="URL de la miniatura" /></a>

Imagen con Closed Caption en el marco de la imagen

<a id="fancy7" href="URL de la imagen" title="Aqui vendra el Closed Caption"><img src="URL de la miniatura" /></a>

Imagen con Closed Caption en la imagen

<a id="fancy8" href="URL de la imagen" title="Aqui vendra el Closed Caption"><img src="URL de la miniatura" /></a>

Galeria de imagenes con Closed Caption


<a rel="example_group" href="URL de la imagen 1" title="Aqui vendra el Closed caption"><img alt="" src="URL de la miniatura 1" /></a>
<a rel="example_group" href="URL de la imagen 2" title="Aqui vendra el Closed caption"><img alt="" src="URL de la miniatura 2" /></a>
<a rel="example_group" href="URL de la imagen 3" title="Aqui vendra el Closed caption"><img alt="" src="URL de la miniatura 3" /></a>

Animacion SWF

<a id="various4" href="URL del archivo SWF"><img src="URL de la miniatura" /></a>

Google Maps

<a class="iframe" id="fancy3" href="URL del mapa"><img src="URL de la miniatura" /></a>

Video de Youtube (Elimina lo de azul y agrega el codigo del video que quieras poner (http://www.youtube.com/watch?v=j7_lSP8Vc3o ))

<a class="iframe" id="fancy3" href="http://www.youtube.com/embed/j7_lSP8Vc3o?autoplay=1"><img src="URL de la miniatura" /></a>

  • Todo eso puedes poner en la entrada para verlas en modo de ventanas modales.

Fuente | Fancybox