Pubblicato il 23/11/09 - aggiornato il  | 10 commenti :

Come inserire una pagina web nel blog con Lytebox tramite un iFrame.

Nell'articolo precedente ho illustrato Lytebox che serve per inserire suggestivi effetti nelle immagini del blog e può essere utilizzato anche per creare delle gallerie fotografiche o degli slideshow. Per seguire questo post è quindi necessario prima leggere quello che spiega come inserire Lytebox nel blog.

Senza modificare in niente l'installazione di Lytebox, per inserire una pagina web all'interno di un nostro articolo sotto forma di un iFrame, basta incollarne l'URL in un collegamento e specificare rel="lyteframe". Facendo un esempio pratico se noi, quando scriviamo un post, andiamo in modalità HTML e incolliamo un codice simile a questo

<a href="http://www.google.it" rel="lyteframe" title="Ricerca su Google"
   rev="width: 600px; height: 450px; scrolling: no;">Ricerca su Google</a>

si realizzerà un classico collegamento ad una pagina. In questo caso abbiamo

  1. Il collegamento è alla pagina www.google.it
  2. Le dimensioni della finestra che si apre sono di 600 pixel di larghezza e 400 di altezza, che possono essere modificate 
  3. Il testo che si vede è Ricerca su Google
  4. Il riferimento a Lytebox avviene mediante l'inserimento di rel="lyteframe". Da notare che in questo caso si utilizza lyteframe al posto di lytebox per le immagini o lyteshow per gli slideshow.
  5. Ovviamente possiamo scegliere una qualsivoglia pagina web e un qualsiasi testo da visualizzare 

Se cliccate su uno dei collegamenti di questo articolo

link-iframe

vedrete apparire una finestra di questo tipo

lyteframe

con la pagina dell'iFrame che si illuminerà e andrà in primo piano, mentre l'articolo resterà in sottofondo in posizione oscurata. Può essere un effetto particolarmente sorprendente per i visitatori del blog e dà l'idea di un sito accurato e quindi affidabile.





10 commenti :

  1. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  2. Ciao, sicuro si possano modificare le dimensioni della finestra che si apre?
    Io non ci riesco, sapresti per caso dirmi come fare?
    Grazie :)

    RispondiElimina
  3. @Bluenight
    Niente di più facile. Nel codice mostrato nel post ci sono i due valori
    width: 600px; height: 450px
    Il primo rappresenta la larghezza della finestra e il secondo l'altezza; è sufficiente inserire quelli giusti per il nostro iFrame. Lo avevo correttamente riportato...
    Ho dato uno sguardo al tuo blog appena iniziato e ho visto che il problema è che non hai inserito il link correttamente. Si deve vedere solo il testo da cliccare e non visualizzare anche il codice.
    Ciao

    RispondiElimina
  4. Grazie mille!!!
    Risolto l'errore e tutto funziona :)
    Però il codice lo avevo copiato pari pari da quello che hai messo tu. Boh, strano.

    Comunque grazie ancora per la disponibilità e complimenti per il blog :)

    RispondiElimina
  5. Ho già un'altra domanda :D

    volevo provare ad inserirlo su wordpress, solo che non riesco a capire dove vada inserito il codice.
    Ho provato in header.php ma non va.
    Quando clicco invece di aprire il file, lo carica in un'altra pagina.
    Sai per caso dove potrebbe andare?
    Grazie ancora, ciao

    RispondiElimina
  6. @Bluenight
    Non si possono inserire gli script in Wordpress perché non è in HTML ma in linguaggio PHP. Ci sono però dei plugin a disposizione. Vai nella Bacheca > Plugin > Aggiungi nuovo e cerca Lytebox o Lightbox o Lightbox 2 e sicuramente troverai qualcosa. In genere quelli con più stelle sono i migliori.
    Ciao

    RispondiElimina
  7. Non mi riesce di farlo funzionare...ho anche provato a 'hostare' i file js e css da un'altra parte per paura che fosse un problema di banda ma non c'è verso... eppure ho copiato ed incollato tutto...
    domanda non è che altri javascript di jqery vanno in conflitto?

    RispondiElimina
  8. @takycardia
    E' possibile che ci sia incompatibilità tra questo javascript e altri del tuo modello. Il codice funziona come puoi vedere dalla demo...

    RispondiElimina
  9. Ciao! innanzi tutto complimenti per il blog.. una risorsa incredibile!!

    Niente avevo un idea.. non so se era possibile...

    Guardando questo effetto mi chiedevo se era possibile far comparire le sezioni di un blog in questa maniera... oppure che ne so una "shoutmix" sarebbe "la mini chatt" come ben saprai questi servizi offerti da siti alternativi sono delle strighe di codice con script ecc ecc...


    sarebbe possibile ad esmpio mettere la voce "visualizza la mini chatt" e sul clicco del mouse usare quest'effetto? ovviamente dovrebbe spuntare solo la minichatt ?? fammi sapere ciau e grazie di tutto il lavoro che svolgi qui! questo è il mio blog
    http://ilmontespushermusic.blogspot.com/
    dimenticavo... appena possiibile ti aggiugo nella mia sezione "utilà blog"

    RispondiElimina
  10. @ilmontes
    con questo effetto puoi mostrare una qualsiasi pagina web. Per quanto riguarda una chat non mi sembra il metodo migliore perché poi è difficile interagire in una pagina popup

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.