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.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIzPcDdpal4ySIcqgjVLRQCUTmfS3JwUdGM3YE1ZlgsYYaVJlrjbZkaHaP9ggQm76V66c-zakSpefEMenM-9IL8Od9kngDaVN-9O27EB0bvNq7yWet9MupA2j7rsGT62g5ocU0zCFCY_g/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8aVSRfaW01YzqFSTOSMBHuh7aVH48UxXOl7uBPgBOHb7aq5e60A5ALUnvH5xW-yt-FW6oBIPBUkvypI0BJ3lZHXVA93nPBPMbkDddNUGSzMUivOApdivOBdtYoUkZhdri4xSm7ZogJLE/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjei7IAkBaJ9MhKo8ryDTywd-aBCWOWt8YeMzuq2km9g4yp9MoR0waGv7SKn_wMMRod7r96Y7GHuzAsDW1iARRF7ksd2slju5meT_qPKqMxwJeJnvW8rntaxUMv5jyzMfcghyZawD0KI3A5/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

Demo
Clicca qui

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% 

dovete sostituire tale URL con quest'altro

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE5TtgINKPZPZH00rJvpRXwJhjYcG07bzY6R2Mi44qUZTddPzMIe7oXDjoL3eV0I777Y6I9nffyZmHiJEbnHYJoUgK4SKCdqwVKD2Ua3hm3dd8-ulN3h5zPfeTJa9EKl6PU_yeesJ0a9Oc/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.