Lightbox por encima de flash
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 :-)
pelayo
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.
Gerardus
Merci por la respuesta tan rápida, pero el tema de los z-index fue lo primero que probé y no pirula :-(
pelayo
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.
Gerardus
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>
fernandocomet
Y si usas GreyBox?
http://orangoo.com/labs/GreyBox/
Gerardus
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 :-)
dagi3d
que yo recuerde el tema de los z-index solo funciona cuando la posicion es absoluta. ¿los tienes así?
hartum
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.
pelayo
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.