Slideshow para videos?

[oNefl0w189]

Hola compañeros, pues eso, ando buscando un Slideshow para vídeos, igual que hay para las fotos, pero que tenga la capacidad de introducir videos.

La cosa sería que me mostrase un div por delante de la página con el vídeo y me desvaneciese la página por detras.


Sería perfecto algo como esto http://animoto.com/sample-videos (pinchad cualquier video para ver la funcion y el efecto).


Mi pregunta es;

- Hay algo ya diseñado así?

Si no lo hay diseñado ya...

- Hay algun script, ya sea javascript, css o jQuery para hacer esto con un div en el que meter el contenido que yo quiera?



Echadme una manillo! jeje.


PD: No se si lo he puesto en la seccion correcta.. la verdad que como puede englobar varios sectores (html, javascript, css, jquery.. etc) he optado por ponerlo aquí, y espero que si esta mal no le moleste mucho moverlo a un admin, gracias!

[kike2lucas]

Fancybox
http://fancybox.net/

[oNefl0w189]

Muchas gracias kike2lucas, eso me sirve pues puedo meter swf's y div's, asique puedo meter las dos cosas que necesito.

El problema es que no se hacerlo funcionar :SS!

He creado una carpeta en mi directorio web que se llama fancybox.

y ahí he metido los archivos que venían en el .rar
jquery.fancybox.css
jquery.fancybox.js
jquery.fancybox.pack.js


Supuestamente con esos 3 archivos ya funcionaría.

Les añado en el head junto al css que ya tenia,añado el CSS y los 2 script javascript,

Código HTML:

<link rel="StyleSheet" href="style.css" type="text/css" media="screen">
        <link rel="StyleSheet" href="fancybox/jquery.fancybox.css" type="text/css" media="screen">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script type='text/javascript' src='fancybox/jquery.fancybox.js'></script>
    <script type='text/javascript' src='fancybox/jquery.fancybox.pack.js'>
 
</script>
 

y luego le llamo en mi página así:

Código HTML:

<div class="contenido" align="center">
            Contenido.<br><br>
            //Iframe:
            <a href="index.html" class="fancybox fancybox.iframe">Example</a>
 
            //Inline (will display an element with `id="example"`)
            <a href="#example" class="fancybox">Example</a>
 
            //SWF:
            <a href="example.swf" class="fancybox">Example</a>
 
            //Image:
            <a href="logo.gif" class="fancybox">Example</a>
        </div>
 

Que es como pone en el README, pero nada, no me funciona...


Alguien puede echarme una mano?


PD: Alomejor habría que mover el tema de foro...

[kike2lucas]

Te falta definir el script de funcionamiento del plugin. Por ej:

<script type="text/javascript">
$(document).ready(function() {

/* This is basic - uses default settings */

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

/* Using custom settings */

$("#example").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : true
});
</script>

Busca en la web del fancybox para adaptarlo a tus necesidades

[santaseo]

Iniciado por kike2lucas

Fancybox
[url]http://fancybox.net/[/url]

No lo conocia, a tener en cuenta.

oNefl0w189: acá las instrucciones: fancybox.net/howto

y ya que estoy paso otro, basic-slider.com, es para crear slideshows que contengan no solo imagenes, tambien botones y videos (si no me equivoco)

Saludos!

[oNefl0w189]

La verdad es que el fancybox esta bastante bien... pero (para mi, por lo menos) es dificil de configurar...

Eso o no me entero de nada, porque estoy venga a intentar conseguir mostrar un div con el contenido de dentro que lleva mi video y no hay manera....

**********
EDITO
**********

He conseguido mostrar un div con mi propio contenido así:

Código Javascript:

<script type="text/javascript">
    $(document).ready(function() {
        $("area#videolink").fancybox({
      overlayShow: true,
      overlayOpacity: 0.7
        });
    });
 

Código HTML:

<!-- Div con el contenido del video -->
            <div id="videocontainer" style="display:none">
             <object>
                <embed src="mediaplayer.swf" width="400" height="310" allowscriptaccess="always" allowfullscreen="true"
                flashvars="height=310&width=400&file=videos/a_PB.swf&screencolor=0x000000&logo=logo.gif&link=www.davidfadrique.tk"/>
                </embed>
             </object>
            </div>
</script>
 

necesito que este div, se abra al clicar en una zona de un mapa de imagenes.

Código HTML:

<img src="plano_inferior9.JPG"  usemap="#plano_inferior" border="0">
 
            <map name="plano_inferior">
            <area shape="rect" coords="763,708,598,570"  id="videolink" href="#videocontainer" >
            </map>
 

He probado así y he conseguido que funcione, el problema es que ahora hay varios videos distintos, como podría hacer para que abriese los diferentes videos??

[oNefl0w189]

Me he dado cuenta de que no necesito eso, ya que el fancybox llama a la funcion mediante un nombre en este caso
area#videolink
lo que hago es llamar a todos los enlaces con esa ID, y en el href darle el valor del div que quiero mostrar.

Es decir;

Este sería el mapa (imagen donde salen los links):

Código HTML:

<map name="plano_inferior">
            <area shape="rect" coords="763,708,598,570" onclick="muestra_oculta('contenido_a_mostrar')" href="#" >
            <area shape="rect" coords="203,548,317,706" id="videolink" href="#videocontainer">
            <area shape="rect" coords="1173,705,1024,547" id="videolink" href="#videocontainer1">
            </map>
 

Estos serían los divs a mostrar, dependiendo del href que dé me muestra el div con ese nombre.

Código HTML:

<!-- The Video Object -->
            <div id="videocontainer" style="display:none">
            Descripcion del video <br>
             <object>
                <embed src="mediaplayer.swf" width="400" height="310" allowscriptaccess="always" allowfullscreen="true"
                flashvars="height=310&width=400&file=videos/a_PB.swf&screencolor=0x000000&logo=logo.gif&link=www.davidfadrique.tk"/>
                </embed>
             </object>
            </div>
            
            <div id="videocontainer1" style="display:none">
            Descripcion del video1 <br>
             <object>
                <embed src="mediaplayer.swf" width="400" height="310" allowscriptaccess="always" allowfullscreen="true"
                flashvars="height=310&width=400&file=videos/a_PB.swf&screencolor=0x000000&logo=logo.gif&link=www.davidfadrique.tk"/>
                </embed>
             </object>
            </div>