Frame dans une fancybox

Voir le sujet précédent Voir le sujet suivant Aller en bas

Frame dans une fancybox

Message par Ellade le Ven 19 Oct 2012 - 11:32

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.
avatar
Ellade
Admin

Messages : 525
Date d'inscription : 11/03/2009

https://ellade.forumperso.com

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum