Discussion :

[bm]

bonjour,

Je cherche à inclure un diaporama dans un fichier JS qui comporte déjà du texte et des images.

Code :

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

1
2
3
4
5
6
7
8
/* Création image */
var k = new Image();
k.src = "max-3.jpg";
/* Ajout image  */
document.getElementById("mox").appendChild(k);
var p = document.createElement("p");
p.innerHTML="<img class='alignnone' src='smiley-3.gif'>";
document.getElementById("mox").appendChild(p);

C'est un bouton qui ouvre le script JS :

Code html :

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

1
2
<button onclick="myMax()">Ouvrir ..</button>
<div id="mix"></div>

1 / Caser tout le code html du diaporama dans la balise innerHTML est irréalisable.
2 / JS n'ouvre pas un fichier externe ou page html

Comment implémenter et avec quelle balise ?

@+

[Watilin]

Bonjour,

ça manque de détails tout ça. Ce diaporama, est-ce un script prêt à l’emploi que tu as téléchargé, ou bien quelque chose que tu souhaites faire toi-même ?

À propos du chargement d’images par script : quand tu crées un objet image, le navigateur va commencer à charger l’image au moment où tu affectes une valeur à son .src. Ce chargement se fait de façon asynchrone, c’est-à-dire que le script continue de s’exécuter en même temps. C’est un détail qui peut avoir son importance.

Je suis confus à propos de ces getElementById("mox") dans ton script et de cette <div id="mix"></div> dans ton code HTML. Est-il censé s’agir du même élément ?

[bm]

Il y a beaucoup de possibilités avec JS. Je peux utiliser un diapo existant et le placer dans un iframe.
Mais, je regroupe tout dans un JS externe qui a l'ouverture/fermeture du bouton donne un contenu spécifique.
Ci-dessous trois <div> dédiés à ce bouton :

Code :

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

1
2
3
4
5
<button onclick="myMux()">Effacez ..</button>
<button onclick="myMax()">Ouvrir ..</button>
<div id="mix"></div>
<div id="max"></div>
<div id="mox"></div>

Je cherche un diapo en JS qui peut englober le cadrage des balises html + exécution JS , dans un
JS externe.

Le conteneur du diapo peut se placer dans un div de la page html( en dessous des 3 précédents) :

Code :

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

<div id="diapo"></div>

nb : un diapo qui s'ouvre après un bouton et qui ne dépendra pas d'un iframe, est ce possible ?

[bm]

J'ajoute que la plupart des diapo utilise css
En passant par un iframe, les transitions entre diapo sont annulées
Il faut gérer les conflits entre css de page et de iframe



https://skitter-slider.net/

skitter est le diapo que j'utilise

[Résolu] : Avec <embled ... et en perdant les transitions ( ce détail n'a pas d'importance )

[Watilin]

Oui, c’est possible de le faire sans iframe.

Et pour ajouter à une réflexion que tu faisais dans ton premier post, il est possible de créer une structure HTML complexe via un script, et de façon plus pratique qu’avec le sous-optimal innerHTML, simplement en utilisant createElement et appendChild que tu as l’air de déjà connaître.
Pour cette raison, je ne comprenais pas vraiment quel était ton problème.

[bm]

https://skitter-slider.net/ voir le diapo de la page ( les transitions qui sont scriptés par des class css )

Avec firebug je ne vois pas de conflit entre css du diaporama et css de la page où est importé le diapo
Ces transitions ne passent pas.

Comment débbuger du css ?