shadowbox depuis une iframe

**witeman** · 10/06/2011, 21h47

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** · 10/06/2011, 21h51

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

Invité · 10/06/2011, 23h04

Salut,

Je dirai

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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** · 11/06/2011, 00h36

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

Invité · 11/06/2011, 00h38

Je ne vois pas où tu as

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var Shadowbox = window.parent.Shadowbox;

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

**witeman** · 11/06/2011, 13h04

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

Invité · 11/06/2011, 13h55

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Iframe body :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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** · 12/06/2011, 00h05

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

< 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

< 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** · 12/06/2011, 00h51

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 ?

Invité · 12/06/2011, 10h49

Salut,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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** · 13/06/2011, 00h33

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 ...

Invité · 13/06/2011, 09h19

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

player :  ['html', 'iframe']

**witeman** · 13/06/2011, 13h53

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** · 16/06/2011, 17h39

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

shadowbox depuis une iframe

JavaScript

Discussions similaires

Partager

Partager