Vai a: [ Contenuti ] [ Categorie ] [ Cerca ]

Overlayer con jQuery per le campagne pubblicitarie

Overlayer con jQuery per le campagne pubblicitarie


L’overlayer è uno strumento di advertising basato su un div posizionato in primo piano e sovrapposto ai contenuti della pagina. Questa versione è basata su jQuery e richiede il plugin jQuery.cookie come requisito primario.

E’ possibile visualizzare la demo dello script in questa pagina.

L’implementazione è semplice e non richiede più di qualche minuto per la personalizzazione. Prima di tutto apriamo il file jquery.overlayer.js e modifichiamo le variabili principali:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/****************************/
/*	CONFIGURATION	    	*/
/****************************/
var ol_defaults = {
        ol_pagesdir   	        : 'http://www.sito.it/advertising/jquery.overlayer',
	ol_cssurl	 	: 'http://www.sito.it/advertising/jquery.overlayer/css',
	ol_imgdir	  	: 'http://www.sito.it/advertising/jquery.overlayer/img',
	ol_closetime		: '30 sec',
	ol_cookielife		: '20 min',
	ol_advpage		: 'overlayer.htm',
	ol_advwidth		: '400',
	ol_advheight		: '400',
	ol_id			: 'ol',
	ol_fadefx		: 'y',
	ol_speedfx		: 'fast',
	ol_imgname		: 'ol_close.png',
	ol_opacity		: 'y',
	ol_opacname		: 'opacity.png',
	ol_margintop		: '20',
	ol_maindomain		: 'n',
	ol_showborder		: 'y'
};
// set array to hide (visibility=hidden) some elements which may contain flash stuff
ol_hide_elem = new Array();
// set array to hide (display=none) some elements which may contain flash stuff
ol_none_elem = new Array();
// set main domain if you have some subdomains in the same site
ol_site_cookname = new Array();
/****************************/
/*	END CONFIGURATION   	*/
/****************************/

Analizziamo ogni singolo parametro:

  • ol_pagesdir

    Indica l’URL assoluto che porta alla cartella in cui avete caricato i file dell’overlayer. Nessuno slash finale.

  • ol_cssurl

    Indica l’URL assoluto alla cartella in cui sono contenuti i fogli di stile. Nessuno slash finale.

  • ol_imgdir

    Indica l’URL assoluto alla cartella in cui è contenuta l’immagine del bottone di chiusura. Nessuno slash finale.

  • ol_closetime

    E’ il tempo di chiusura automatica dell’overlayer. Sono ammesse le seguenti unità di tempo: “sec“, “min“, “hou“, “day” rispettivamente per secondi, minuti, ore e giorni. Es.: “30 sec”.

  • ol_cookielife

    E’ il tempo che deve intercorrere tra una visualizzazione e l’altra dell’overlayer. Sono ammesse le seguenti unità di tempo: “sec“, “min“, “hou“, “day” rispettivamente per secondi, minuti, ore e giorni. Es.: “20 min”.

  • ol_advpage

    E’ la pagina (html, php, asp, etc) contenente il codice della campagna advertising. Deve essere posizionata nella cartella definita precedentemente da “ol_pagesdir“.

  • ol_advwidth

    Indica la lunghezza del banner o dell’annuncio espressa in pixel. Vanno inseriti solo numeri senza unità di misura.

  • ol_advheight

    Indica l’altezza del banner o dell’annuncio espressa in pixel. Vanno inseriti solo numeri senza unità di misura.

  • ol_id

    E’ un prefisso identificativo del cookie. Se viene utilizzato un overlayer alla volta basta lasciarlo così altrimenti è necessario personalizzarlo ad ogni chiamata. Successivamente verrà spiegato come fare.

  • ol_fadefx

    Se impostato su “y” verrà visualizzato un effetto “fade” sull’overlayer. L’alternativa è “n”.

  • ol_speedfx

    Se viene attivato l’effetto “fade” potete scegliere la velocità di esecuzione. Possibili parametri: “slow” e “fast”.

  • ol_imgname

    Indica il nome dell’immagine per il bottone di chiusura. L’immagine viene cercata all’interno del percorso impostato con la variabile “ol_imgdir“.

  • ol_opacity

    Se impostato su “y” attiverà l’effetto “opacità” sulla pagina. L’alternativa è “n”.

  • ol_opacname

    E’ il nome dell’immagine utilizzata per l’effetto “opacità”. Normalmente non dovrebbe essere cambiata.

  • ol_margintop

    Indica la distanza dell’overlayer dal margine superiore della pagina (in pixel). Inserire solo numeri senza unità di misura.

  • ol_maindomain

    Normalmente dovrebbe essere lasciato su “n”. Viene impostato su “y” quando è necessario visualizzare lo stesso overlayer su siti di terzo livello appartenenti allo stesso dominio.
    Un esempio chiarirà meglio la situazione. Si supponga di avere http://www.sito.it e http://terzo.sito.it. Impostando la variabile su “n” ed inserendo un overlayer in ciascuno dei due siti, al primo caricamento l’utente vedrà entrambi gli annunci senza che il cookie del primo influenzi la visualizzazione del secondo. Viceversa mettendo la variabile su “y”, il cookie dato all’utente al caricamento del primo annuncio varrà anche per il secondo sito.

  • ol_showborder

    Mostra o meno un bordo intorno all’overlayer. Possibili parametri: “y” e “n”.

Pagina: [1] 2 3

link sponsorizzati

Consiglialo su Facebook

Scrivi un commento

Commenti totali: 8


  1. Ciao Saibal!!! Sei troppo forte!!!

  2. Su IE ho problemi di visualizzazione, confermate?

  3. IE quale versione? Io l’ho provato su IE 6,7 e 8. Non vedo problemi.

  4. Ciao Saibal, stò provando ad installare il tutto su wordpress, ma proprio non mi riesce… in particolare secondo te in quale cartella dovrei caricare i file? Nella cartella del tema, o in quella principale del sito? Grazie mille Antonio

  5. antonio sostanzialmente non fa differenza… io di solito li metto nel tema:

    http://www.lorenzone.it/wp-content/themes/l9e/js/file.js

  6. Alla fine ce l’ho fatta… il problema era che andava in conflitto con la barra wibiya che ho sul sito, ho dovuto inserire lo script di questa barra prima dello script che carica l’overlayer, ora va… grazie mille

  7. Un ultimo dubbio, il layer contiene un video che parte al passaggio del mouse, con il click su chiudi la finestra scompare ma il video continua ad andare (me ne accorgo dall’audio), secondo te è possibile aggiungere uno script al click su chiudi che stoppi tutti i video in corso?

  8. Ragazzi..su IE7 non riesco a visualizzarla…perchè???

Lascia un Commento

Iscriviti alle discussione senza commentare

link sponsorizzati

Torna: [ Inizio ] [ Contenuti ] [ Categorie ] [ Cerca ]

Pagina renderizzata in soli 0,490 secondi dopo aver eseguito ben 61 query (22 in cache). Wordpress... prestazioni da urlo!