Problema sovrapposizione filmato flash con Fancy box

[crow]

Salve, sto progettando il seguente sito:

http://www.calapricerappresentanze.it/

ho un piccolo problema: ho utilizzato il fancy box per le pagine Chi Siamo, Dove Siamo e Contatti, ma purtroppo, come potete vedere, quando ci clicco sopra non si sovrappongono al filmato flash presente nella mia home page..

Ho provato con z-index ma non funziona lo stesso..

Gentilmente avreste qualche aiuto da darmi.

[frank2tek]

Ma quale z-index hai modificato , quello dell'elemento html che contiene flash o quello del fancybox ?

Tieni conto che il fancybox ha il suo css , quindi devi modificare il css del fancybox. Prova in questo modo , poi se non funziona fammi sapere.

[crow]

ho modificati sia lo z-index del Div contenente il filmato mettendolo a 1, sia quello del css del fancybox mettendolo a 100, ma niente..

Premetto che nel css del fancybox essendoci tante classi, ho inserito z-index: 100 a tutte le classi..

sapresti dirmi dove avrei sbagliato??

Inoltre ho notato che con firefox non ho questo problema ma solo con IE..

[Bearseeker]

Non tutte le versioni di ie gestiscono bene i plug-in.
L'area del plug-in flash, in alcuni casi, non può essere messa in secondo piano. Fai prima a nascondere l'area flash da javascript appena apri il fancybox, per ripristinarla alla chiusura.

Ma comunque che c'entra con asp.net?

Ciao,
b.

[frank2tek]

Ti consiglio di fare l'embed di flash con SWFOobject , l'oggetto javascript che ti permette di fare l'embed di flash in modo molto semplice e ti permette di cambiare i parametri durante l'esecuzione dell pagina. Tra i paraetri che potrebbero servirti c'è il wmode che se lo metti a transparent l'oggetto flash dovrebbe scomparire. Questo magari lo fai quando apri il fancybox e alla sua chiusura riporti il wmode al suo valore originale. Altro non mi viene in mente.

[crow]

di seguito vi mando il seguente codice che ho scritto per il filmato flash dove già utilizzo object:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
width="660px" height="290px" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="Home.swf" /><param name="quality" value="high" /><param name="bgcolor"
value="#ffffff" />
<embed src="Home.swf" quality="high" bgcolor="#ffffff" width="660" Height="290px" align="middle"
allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>



come puoi vedere nell'object poi inserisco l'embed..

Tenendo conto che il menù è posizionato nella master, il filmato nella home page, e i vari chi siamo dove siamo ecc sono pagine a parte, come potrei fare al click dei tasti del menù a far scomarire il filmato??

[crow]

X Bearseeker: potresti gentilmente dirmi come faccio a gestire tramite java il filmato flash, facendolo chiudere all'apertura dei fancybox??

mi sembra un ottima idea ma non saprei come fare, ti sarei grato se mi dessi qualche dritta

[frank2tek]

Il metodo più immediato mi sembra questo :
racchiudi l'object in un div dandogli un id

<div id="flashDiv"> // aggiungi il div 
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" 
width="660px" height="290px" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="Home.swf" /><param name="quality" value="high" /><param name="bgcolor" 
value="#ffffff" />	
<embed src="Home.swf" quality="high" bgcolor="#ffffff" width="660" Height="290px" align="middle"
allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" 
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>

Poi per rendere quel div invisibile usi javascript in questo modo

document.getElementById('flashDiv').style.visibility = 'hidden';

// per renderlo nuovamente visibile fai

document.getElementById('flashDiv').style.visibility = 'visible';

Personalmente io userei jquery che ti da la possibilita di applicare degli effetti di fade in e out

Se ti interessa poi ti dico come fare tanto se usi il fancybox la libreria jquery la devi usare comunque , tanto vale adoperarla anche per fare altro

[crow]

si meglio usare Jquery anche perchè non mi funziona come detto da te in precedenza, infatti inserendo il tuo codice nel seguente modo:

<script type="text/javascript" language="javascript">
document.getElementById('flashDiv').style.visibili ty = 'hidden';
</script>

mi da il seguente errore:
Errore di run-time di Microsoft JScript: Necessario oggetto

se gentilmente mi dici come modificare il Jquery provo, tieni conto che il click avviene sul menù presente nella mia master, e di la bisogna rendere il filmato invisibile che però è presente nella default.aspx, ed infine quando chiudo le pagine al quale è applicato il fancybox il filmato deve tornare visibile..

spero di aver reso l'idea..

[frank2tek]

Questo è il codice. Ovviamente non conoscendo come è strutturato il tuo menu
mi sono limitato a simulare i tasti hide e show.

<script type="text/javascript">

$(document).ready(function(){

    $("#hide").click(function(){
           $("#flashDiv").css({"visibility":"hidden"});
    });

    $("#show").click(function(){
           $("#flashDiv").css({"visibility":"visible"});
    });
});

</script>

<ul>
    <li id="hide">Hide
    <li id="show">Show[/list]



<div id="flashDiv">FLASH OBJECT</div>

Se vuoi vedere l'esempio funzionante ed editabile vai a questo indirizzo
(JSFiddle è un editor di lavascript online , quindi ci puoi fare anche delle prove)

http://jsfiddle.net/frank2tek/7Uk6D/1/


Con questo codice invece ottieni un effeto di fade in e out

<script type="text/javascript">

$(document).ready(function(){

    $("#hide").click(function(){
           $("#flashDiv").fadeOut('slow');
    });

    $("#show").click(function(){
           $("#flashDiv").fadeIn('slow');
    });
});

</script>

L'esempio funzionante su JSFiddle

http://jsfiddle.net/frank2tek/7Uk6D/2/