11484 sujets

JavaScript, DOM et API Web HTML5

[Résolu] FancyBox - Iframe

bonjour,

j'ai installer fancybox sur mon blog et j'aimerai utiliser l’animation comme dans lien suivant
https://codepen.io/anon/pen/aYvQBv?editors=1010

j’ai insérer le code suivant sur ma page

<h2>fancyBox v3.2 - Iframe</h2>

<a id="link1" href="javascript:void(0);">Preview link1</a>


mais je ne sais pas ou insérer le deuxième code 

$('a#link1').click(function (e) {
  $.fancybox.open({
    src : 'https://blog.codepen.io/',
    type : 'iframe'
  });

  return false;
});


je suis débutant pouvez vous m'aider Smiley ohwell
merci d'avance
Modifié par loranzo (09 Jan 2019 - 22:41)
Modérateur
Bonjour,

Dans une balise <script> placée juste avant la balise body.

EDIT: je voulais dire juste avant </body>, mea culpa !

Amicalement,
Modifié par parsimonhi (08 Jan 2019 - 19:27)
bonjour
merci pour votre réponse
une fois les codes insérer je clique sur Preview link1 mais rien ne se passe

fancybox fonctionne correctement avec ce code 
<h2>fancyBox v3.2 - Iframe</h2>

<p>

  <a data-fancybox data-type="iframe" data-src="https://codepen.io/about/" href="javascript:;">
    External page
  </a>

https://codepen.io/fancyapps/pen/dZXVoJ?editors=1000

je n'arrive pas a le faire fonctionner avec avec le premier code qui récupère une ID pour ouvrir fancybox
comment faire ?
Modérateur
Bonjour,

Tout dépend du reste (jquery bien installé, fancybox bien installé, etc.).

Tu peux essayer la chose suivante.

1) tu affiches dans ton navigateur un code qui marche de codePen, par exemple le premier lien que tu as donné :
https://codepen.io/anon/pen/aYvQBv?editors=1010
2) tu fais un click droit dans la partie blanche en bas de page, puis tu sélectionnes "inspecter l'élément" si tu as Chrome, ou un équivalent si tu as un autre navigateur.
3) Normalement, la balise <body> est sélectionnée dans la fenêtre qui apparait. Tu recherches l'élément <html> qui doit se trouver quelques lignes au dessus (attention, il y a un autre élément <html> en haut de page, mais c'est celui de codePen et non pas le <html> de l'exemple. Il faut sélectionner le <html> correspondant à l'exemple).
4) click droit sur l'élément <html>, puis sélectionne "copy", puis "copy élément".
5) colle dans un éditeur de texte ce que tu viens de copier
6) rajoute en première ligne :
<!doctype html>

7) supprime le code suivant (attention, il y a 2 balise <script> sur la même ligne, il faut conserver la deuxième, celle qui charge jquery) :
<script src="//static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>

8) Enregistre ton fichier avec l'extension .html.
9) Pour tester, démarre ton serveur local si ce n'est déjà fait, ou bien place ton fichier sur un serveur distant
10) Affiche l'url de ton fichier dans un navigateur (commençant par http://, et non pas commençant par file://).

EDIT: tu peux aussi supprimer en haut de page les balise scripts qui chargent des codes JS de codePen (c'est à dire ceux dont le nom commence par //static.codepen.io ... Il y a aussi quelques autres bricoles à retirer : à toi de faire le ménage (tu retires un truc, tu regardes si ça continue de marcher, tu retires un autre truc, etc.).

Tu devrais alors disposer d'un code complet qui fonctionne.

Amicalement,
Modifié par parsimonhi (09 Jan 2019 - 08:24)
Modérateur
Bonjour,

Une alternative est d'utiliser les codes de jquery et fancybox stockés quelque part sur le web, par exemple sur cdnjs.com.

Exemple complet minimaliste :

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,user-scalable=yes">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.6/jquery.fancybox.js"></script>
<title>fancyBox v3.2 - Iframe</title>
</head>
<body>
<h2>fancyBox v3.2 - Iframe</h2>
<a id="link1" href="javascript:void(0);">Preview link1</a>
<script>
$('a#link1').click(function (e) {
  $.fancybox.open({
    src: 'https://blog.codepen.io/',
    type: 'iframe' });
  return false;
});
</script>
</body>
</html>


Amicalement,
bonjour
ça fonctionne parfaitement merci beaucoup !
Modifié par loranzo (09 Jan 2019 - 22:42)
Modérateur
Bonjour,

Déjà, je n'ai rien compris à la question, et en plus je n'ai pas de fancyBox dans le code (ça ne veut pas dire qu'il n'y a en a pas, mais juste que je n'en ai pas trouvé dans le code principal).

Amicalement,
Sujet clos
Aller à