Frame dans une fancybox

Comment utiliser une frame dans une fancybox
Tuto pour utilisateurs expérimentés.
Exemple ici

-1- Préparez la page qui paraitra dans la frame, si elle n'est pas déjà faite.

- 2- Retour à la page dans laquelle nous aurons notre frame en fancybox.
Avec WA4 commençons par activer cette fancybox.
Placer une image et activer la fancybox de cette image, bien sûr cette image sera agrandie au clic sur l'image, si vous ne souhaitez pas cet agrandissement, vous pouvez cachez l'image derrière un élément transparent ou non selon vos besoins.

-3- Code à placer dans le head de la page

Code:

<script type="text/javascript">

 jQuery(document).ready(function() {
 
 jQuery("a.frame1").fancybox({
 
 'hideOnContentClick' : true,
 'padding' : 0,
 'overlayColor' :'#D3D3D3',
 'transitionIn' :'elastic',
 'transitionOut' :'elastic',
 'overlayOpacity' : 0.7,
 'zoomSpeedIn' : 300,
 'zoomSpeedOut' : 300,
 'width' : 560,
 'height' :460,
 'type' :'iframe'

 });

 });

 </script>

-4- Code html à placer dans l'élément "Code HTML"

Code:

<a class="frame1" href="http://www.mon-site.com/ma-page.html?iframe">Ouvrir ici</a>

Si vous préférez faire le lien avec une image :

Code:

<a class="frame1"  href="http://www.mon-site.com/ma-page.html?iframe"><img src="adesse-de-mon-image.png" alt="" /></a>

-4- Et pour finir un peu de css si vous avez choisi le lien en texte que vous pourrez modifier à votre gré.

Code:

<style type="text/css">
 a.frame1:link {      
        font-size:12pt;
      text-align: Left;
      font-family: Comic sans ms;
      color:black;
      text-decoration: none;
    }
    a.frame1:visited {
        text-decoration: none;
        color:black;
    }
    a.frame1:hover {
        text-decoration: underline;
        color:grey;
    }
 a img {
        border: none;
    }
  </style>

Dans notre exemple j'ai nommé ce lien "frame1" (dans class)
il faut impérativement avoir le même nom dans le javascript et le css.
Si vous changez ce nom il doit être changé partout voir ci-dessous en bleu :

Dans le code html :
<a class="frame1"  href="http://www.mon......

Dans le javascript :
<script type="text/javascript">

     jQuery(document).ready(function() {
     
        jQuery("a.frame1").fancybox({  ........

Et dans le css :
   <style type="text/css">
    a.frame1:link {    
           font-size:12pt;
         text-align: Left;
         font-family: Comic sans ms;
         color:black;
         text-decoration: none;
       }
       a.frame1:visited {
           text-decoration: none;
           color:black;
       }
       a.frame1:hover {
           text-decoration: underline;
           color:grey;
       }
     </style>

La source qui m'a permis de mettre cette fancybox en place c'est ici.