shadowbox depuis une iframe

[witeman]

Bonjour à toutes et tous.

Avant toutes autres choses : Je sais ! Les iframes c'est le mal !
Mais je n'en utilise qu'une seule, pour une seule page donnée, ce qui représente qu'un pourcentage ridicule du site.
Mais bref, là n'est pas le problème

J'ai passé ces dernières 24h à chercher sur le net une solution à mon épineux problème en vain.
J'ai bien eu quelques touches par ci par là, mais rien qui ne m'ai sorti de la panade.

En gros, le schéma est simple :

Une page parent.html contenant une iframe.html
Jusque là rien de sorcier.
En fait je me sers de cette iframe comme d'un lecteur de fiches que l'on appel via différents boutons.
Hors dans certaines de ces fiches vont être intégrés des contenus multimédia (surtout vidéos et images) que j'aimerai mettre en visualisation via "Shadowbox"
Pour intégrer shadowbox à mes iframes, aucuns soucis.
Mais bien sûr, il fallait le craindre et c'est logique, le déploiement de la shadowbox ne se fait que dans le cadre de l'iframe, et bien évidement, ça ne me convient pas

Je sais qu'il est tout à fait possible de spécifier à shadowbox qu'elle doit ouvrir le contenu de l'iframe dans la page parent grâce entre autre à cette variable : var Shadowbox = window.parent.Shadowbox;
(voir question/réponse n°2 sur leur site officiel :
http://www.shadowbox-js.com/faq.html

Mais voilà... autant je commence à comprendre correctement html/css, autant le JS reste un peu flou, et je ne sais pas manier ces variables.

La page concerné est visible à cette adresse :
http://www.compositeur-jeux-videos.fr/projet.html
(je vous préviens le site est en construction, et le contenu n'est qu'un test )

En cliquant sur l'onglet advent children, vous ferez apparaitre la fiche correspondante dans l'iframe, et celle ci contient une video associée à shadowbox, et laissant clairement apparaitre le problème.

Vous aurez ainsi accès au code source des pages "parent.html" et "iframe.html"

Donc si quelqu'un parmi vous est en mesure de m'éclairer sur la façon d'intégrer le code dans les deux pages pour "libérer" la shadowbox de son iframe, je vous en serez très reconnaissant !

Merci par avance

[witeman]

Petite précision :

J'ai tout de même réussi, tout à l'heure, à déclencher l'ouverture "partielle" de shadowbox dans la page "parent" depuis le lien de l'iframe.
Je dis "partielle" car la page du navigateur tout entière s'obscurcie comme si l'ouverture se faisait normalement, mais aucun cadre n'apparait et bien sûr le contenu ne se charge pas.

Pourtant les chemins d'accès semble parfaitement correct, ou alors ma logique n'est pas bonne ?:
Quel casse tête...

En gros, voici mon code, si cela peut vous aider :

Code dans le HEAD de ma page parent.html

Code :

1
2
3
4
5
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

Code dans le HEAD de ma page iframe.html

Code :

<script>var Shadowbox = window.parent.Shadowbox;</script>

et enfin:
Lien placé dans le BODY de ma page iframe.html

Code :

<a href="videos/advent_vid.swf" rel="shadowbox;height=480;width=640">Advent</a>

Sachant que la structure de mes dossiers et chemins d'accès est la suivante :



J'espère que certains pourront m'éclairer

Merci !

Benjamin

[charly-b]

Salut,

Je dirai

Code :

<a href="iframe/videos/advent_vid.swf" rel="shadowbox;height=480;width=640">Advent</a>

car l'adresse de la vidéo va être interprétée par le javascript de la page parent, hors du repertoire "iframe" .

[witeman]

Malheureusement non...
Il m'indique tout bonnement qu'il ne trouve pas le lien...

[charly-b]

Je ne vois pas où tu as

Code :

var Shadowbox = window.parent.Shadowbox;

sur ton site, sur quelle page je peux le tester ?

[witeman]

Désolé,
J'avais enlevé le code des pages en ligne pour le moment, le temps de tester d'autres choses.

Mais je l'ai exactement remis tel qu'indiqué dans mon premier post.

En te dirigeant vers cette page :

http://www.compositeur-jeux-videos.fr/projet.html

qui correspond à la page "mère" de l'iframe et vers celle-ci :

http://www.compositeur-jeux-videos.f...cheadvent.html

qui correspond à une des pages affichée dans l'iframe et contenant la video à exploiter hors cadre par shadowbox.

Merci pour ton aide

[charly-b]

Yes, j'avais vu cette page, mais je cherchais la config citée dans ton 2ème post (appel de shadowbox depuis l'iframe vers la page parent).

Page parent :

Code :

1
2
3
4
5
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

Iframe head:

Code :

<script>var Shadowbox = window.parent.Shadowbox;</script>

Iframe body :

Code :

<a href="iframe/videos/advent_vid.swf" rel="shadowbox;height=480;width=640">Advent</a>

Car tu dis qu'avec ça tu as l'assombrissement de la page parent, mais que l'image n’apparaît pas. Je pense qu'avec le "iframe/" dans le lien, ça devrait fonctionner.

Tiens au jus,

[witeman]

Malheureusement non, cela ne marche pas lorsque je fais comme tu indiques... j'ai une page d'erreur : lien cassé ou inexistant (concernant mon fichier vidéo)

En fait, le codage tel que indiqué ci dessus est le codage de "base" fourni par le site de "shadowbox" pour une utilisation en iframe (j'ai mis le lien de la faq du site dans mon premier post, ou on peut lire le cas exact de ma situation présente)

Ceci étant, le meilleur résultat que j'ai atteint (obscurcissement de la page parent.html depuis un appel du lien placé dans l'iframe -mais sans chargement de contenu ni de cadre-), je l'ai obtenu grâce à ce bout de code trouvé sur un site anglophone :

Dans le head de l'iframe :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var sbx = window.parent.Shadowbox; 
function openTopSBX(el){ 
  if(sbx){ 
    sbx.open( { content : el.href 
                   , player : 'iframe' 
                   , title : el.title||'' 
                   //could include width/height/options if desired 
                   } 
                ); 
    return false; 
  }else{ //no Shadowbox in parent window! 
    return true; 
  } 
}

et dans le body de l'iframe :

Code :

< a href="link.html" rel="nofollow" target="_top" onclick="return openTopSBX(this);">< img src="image.jpg" alt="" />< /a>

et dans le head de parent.html , le code de base de declaration de shadowbox :

Code :

1
2
3
4
5
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

Cependant, je ne cerne pas la logique de certains éléments dans ce code, tel que

Code :

< a href="link.html" rel="nofollow" target="_top" onclick="return openTopSBX(this);">< img src="image.jpg" alt="" />< /a>

Je ne comprend pas pourquoi ils appellent l'objet link.html au lieu d'appeler un contenu (jpg, png, flv... que sais-je...)
Pour ma part donc, c'est en intégrant ce code et en remplacent ce link.html par mon lien de vidéo que j'ai eu les résultat "partiels" cités plus haut. Mais je n'arrive pas à obtenir plus que ça...

En deux mots : Je galère

[witeman]

J'ai replacé le code dans l'exacte configuration citée plus haut.
Vous pourrez ainsi voir l'assombrissement de la page parent.html mais sans chargement de contenu.
De plus, j'ai ré-écrit les liens en absolu pour écarter la thèse d'un mauvais chemin d'accès...

Voir sur la page :

http://www.compositeur-jeux-videos.fr/projet.html

en cliquant sur l'image advent-children (sous un des points d'interrogation à gauche) puis en lançant la vidéo en bas de l'iframe ainsi apparue.

Une idée svp ?

[charly-b]

Salut,

Il y a une erreur sur le "player: iframe" , essaye :

Code :

1
2
3
4
5
6
sbx.open( { content : el.href
, player :  ['html', 'iframe']
, title : el.title||''
//could include width/height/options if desired
}
);

J'ai trouvé ça sur google pour quelqu'un qui rencontrait le même problème .

[witeman]

Tout d'abord, merci pour ton aide Charly

Malheureusement, cela ne semble pas être le problème premier (même si il est vraisemblable qu'il y'avait tout de même cette erreur à corriger.

J'ai testé en indiquant le bon format au niveau du player, tel qu'indiqué dans les specification de shadowbox, a savoir player: 'flv'...
Mais rien de plus ... et rien de moins.

J'ai même testé en indiquant toutes les valeurs reconnues par shadowbox pour son 'init' ['html','iframe','flv','swf', etc...]

Je désespère ...

[charly-b]

Je ne vois pas la correction de "iframe" sur ton site, l'as-t essayé ?

Code :

player :  ['html', 'iframe']

[witeman]

Oui oui, testée !
Je reviens chaque fois au code le plus proche du résultat attendu pour être sur une bonne base de réflexion .
Mais oui j'ai testé ...

[witeman]

Dernière tentative avant jetage d'eponge...
Personne d'autre n'a une idée a me proposer please ?