Nicopì!: Fancybox e Iframe

In questi giorni ho implementato fancybox nel blog, in modo da far si che cliccando sulle immagini integrate nei vari post si apra una finestra con l'immagine ingrandita.
Oltre a questo, fancybox permette di visualizzare iframe nel proprio sito: vediamo come farlo nel modo più semplice possibile.

Supponiamo di voler visualizzare la pagina di google all'interno di un iframe.
Iniziamo inserendo

<a class="extLink" href="http://www.google.it/">Apri Google</a>

nella pagina. Se ora clicchiamo sul link finiremo in Google come accade con un normale link a Google.

A questo punto dobbiamo inserire questo pezzetto di codice tra tag <script>
all'interno di <head></head>

$(document).ready(function(){
    $(".extLink").fancybox({
         'width' : '75%',
         'height' : '75%',
         'autoScale' : false,
         'transitionIn' : 'none',
         'transitionOut' : 'none',
         'type' : 'iframe',
         'hideOnOverlayClick' : false
     });
});

In particolare hideOnOverlayClick è impostato a false cosicché l'unico modo per chiudere il frame aperto sia cliccare la X in alto a destra.

Se ora clicchiamo sul link si aprirà una finestra contenente la pagina di Google, all'interno della nostra pagina web.

Provare per credere: Apri Google

Le istruzioni per installare fancybox sono qui, mentre le opzioni disponibili sono qui.

lunedì 21 marzo 2011

Fancybox e Iframe

0 commenti: