Pubblicato il 28/04/16e aggiornato il

Come mostrare in Blogger una immagine in una finestra popup con effetto Lightbox.

Come mostrare una finestra modale o popup con una immagine a scelta quando un lettore apre il blog per la prima volta.
In un commento in calce a un post in cui si parla di come mostrare una finestra modale con il Page Plugin di Facebook mi è stato chiesto se fosse possibile visualizzare una semplice immagine invece del widget di Facebook.

Adattando un pochetto il codice si può in effetti mettere in primo piano con Effetto Lightbox una qualunque immagine con dimensioni adeguate. Si può anche personalizzare il colore dello sfondo, non con un codice di un colore, ma con una immagine di un pixel più o meno trasparente. Questa personalizzazione utilizza anche i cookie in modo che la finestra popup non compaia più per un certo periodo che nel codice è proposto in 7 giorni ma che può essere personalizzato. L'immagine può contenere un annuncio, un invito o quello che si vuole. Ci sarà anche una crocetta per nasconderla per i successivi 7 giorni. Sarà però sufficiente anche il solo cliccare in una qualsiasi parte del layout.

finestra-popup-blogger

Per l'installazione non occorre modificare il modello. Si va su Layout > Aggiungi un gadget > Base > HTML/Javascript e, in Sezioni del sito, si incolla questo codice

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
<style> #fanpagefb{display:none;background:url(https://lh5.googleusercontent.com/-NsuP8OcOhDM/VH7RiGS6LpI/AAAAAAAAqVk/Itt6IoIgPzQ/s800/sfondo.png); width:100%; height:100%; position:fixed; top:0; left:0; z-index:999999; } #fanpagexit{ width:100%; height:100%; } #likebox{ background:#fff; width:420px; height:270px; position:absolute; top:50%; left:50%; -webkit-box-shadow:inset 0 0 50px 0 #939393; -moz-box-shadow:inset 0 0 50px 0 #939393; box-shadow:inset 0 0 50px 0 #939393; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; margin:-135px 0 0 -210px; } #chiusura{ float:right; cursor:pointer; background:url(https://lh6.googleusercontent.com/-7q7oU2yspzA/VH7T00YAmHI/AAAAAAAAqVw/3J_XdnqBvmY/s56/close.png)repeat; height:15px; padding:20px; position:relative; padding-right:40px; margin-top:-20px; margin-right:-22px; } .bordo{ height:1px; width:366px; margin:0 auto; background:#F3F3F3; margin-top:16px; position:relative; margin-left:20px; } </style> <script type="text/javascript"> jQuery.cookie=function(key,value,options){ if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options); if(value===null||value===undefined){options.expires=-1;} if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+ days);} value=String(value); return(document.cookie=[ encodeURIComponent(key),'=', options.raw?value:encodeURIComponent(value), options.expires?'; expires='+ options.expires.toUTCString():'', options.path?'; path='+ options.path:'', options.domain?'; domain='+ options.domain:'', options.secure?'; secure':''].join(''));} options=value||{}; var result,decode=options.raw?function(s){ return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+ encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;}; </script> <script type="text/javascript"> jQuery(document).ready(function($){if($.cookie('popup_user_login')!='yes'){ $('#fanpagefb').delay(100).fadeIn('medium'); $('#chiusura, #fanpagexit').click(function(){ $('#fanpagefb').stop().fadeOut('medium')})} $.cookie('popup_user_login','yes',{path:'/',expires:7})}); </script> <div id="fanpagefb"> <div id="fanpagexit"></div> <div id="likebox"> <div id="chiusura"></div> <div class="bordo"></div> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://lh3.googleusercontent.com/-IzjJ99969Dc/VyIJdwfbn3I/AAAAAAAA1cI/2J5o-CvqInAogC4feBYuaK-3ll0QmFubwCCo/s402/immagine-lightbox.png" style="border: none; height: 230px; margin-left: 8px; margin-top: -19px; overflow: hidden; width: 402px;"></iframe></div> </div>

Si salva l'elemento pagina che si può lasciare senza titolo. Il popup sarà visto solo una volta


La dimensione proposta per l'immagine è di 402 pixel di larghezza e 230 pixel di altezza. Se nel vostro template è già presente la libreria jQuery potete fare a meno di inserire la riga evidenziata di giallo. L'URL colorato di viola è quello della immagine di sfondo che ha una opacità del 90%. Se volete lo sfondo più chiaro per esempio in questo modo con opacità del 58% 

effetto-lightbox

dovete sostituire tale URL con quest'altro

https://lh5.googleusercontent.com/-iQQSQShzwow/VICZuiCWnpI/AAAAAAAAqWw/UGNRiSqeeu8/s800/sfondo-2.png

Il numero dei giorni di intervallo in cui non viene mostrata la finestra popup viene configurata con la stringa expires:7. L'immagine della crocetta di chiusura è data dall'URL colorato di blu.




8 commenti :

  1. Ho visto che su un sito arzigazu.it ci sono piu de 3000 imagini con delle diverse informazioni pero non penso che abbia il copyright di tutte quelle informazioni. In pratica lui prende uno sfondo nero con una descrizione (informazione) e poi ci mette a foto che trova su internet. Esempio: La velocita di un Bugatti Veyron e limitata dalle sue rote che rischiamo di esplodere a causa del riscaldamento e poi ci mette la foto di un Bugatti Veyron sulla strada e poi ha anche la pubblicita su quel sito. Quel sito ha anche una pagina su facebook. Siccome quel sito e estraneo ( rumeno) mi posso prendere quele immagini, gli traduco in italia e poi creo una pagine su facebook per poi prendere like e una volta che pubblico post sul mio sito avere anche un po di visitatori grazie alla pagina.

    1) Si puo fare oppure rischio di essere mandato in tribunale.
    2) Nessun articolo, ma solo immagini... com'è possibile aggiungere la pubbicita.

    RispondiElimina
    Risposte
    1. Si tratta di un problema di tipo giuridico quindi non ti so rispondere
      @#

      Elimina
  2. Grazie Ernesto.
    Ho notato che la dimensione dell'immagine è fissa a 402x230 px. Si può modificare?

    RispondiElimina
    Risposte
    1. Prova a modificarla cambiando nel codice anche i valori di width:420px; height:270px; in maniera coerente
      @#

      Elimina
    2. Avevo già provato ma, pare che il codice non accetti altre misure.

      Elimina
  3. Salve Ernesto, è possibile far apparire il popup sempre, anzichè solo una volta ogni sette giorni? Magari ad ogni apertura della sola home page? Grazie.

    RispondiElimina
    Risposte
    1. C'è scritto. Al posto di expires:7 ci metti expires:0 o expires:1. Non ho testato ma funzionerà
      @#

      Elimina

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.