Foros Programación Cliente

Lightbox por encima de flash

9 9 Respuestas Martes 26 de mayo, 2009
Buenas;

llevo horas y horas trasteando el código y buscando info, pero no doy con la solución. Quizás no se pueda, pero lo más probable es que esté haciendo algo mal, ya que yo y HTML no somos muy amigos.

La cuestión es que tengo una web montada con un vídeo y debajo, en otro div, unos thumbnails de unas fotos. Me decanté por aplicarle un Fancybox a las imágenes. He conseguido implantarlo y todo perfecto. El único problema es que las fotos, al abrirse, se me situan por debajo del vídeo.

He probado con el wmode y el so.addParam('wmode', 'opaque'), como recomiendan aquí y aquí; pero ni así.

Os pego la parte del código que no pirula, a ver si me podeis recomendar algo:

<div class="block"><span class="block_inside">
<div class="video_block">
<div align="center">
<a
href="http://www.etervisual.com/Videos/CanBonet/VideoCasa_CanBonet_CAT_700.flv"
style="display:block;width:700px;height:400px"
id="player"></a>
<script>
flowplayer("player", "Scripts/FlowPlayer/flowplayer-3.1.1.swf");
var so=new SWFObject("Scripts/FlowPlayer/flowplayer-3.1.1.swf");
so.addParam('wmode', 'opaque');
</script>
</div>
</div>
</span>

Gracias y a ver si alguin me ehca un cable :-)
Registrado desde 11/03/06
Número de posts: 1613
  • Avatar de P. P. Registrado desde 19/03/09 / Número de posts: 17
    Hola,

    Así de primeras se me ocurre que pueda ser un tema del z-index de los divs, aunque nunca he usado el fancybox y no se exactamente como responde: Puedes probrar a añadirle style="z-index:-100;" al div del flv o aumentar el del div donde se muestran las imágenes.

    Tal vez te sirva.
    P.

    website: www.onelittleweb.com
    contacto: email
    Publicado hace 3 años
  • Avatar de Gerardus Gerardus Registrado desde 11/03/06 / Número de posts: 1613
    Merci por la respuesta tan rápida, pero el tema de los z-index fue lo primero que probé y no pirula :-(
    Publicado hace 3 años
  • Avatar de P. P. Registrado desde 19/03/09 / Número de posts: 17
    Ya...

    Si quieres postea el html completo y le pego un vistazo a ver que es. Ahora iva a bajarme el fancy que no conocia para ver que tal va.
    P.

    website: www.onelittleweb.com
    contacto: email
    Publicado hace 3 años
  • Avatar de Gerardus Gerardus Registrado desde 11/03/06 / Número de posts: 1613
    Vale P, merci por ofrecerte.

    pero los que sabeis de código seguro que veis más de una desgracia por aquí, quedais avisados, no sea que os entre un ataque epiléptico con mi basto HTML, jeje. Ahí va:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Can Bonet - Turisme rural Girona - Pàgina principal</title>
    <meta name="description" content="Can Bonet és un apartament de turisme rural en una ubicació privilegiada. Rodejat de tranquil·litat i silenci, als afores de Sant Martí Vell i al peu de les Gavarres, us ofereix un allotjament ideal per a desconnectar amb la família, amics o parella"/>
    <meta name="keywords" content="Can Bonet, turisme rural, turismo rural, girona, gavarres, sant marti vell, cicloturisme, masia rural, apartamento montaña, apartament muntanya, excursionisme, excursionismo"/>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="style02.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" type="text/css" href="Scripts/FancyBox/jquery.fancybox.css" media="screen" />
    <link rel="shortcut icon" href="img/favicon.ico" />
    <meta name="language" content="es" />
    <meta name="revisit-after" content="1 month" />
    <meta name="rating" content="general" />
    <meta name="author" content="Etervisual" />
    <meta name="owner" content="Can Bonet" />
    <meta name="robot" content="index, follow" />
    <script type="text/javascript" src="Scripts/FlowPlayer/flowplayer-3.1.1.min.js"></script>
    <script type="text/javascript" src="Scripts/FancyBox/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="Scripts/FancyBox/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="Scripts/FancyBox/jquery.fancybox-1.2.1.pack.js"></script>
    <script type="text/javascript src="Scripts/FancyBox/jquery.fancybox-1.2.1.pack.js">
    $(document).ready(function() {
    $("a").fancybox();
    });
    </script>
    </head>

    <body>
    <div id="main">
    <div class="container">

    <div id="header">

    <ul id="menu">
    <li><a href="">La casa</a></li>
    <li><a href="">Localització</a></li>
    <li><a href="">Activitats</a></li>
    <li><a href="">PUF</a></li>
    <li><a href="">Links</a></li>
    <li><a href="">Preus</a></li>
    <li><a href="">Reserva</a></li>
    <li><a href="">Contacte </a></li>
    <div align="right"></div>
    </ul>
    <ul id="idiomes">
    <li><a href="">Cat / </a><a href="">Cast / </a><a href="">Eng / </a><a href="">Fr</a></li>
    </ul>

    <div id="logo">

    <h1>Can Bonet</h1>

    </div>

    <div class="block"><span class="block_inside">
    <div class="video_block">
    <div align="center">
    <a
    href="http://www.etervisual.com/Videos/CanBonet/VideoCasa_CanBonet_CAT_700.flv"
    style="display:block;width:700px;height:400px"
    id="player"></a>
    <script>
    flowplayer("player", "Scripts/FlowPlayer/flowplayer-3.1.1.swf");
    var so=new SWFObject("Scripts/FlowPlayer/flowplayer-3.1.1.swf");
    so.addParam('wmode', 'opaque');
    </script>
    </div>
    </div>
    </span>

    <div id=wrap>
    <div align="center">
    <p><a rel="group" title="Interiors" href="Imatges/SlideShow/INT/CanBonet-2631.jpg"><img src="Imatges/SlideShow/INT/CanBonet-2631_thumb.jpg" alt="Foto interiors" /></a><a rel="group" title="Interiors" href="Imatges/SlideShow/INT/CanBonet-2634.jpg"><img src="Imatges/SlideShow/INT/CanBonet-2634_thumb.jpg" alt="Foto interiors" /> </a><a rel="group" title="Exteriors" href="Imatges/SlideShow/EXT/CanBonet-2504.jpg"><img src="Imatges/SlideShow/EXT/CanBonet-2504_thumb.jpg" alt="Foto exteriors"></a><a rel="group" title="Exteriors" href="Imatges/SlideShow/EXT/CanBonet-2647.jpg"><img src="Imatges/SlideShow/EXT/CanBonet-2647_thumb.jpg" alt="Foto exteriors" /></a></p>
    </div>
    </div>
    </div>
    </div>

    </div>

    </div>
    </div>

    <div id="footer">
    <div class="container">
    <div class="footer_column long">
    <h3>© Tots els drets reservats. Can bonet 2006-2009. darrera actualització a maig 2009 - <a href="#">avís legal</a> - <a href="#">crèdits</a></h3>
    <h3> (0034) <strong>669 900 933</strong></span> - <a href="mailto:info@canbonet.com">info@canbonet.com</a></h3>
    <p>&nbsp;</p>
    <p><a href="http://www.facebook.com/group.php?gid=72275517207&amp;ref=nf" target="_blank"><img src="img/Facebookico_v2.png" alt="Facebook de Can Bonet" name="Facebook_icon" width="28" height="28" id="Facebook_icon" border="0"/></a><a href="http://canbonet.wordpress.com/feed" target="_blank"> <img src="img/RSSico_v2.png" alt="Subscripció Agenda Can Bonet" name="RSS_ico" width="28" height="28" id="RSS_icon" border="0"/> </a><a href="http://ca.wikiloc.com/wikiloc/user.do?name=can+bonet" target="_blank"><img src="img/Wikiloc_Logo.png" alt="Rutes de Can Bonet al Wikiloc" name="Wikiloc_ico" width="28" height="28" id="Wikiloc_ico" border="0"/></a></p>
    </div>

    </div>

    </div>
    </div>
    <script type="text/javascript">
    var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
    document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
    </script>
    <script type="text/javascript">
    try {
    var pageTracker = _gat._getTracker("UA-3307077-4");
    pageTracker._trackPageview();
    } catch(err) {}</script>
    </body>
    </html>
    Publicado hace 3 años
  • Avatar de fernandocomet fernandocomet Registrado desde 30/03/06 / Número de posts: 113
    Y si usas GreyBox?

    http://orangoo.com/labs/GreyBox/
    Fernando Comet
    http://www.fernandocomet.com
    http://fernandocomet.blogspot.com/
    Publicado hace 3 años
  • Avatar de Gerardus Gerardus Registrado desde 11/03/06 / Número de posts: 1613
    Bueno, la idea es tratar de solventar el tema con éste, ya que me ha costado un poco enterarme de cómo funciona como para ahora irme a otro, jeje. Además, el GreyBox no me convence estéticamente.

    Gracias :-)
    Publicado hace 3 años
  • Avatar de dagi3d dagi3d Registrado desde 13/12/03 / Número de posts: 1054
    que yo recuerde el tema de los z-index solo funciona cuando la posicion es absoluta. ¿los tienes así?
    --
    no seas hijo de lol y visita mi blog
    Publicado hace 3 años
  • Avatar de HARTUM HARTUM Registrado desde 22/11/02 / Número de posts: 4293
    tu problema se resuelve con el wmode="transparent", habia por ahí un post de zarate que decialgo asi comoooooooo "wmode bienvenido al infierno" pero vamos que para lo que tu quieres funciona.
    Publicado hace 3 años
  • Avatar de P. P. Registrado desde 19/03/09 / Número de posts: 17
    Hola,

    El problema te lo da el player de videos que estas usando.

    Utiliza este:
    http://www.longtailvideo.com/players/jw-flv-player/

    Y a las instrucciones de instalacion le fijas un z-index de -999 al p donde se carga. Como el Fancybox yya lo tienes en un index superior funciona sin problemas. Tambien debes añadir: s1.addParam('wmode','opaque'); al script por defecto de instalacion.

    <p id='preview' style="z-index:-999;">The player will show in this paragraph</p>

    <script type='text/javascript' src='swfobject.js'></script>
    <script type='text/javascript'>
    var s1 = new SWFObject('player.swf','player','400','300','9');
    s1.addParam('allowfullscreen','true');
    s1.addParam('allowscriptaccess','always');
    s1.addParam('wmode','opaque');
    s1.addParam('flashvars','file=VideoCasa_CanBonet_CAT_700.flv');
    s1.write('preview');
    </script>

    Yo lo he probado y funciona bien.
    P.

    website: www.onelittleweb.com
    contacto: email
    Publicado hace 3 años