/* COME SI USA: Copiare l'esempio HTML in un file ed aprirlo con un browser ! Buon divertimento !!! */ /* obj_gallery obj_gallery:
Galleria Immagini (ingrandisci con un click )
Galleria Immagini (chiama la funzione alert() con un click )
Galleria Immagini (sostituisce il tasto play/stop )
*/ function Galleria(name) { // Funzioni D'USO FREQUENTISSIMO // add ( url,titolo,descrizione) aggiunge all'elenco una immagine // placeImage() mette il tag HTML per l'immagine // play() inizia la successione delle immagini // NOTA: da lanciare dopo aver disegnato la galleria // se si vuole visualizzare qualcosa senza partire // showPrepare() inizia la caricare la prima e tiene in "caldo" la seconda // --- COMANDI --- // placePlay() mette il tasto play // NOTA: vedi this.btn_playImg this.btn_playImg = null; // url immagini per il comando play this.btn_playImgW = null; // dimensione Width immagine Play se diversa dall'originale this.btn_playImgH = null; // dimensione Height immagine Play se diversa dall'originale this.btn_playImgOn = null; // url immagini per il comando play (mouse su) this.btn_playStr = "play"; // stringa se non c'è btn_playImg this.btn_playStrCl = null; // classe stringa se non c'è btn_playImg // placeStop() mette il tasto stop // NOTA: vedi this.btn_stopImg this.btn_stopImg = null; // url immagini per i comando stop this.btn_stopImgW = null; // dimensione Width immagine stop se diversa dall'originale this.btn_stopImgH = null; // dimensione Height immagine stop se diversa dall'originale this.btn_stopStr = "stop"; // stringa se non c'è btn_stopImg this.btn_stopStrCl = null; // classe stringa se non c'è btn_stopImg // placeRw() mette il tasto Rw // NOTA: vedi this.btn_rwImg this.btn_rwImg = null; // url immagini per i comando Rw (indietro di uno) this.btn_rwImgW = null; // dimensione Width immagine Rw se diversa dall'originale this.btn_rwImgH = null; // dimensione Height immagine Rw se diversa dall'originale this.btn_rwStr = "Rw"; // stringa se non c'è btn_ffImg this.btn_rwStrCl = null; // classe stringa se non c'è btn_rwImg // placeFf() mette il tasto Ff // NOTA: vedi this.btn_ffImg this.btn_ffImg = null; // url immagini per i comando Ff (avanti di uno) this.btn_ffImgW = null; // dimensione Width immagine Ff se diversa dall'originale this.btn_ffImgH = null; // dimensione Height immagine Ff se diversa dall'originale this.btn_ffStr = "Ff"; // stringa se non c'è btn_ffImg this.btn_ffStrCl = null; // classe stringa se non c'è btn_ffImg this.btn_chgTimeStrCl = null; // classe stringa per i bottoni di cambio durata this.loadingStr = "loading ..."; this.notAvailStr = "not available ..."; // Proprietà D'USO FREQUENTE this.gotoImage = true; // se true quando click si apre una finestra // se false non è possibile fare nulla (solo visione) this.callFunc = ""; // se "" non fa nulla // se != "" quando click chiama la // funzione con il parametro passato // vedi this.add // NOTA: se callFunc != "" gotoImage non funziona ! this.timeNext = 8000; // tempo (millisecondi) fra una immagine e la successiva // D'USO // placePos() mette il tag HTML per Pos che indica il numero // NOTA: vedi this.classPos this.classPos = null; // classe per il DIV class="..." // placeTotPos() mette il tag HTML per TotPos che indica il numero di gallerie/immagini // NOTA: vedi this.classTotPos this.classTotPos = null; // classe per il DIV class="..." // placeTitolo() mette il tag HTML per il titolo // NOTA: vedi this.classTitolo this.classTitolo = null; // classe per il DIV class="..." // placeCommento() mette il tag HTML per il commento // NOTA: vedi this.classCommento this.classCommento = null; // classe per il DIV class="..." // placeSecRimasti() mette il tag HTML per i secondi rimanenti // NOTA: vedi this.classCommento this.classSecRimasti = null; // classe per il DIV class="..." // Proprietà dell'immagine della galleria this.dimFix = true; // se false lascia la dimensione originale dell'immagine this.dimH = 200; // dimensione Altezza this.dimW = 300; // dimensione Larghezza this.sosPlayStop = false; // se true sostituisce stop se la funzione play è attiva // oppure mette play se la // se false non altera il tasto play this.maxRecall = 3; // numero di tentativi di sostituzione dell'immagine this.timeRecall = 2000; // tempo (millisecondi) fra una verifica e l'altra this.resize = 100; // ridimensiona le immagini // D'uso per casi particolari : // stop() ferma la successione // ff() mostra la successiva (ferma la successione) // rw() mostra la precedente (ferma la successione) // INTERNO INTERNO INTERNO INTERNO INTERNO INTERNO INTERNO INTERNO INTERNO INTERNO INTERNO // // -------------- non puntate direttamente a questi valori ----------------------- // // INTERNO INTERNO INTERNO INTERNO INTERNO INTERNO INTERNO INTERNO INTERNO INTERNO INTERNO // // Variabili di uso interno this.name = name; // nome oggetto e nome oggetto nel documento HTML this.length = 0; // numero di immagini this.contImmagini = new Array(); this.contPronta = new Array(); this.contUrl_p = new Array(); this.contUrl_g = new Array(); this.contTitolo = new Array(); this.contDescrizione = new Array(); this.pos = -1; this.ImgMessa = -1; this.prepareTimeout = new Array(); this.recall = new Array(); this.playWorking = false; // se true indica che sta funzionando ! this.fitPlayStop = "play"; // con sosPlayStop indica quale mettere ! this.playTimeout = null; this.placedPos = false; this.placedTotPos = false; this.placedTitolo = false; this.placedCommento = false; this.secRimasti = '-'; // aggiorna i secondi rimasti this.placedSecRimasti = false; this.add = function (url_p,url_gOparFunc,titolo,descrizione) { this.contPronta[this.length] = false; this.recall[this.length] = this.maxRecall; if ( typeof(url_p) == "string" ) { this.contUrl_p[this.length] = url_p; } else { this.contUrl_p[this.length] = ""; } if ( typeof(url_gOparFunc) == "string" ) { this.contUrl_g[this.length] = url_gOparFunc; } else { this.contUrl_g[this.length] = ""; } if ( typeof(titolo) == "string" ) { this.contTitolo[this.length] = titolo; } else { this.contTitolo[this.length] = ""; } if ( typeof(descrizione) == "string" ) { this.contDescrizione[this.length] = descrizione; } else { this.contDescrizione[this.length] = ""; } this.length ++; }; this.prepare = function (n) { if ( typeof(n) == 'undefined' || n < 0 ) { n = 0; } n = n%this.length; // se è un numero grande riparto ! // alert("prepare:\nn:"+n); if ( this.contImmagini[n] == null && typeof(this.contUrl_p[n]) == 'string' ) { this.recall[n] = 0; this.contImmagini[n] = new Image; // non e' definito this.contImmagini[n].src = this.contUrl_p[n]; this.prepareTimeout[n] = setTimeout(this.name+".prepared("+n+")",this.timeRecall); } // alert("src:"+this.contImmagini[n].src+" , complete:"+this.contImmagini[n].complete); }; this.prepared = function prepared(n) { if ( typeof(n) == 'undefined' || n < 0 ) { n = 0; } n = n%this.length; // se è un numero grande riparto ! // alert("prepared:\nn:"+n // +"\nsrc: "+this.contImmagini[n].src // +"\ncomplete: "+this.contImmagini[n].complete // +"\nrecall: "+this.recall[n] // ); if ( this.contImmagini[n].complete == true || this.recall[n] >= this.maxRecall ) { clearTimeout(this.prepareTimeout[n]); this.contPronta[n] = true; // alert("prepared:\n\n\n\n\n\n\n n:"+n); if ( this.pos == n ) { this.show(n,1) }; } else { if ( this.contImmagini[n].onAbort != true && this.contImmagini[n].onError != true && this.recall[n] < this.maxRecall ) { // alert("prepared:\n ABORT/ERROR "+n); this.recall[n]++; this.prepareTimeout[n] = setTimeout(this.name+".prepared("+n+")",this.timeRecall); } else { // alert("prepared:\n termino carico di "+n); clearTimeout(this.prepareTimeout[n]); this.imgMessa = n; } } }; this.placeImage = function () { //alert("placeImage, dimFix="+this.dimFix); if ( this.dimFix == true ) { this.DIV_TAG( this.name+'_divImage',this.IMG_strTAG(),true ); } else { this.DIV_TAG( this.name+'_divImage',this.IMG_strTAG() ); } } this.placePos = function () { this.placedPos = true; var f; if ( typeof(this.classPos) == 'string' ) { f = this.classPos; } this.DIV_TAG( this.name+'_divPos',"",f ); }; this.placeTotPos = function () { this.placedTotPos = true; var f; if ( typeof(this.classTotPos) == 'string' ) { f = this.classTotPos; } this.DIV_TAG( this.name+'_divTotPos',"",f ); }; this.placeTitolo = function () { this.placedTitolo = true; var f; if ( typeof(this.classTitolo) == 'string' ) { f = this.classTitolo; } this.DIV_TAG( this.name+'_divTitolo',"",f ); }; this.placeCommento = function () { this.placedCommento = true; var f; if ( typeof(this.classCommento) == 'string' ) { f = this.classCommento; } this.DIV_TAG( this.name+'_divCommento',"",f ); }; this.placeSecRimasti = function () { this.placedSecRimasti = true; var f; if ( typeof(this.classSecRimasti) == 'string' ) { f = this.classSecRimasti; } this.DIV_TAG( this.name+'_divSecRimasti',"",f ); }; this.placePlay = function (w,h) { if ( typeof(w) == 'number' ) { this.btn_playImgW = w; } if ( typeof(h) == 'number' ) { this.btn_playImgH = h; } this.DIV_TAG( this.name+'_divBtn_Play',this.BTN_strTAG('play') ); }; this.placeStop = function (w,h) { if ( typeof(w) == 'number' ) { this.btn_stopImgW = w; } if ( typeof(h) == 'number' ) { this.btn_stopImgH = h; } this.DIV_TAG( this.name+'_divBtn_Stop',this.BTN_strTAG('stop') ); }; this.placeFf = function (w,h) { if ( typeof(w) == 'number' ) { this.btn_ffImgW = w; } if ( typeof(h) == 'number' ) { this.btn_ffImgH = h; } this.DIV_TAG( this.name+'_divBtn_Ff',this.BTN_strTAG('ff') ); }; this.placeRw = function (w,h) { if ( typeof(w) == 'number' ) { this.btn_rwImgW = w; } if ( typeof(h) == 'number' ) { this.btn_rwImgH = h; } this.DIV_TAG( this.name+'_divBtn_Rw',this.BTN_strTAG('rw') ); }; this.placeChgTime = function(sec) { // alert("In placeChgTime , "+sec); sec = parseInt (sec); this.DIV_TAG( this.name+'_divBtn_ChgT_'+sec,this.BTN_strTAG(sec) ); }; this.BTN_strTAG = function (s) { var call_function = ""; var call_btn = ""; var call_class = ""; var otherCalls = ""; if ( s == "play" ) { call_function = "javascript : "+this.name+".play(); return false;" if ( typeof( this.btn_playImg ) == 'string' ) { // immagine !!! call_btn = 'play'; } else { if ( typeof( this.btn_playStrCl ) == 'string' ) { call_class = ' class="'+this.btn_playStrCl+'" '; } call_btn = this.btn_playStr; } } else if ( s == "stop" ) { call_function = "javascript : "+this.name+".stop(); return false;" if ( typeof( this.btn_stopImg ) == 'string' ) { // immagine !!! call_btn = 'stop'; } else { if ( typeof( this.btn_stopStrCl ) == 'string' ) { call_class = ' class="'+this.btn_stopStrCl+'" '; } call_btn = this.btn_stopStr; } } else if ( s == "ff" ) { call_function = "javascript : "+this.name+".ff(); return false;" if ( typeof( this.btn_ffImg ) == 'string' ) { // immagine !!! call_btn = 'ff'; } else { if ( typeof( this.btn_playffStrCl ) == 'string' ) { call_class = ' class="'+this.btn_ffStrCl+'" '; } call_btn = this.btn_ffStr; } } else if ( s == "rw" ) { call_function = "javascript : "+this.name+".rw(); return false;" if ( typeof( this.btn_rwImg ) == 'string' ) { // immagine !!! call_btn = 'rw'; } else { if ( typeof( this.btn_rwStrCl ) == 'string' ) { call_class = ' class="'+this.btn_rwStrCl+'" '; } call_btn = this.btn_rwStr; } } else if ( s == parseInt (s) ) { // alert("In BTN_strTAG , s:"+s); call_function = "javascript : "+this.name+".changeTime("+s+"); return false;"; if ( typeof( this.btn_chgTimeStrCl ) == 'string' ) { call_class = ' class="'+this.btn_chgTimeStrCl+'" '; } call_btn = s; } var l_start= '' + call_btn ; var l_end = ''; return l_start+l_end; }; this.IMG_strTAG = function (n) { if ( typeof(n) == 'undefined' ) { return ''; } var l_start = ""; var l_end = ""; // DEVO FARE UN LINK ? if ( this.callFunc != "" ) { l_start= ''; l_end = ''; } else if ( this.gotoImage == true ) { var l_url = ""; if ( this.contUrl_g[n] == "" ) { l_url = this.contUrl_p[n]; } else { l_url = this.contUrl_g[n]; } l_start= ''; l_end = ''; } var tag_dim=""; if ( this.dimFix == true ) { tag_dim = ' width="' +this.dimW+'" ' +' height="'+this.dimH+'" '; } else if ( this.contImmagini[n].complete == true ) { tag_dim = ' width="' +this.contImmagini[n].width+'" ' +' height="'+this.contImmagini[n].height+'" '; } return l_start + '' + l_end; }; this.DIV_TAG = function (nome,str,f) { var tag=""; if ( typeof(str) == 'undefined' ) { str = "" ; } if ( typeof(f) == 'boolean' && this.dimFix == true ) { tag = 'style="height: '+this.dimH+'px; width: '+this.dimW+'px;"'; } if ( typeof(f) == 'string' ) { tag = 'class="'+f+'"'; } document.write('
'+str+'
'); }; this.chg_DIV = function (strObj,strValore) { // alert ( " cambiaObj strObj:"+strObj+" , strValore:"+strValore); var d = document; var p = d.getElementById(strObj); // alert ( " cambiaObj p="+p+"typeof="+typeof(p)); if ( p != null && typeof ( p ) == 'object' ) { p.innerHTML = strValore; p.display; } //alert ( "OUT cambiaObj ( "+strObj+" , "+strValore+" )"); }; this.show = function (n,r) { // alert( "show\n n:"+n+" , r:"+r); if ( typeof(n) == 'undefined' || n < 0 ) { n = 0; } n = n%this.length; // se è un numero grande riparto ! if ( typeof(r) == 'undefined' || r != 1 ) { r = 0; } // r recall: 0 no recall 1 recall // alert( "funzione show\n n:"+n+"\nr:"+r+"\npronta:"+this.contPronta[n]+"\npos:"+this.pos); // immagine if ( ( r == 0 && this.contPronta[n] == true ) || ( r == 1 && this.contPronta[n] == true && n == this.pos && this.imgMessa != n ) ) { // alert("Cambiero immagine con\nn:"+n); // prima invocazione o sostituzione dell'immagine alla scritta loading // Disegno dell'immagine this.pos = n; this.imgMessa = n; // // Controllo che l'immagine sia a posto ... // if ( this.contImmagini[n].complete != true ) // { // this.chg_DIV( this.name+'_divImage' // ,this.notAvail() // ); // } // else // { // Azzero eventuali scritte ... this.chg_DIV( this.name+'_divImage',""); // Preparo il posto per l'immagine this.chg_DIV( this.name+'_divImage',this.IMG_strTAG(n)); var img = getImage(this.name+'_Image'); //alert("img.name"+img.name); //alert("img.src"+img.src+" , -> "+this.contImmagini[n].src+" <-"); // metto l'immagine img.src = this.contImmagini[n].src; // } // alert("Cambiata immagine messa\nn:"+n); } else if ( r == 0 && this.contPronta[n] != true ) { this.pos = n; this.recall[n] = 0; // old_code this.chg_DIV( this.name+'_divImage' // ,"
loading ...
("+this.contTitolo[n]+")
" // ); this.chg_DIV( this.name+'_divImage' ,this.loadingString(n,this.recall[n],this.contTitolo[n]) ); this.prepare(n); // Attendo un po' ... setTimeout(this.name+".show("+n+",1)",this.timeRecall); } else if ( n == this.pos && this.recall[n] <= this.maxRecall && this.contPronta[n] != true ) { this.recall[n]++; // old_code this.chg_DIV( this.name+'_divImage' // ,"
loading ... ("+this.recall[n]+")
("+this.contTitolo[n]+")
" // ); this.chg_DIV( this.name+'_divImage' ,this.loadingString(n,this.recall[n],this.contTitolo[n]) ); // Attendo un po' ... ma limito i passaggi ! setTimeout(this.name+".show("+n+",1)",this.timeRecall); } // Pos if ( this.placedPos == true ) { this.chg_DIV(this.name+'_divPos',n+1 ); } // TotPos if ( this.placedTotPos == true ) { this.chg_DIV(this.name+'_divTotPos',this.length ); } // Titolo if ( this.placedTitolo == true && typeof(this.contTitolo[n]) != 'undefined' ) { this.chg_DIV(this.name+'_divTitolo',this.contTitolo[n]); } // Commento if ( this.placedCommento == true && typeof(this.contDescrizione[n]) != 'undefined' ) { this.chg_DIV(this.name+'_divCommento',this.contDescrizione[n]); } // SecRimasti if ( this.placedSecRimasti == true ) { this.chg_DIV(this.name+'_divSecRimasti',this.secRimasti); } }; this.loadingString = function(p,n,s) { if ( typeof(p) == 'undefined' ) { p = "" } if ( typeof(n) == 'undefined' ) { n = "" } if ( typeof(s) == 'undefined' ) { s = "" } return '
'+this.loadingStr+' (p:'+p+',n:'+n+')
'+s+'
'; } // this.notAvail = function() // { // return '
'+this.notAvailStr+'
'; // } this.showPrepare = function (i) { var n=0; var p=0; if ( typeof(i) == 'undefined' || i == 0 ) { i = 0; p = 0; n = 1; } if ( i > 0 ) { // se è un numero grande riparto ! p = i%this.length; n = (i+1)%this.length; } if ( i < 0 ) { // se è un numero negativo parto dal fondo ! // p = this.length + (i%this.length); p = p%this.length; n = this.length + ((i-1)%this.length); n = n%this.length; } this.prepare(n); this.show(p); }; this.play = function (b,l) { // alert("In Play"); // se this.sosPlayStop == true cambio il tasto e metto stop ... if ( this.sosPlayStop == true ) { if ( this.fitPlayStop != "stop" ) { this.fitPlayStop = "stop"; this.chg_DIV( this.name+'_divBtn_Play',this.BTN_strTAG('stop') ); } } if ( typeof(l) != 'undefined' && l > 0) { // alert("In Play, 0"); this.secRimasti = l - 1 ; this.chg_DIV(this.name+'_divSecRimasti',this.secRimasti); this.playTimeout=setTimeout(this.name+".play(true,"+this.secRimasti+")",1000); return; } // logica if ( ( typeof(b) == 'undefined' && this.playWorking != true ) || ( typeof(b) == 'boolean' && this.playWorking == true ) ) { // alert("In Play, 1"); //this.stop(); clearTimeout(this.playTimeout); if ( this.ImgMessa == -1 && this.pos == -1 ) { this.showPrepare(0); // alert("play -> 0 (-1)"); } else if ( this.imgMessa == this.pos ) { this.showPrepare(this.pos + 1); // alert("play -> this.pos + 1 :"+(this.pos + 1)); } else { this.showPrepare(0); // alert("play -> 0"); } this.playWorking = true; if ( this.placedSecRimasti == true ) { this.secRimasti = this.timeNext / 1000; this.chg_DIV(this.name+'_divSecRimasti',this.secRimasti); this.playTimeout=setTimeout(this.name+".play(true,"+this.secRimasti+")",1000); } else { this.playTimeout=setTimeout(this.name+".play(true)",this.timeNext); } } }; this.stop = function () { this.playWorking = false; clearTimeout(this.playTimeout); if ( this.placedSecRimasti == true ) { this.secRimasti = "-" ; this.chg_DIV(this.name+'_divSecRimasti',this.secRimasti); } if ( this.sosPlayStop == true ) { if ( this.fitPlayStop != "play" ) { this.fitPlayStop = "play"; this.chg_DIV( this.name+'_divBtn_Play',this.BTN_strTAG('play') ); } } }; this.rw = function () { this.stop(); this.showPrepare(this.pos - 1); }; this.ff = function () { this.stop(); this.showPrepare(this.pos + 1); }; this.openImage = function (url) { var h = screen.height / 2; var w = screen.width / 2; window.open(url ,'' ,'toolbar=yes,menubar=yes,status=yes,width='+w+',height='+h+',resizable=yes,scrollbars=yes,location=yes' ); } this.changeTime = function (sec) { // alert("In changeTime , sec:"+sec); sec = parseInt (sec); this.timeNext = sec*1000; } this.changeImg = function (nome,url) { var img = getImage(nome); img.src = url; } function getImage(name) { var A_img = document.images.length; var a=0; for ( a=0 ; a < A_img ; a++) { if ( document.images[a].name == name ) { return document.images[a]; } } return null; } return this; } // function doLink() // { // // Nota impostato se elenco gallerie // if ( PQCnome[pos] != null ) // { // document.PQCSlide.Quale.value = PQCnome[pos]; // document.PQCSlide.submit(); // } // // Nota impostato se galleria specifica // if ( PQCurl[pos] != null ) // { // //alert ("doLink : PQCurl["+pos+"]="+PQCurl[pos]); // clearTimeout(myTimeout); // NewNas=window.open(PQCurl[pos],"pippo","toolbar=yes,menubar=yes,status=yes,width=500,height=300,resizable=yes,scrollbars=yes,location=yes"); // //document.getElementById('PQCImgLink').target="_blank"; // //document.getElementById('PQCImgLink').href = PQCurl[pos]; // } // } // // onload = function() // function GalleriaInit() // { // predisponiQuesta(0); // mostraQuesta(0); // cambiaObj("SecRim",(durataScelta - durataCursore)); // // n=(pos+1)%PQCsrc.length; // predisponiQuesta(n); // // clearTimeout(myTimeout); // myTimeout = setTimeout("chk_cambia()",1000); // } // //