You're here: Snippet Directory » HTML/JavaScript (65)
Language:

Image Gallery

Language: English
Programming Language: JavaScript
Published by: aimper [not registered]
Last Update: 5/15/2006
Views: 618

Description

To create a gallery with image and thumbnails on your web pages.Supported from both Microsoft and Netscape browsers.It use a "header" file for all declaration of variables.Can be placed inline in the <script src...></script> tags.Include a script to create a navigation menu for the galleryNote: docs in italian only

Code

1 /* 2 Author: Augusto Fiastrelli 3 Web: http://utenti.tripod.it/AFiastrelli/ 4 E-mail: afiastrelli@hotmail.com 5 */ 6 7 /* File initschedario.js 8 9 -------SCRIPT DI INIZIALIZZAZIONE PER SCHEDARIO IMMAGINI IN JAVASCRIPT------------------------------------------ 10 11 PARAMETRI: 12 13 Input: 14 15 NOME VALORE DEFAULT 16 17 nome nome del componente "Schedario1" 18 nomehtm nome del file .htm "Schedario1.htm" 19 imgCount numero massimo di immagini 0 20 imgAltezza h 100 21 imgLarghezza l ( dimensioni thumbnails ) 100 22 bordi bordi per le immagini 0 23 colore colore del testo #000000 24 path percorso per le immagini "" 25 prefThum prefisso per i thumbnails "th" 26 extThum estensione file thumbnails ".jpg" 27 prefImg prefisso per le immagini "img" 28 extImg estensione per le immagini ".jpg" 29 iPerRow immagini per riga 3 30 iPerCol immagini per colonna 3 31 titolo titolo del documento "" 32 table parametri del tag <TABLE> "" 33 tableStile attributi per il parametro "stile" del tag <TABLE> "" 34 menu associazione al componente "men" TRUE 35 36 37 Output: 38 39 handle all' oggetto schedario, ottenuto tramite "new"; 40 il costruttore della classe visualizza automaticamente 41 la pagina secondo i parametri passati. 42 43 Descrizione: 44 45 vedere l' intestazione a schedario.js. 46 47 ****************************************************************************** 48 49 */ 50 51 /*-------------------------------------------------------------- 52 Assegnazione dei parametri e dichiarazione 53 di un nuovo oggetto com.schedario_immagini 54 ------------------------------------------------------------- */ 55 56 function schedario1_init(){ 57 _param_ = new Object(); 58 _param_.nome = "schedario1"; 59 _param_.nomeFileHtm = "schedario.htm"; 60 _param_.path = ""; 61 _param_.titolo = "Ciao"; 62 _param_.imgCount = 30; 63 _param_.prefThum = "img"; 64 _param_.extThum = ".jpg"; 65 _param_.prefImg = "img"; 66 _param_.extImg = ".jpg"; 67 _param_.imgPerRow = 3; 68 _param_.imgPerCol = 3; 69 _param_.imgAltezza = "100"; 70 _param_.imgLarghezza = "100"; 71 _param_.bordi = 1; 72 _param_.tableStile = ""; 73 _param_.menu = true; 74 _param_.table = ""; 75 schedario1 = new com_schedario_immagini(_param_); 76 } 77 schedario1_init(); 78 79 /* File schedarioimmaginicom.js 80 81 --------------------------------SCHEDARIO IMMAGINI PER JAVASCRIPT------------------------------------------ 82 83 PARAMETRI: 84 85 Input: 86 87 NOME VALORE DEFAULT 88 89 nome nome del componente "Schedario1" 90 nomehtm nome del file .htm "Schedario1.htm" 91 imgCount numero massimo di immagini 0 92 imgAltezza h 100 93 imgLarghezza l ( dimensioni thumbnails ) 100 94 bordi bordi per le immagini 0 95 colore colore del testo #000000 96 path percorso per le immagini "" 97 prefThum prefisso per i thumbnails "th" 98 extThum estensione file thumbnails ".jpg" 99 prefImg prefisso per le immagini "img" 100 extImg estensione per le immagini ".jpg" 101 iPerRow immagini per riga 3 102 iPerCol immagini per colonna 3 103 titolo titolo del documento "" 104 table parametri del tag <TABLE> "" 105 tableStile attributi per il parametro "stile" del tag <TABLE> "" 106 menu associazione al componente "men" TRUE 107 108 Nota: per l' input utilizzare il file "init_schedario", che richiede gli stessi parametri. 109 110 Output: 111 112 tabella formattata secondo l' indicazione del numero d' immagini per riga e per colonna, 113 in modo da essere posizionata correttamente anche alla fine della numerazione; 114 immagini che corrispondono alle indicazioni di prefisso ed estensione pi 115 un numero finale progressivo in coda al nome; 116 collegamenti alle immagini per ogni thumbnails; 117 collegamenti di tipo "precedente" e "successivo" alle relative pagine. 118 119 esempio : 120 per visualizzare le immagini contenute nella directory img (percorso relativo) 121 con il nome th1.jpg, th2.jpg, th3.jpg, linkate rispettivamente a img1.jpg,img2.jpg,img3.jpg, 122 bisogna indicare: 123 124 imgCount=3, path="img", prefThum="th", extThum=".jpg", prefImg="img", extImg=".jpg". 125 126 Descrizione: 127 128 questa nuova release di schedario immagini funziona come componente "in-line" per entrambi i browser 129 IE e Netscape. 130 il costruttore contenuto in questo file deve essere richiamato da uno script di inizializzazione; 131 la chiamata implicitamente attiva la generazione di codice Html; 132 l' ordine da seguire nella dichiarazione degli script, per non avere messaggi d' errore come 133 "schedario1 non un oggetto" : oggetto script schedario (questo file) - script di dichiarazione 134 (l' altro file .js contenuto in questa release relativo a schedario). 135 136 NOTE DI VERSIONE: 137 138 Versione 1.0 139 - lo script non pu essere utilizzato "in-line"; la distribuzione prevede un solo file htm contenente 140 tutto il codice. 141 142 Versione 2.0 (questa release) 143 144 - grazie al modello ad oggetti con cui implementato, questo script pu essere 145 incluso in una pagina html come un normale componente o applet java; 146 - gli oggetti necessari all' esecuzione del componente sono inizializzati in un 147 file separato .js, per cui utilizzando pi script di inizializzazione e un 148 solo file con il componente vero e proprio, otterrete tutti gli oggetti di cui avete 149 bisogno; 150 - secondo la sintassi XML, contenuta nel file separato .scc, questo componente 151 riutilizzabile anche in ambienti di programmazione visuale come NetObjects 152 ScriptBuilder 3; 153 - nuovi parametri aggiuntivi: 154 155 attributi e parametro stile per il tag <TABLE>; 156 percorso per le immagini; 157 nome del componente; 158 condizione per l' inclusione di un menu di navigazione. 159 160 - lo script rimane utilizzabile in un frameset; 161 - la distribuzione comprende i due file .js per l' inizializzazione e la dichiarazione 162 del componente, pi un file .scc per le specifiche XML. 163 164 ****************************************************************************** 165 166 */ 167 168 /*-------------------------------------------- 169 Costruttore del componente script 170 -------------------------------------------- */ 171 172 function com_schedario_immagini(params) { 173 174 //interfaccia componente 175 this.nome=( params.nome +"" != "undefined" ? params.nome : "Schedario1"); 176 this.nomeFileHtm=(params.nomeFileHtm + "" != "undefined" ? params.nomeFileHtm : "schedario1.htm"); 177 this.path=(params.path + "" != "undefined" ? params.path : ""); 178 this.titolo=(params.titolo + "" != "undefined" ? params.titolo : ""); 179 this.imgCount=(params.imgCount + "" != "undefined" ? params.imgCount : 0); 180 this.prefThum=(params.prefThum + "" != "undefined" ? params.prefThum : "th"); 181 this.extThum=(params.extThum + "" != "undefined" ? params.extThum :".jpg"); 182 this.prefImg=(params.prefImg + "" != "undefined" ? params.prefImg : "img"); 183 this.extImg=(params.extImg +"" !="undefined" ? params.extImg :".jpg"); 184 this.imgPerRow=(params.imgPerRow +"" != "undefined" ? params.imgPerRow : 3 ); 185 this.imgPerCol=(params.imgPerCol +"" != "undefined" ? params.imgPerCol :3 ); 186 this.imgAltezza=(params.imgAltezza + "" != "undefined" ? params.imgAltezza : 100); 187 this.imgLarghezza=(params.imgLarghezza + "" != "undefined" ? params.imgLarghezza : 100); 188 this.bordi=(params.bordi + "" != "undefined" ? params.bordi : 0 ); 189 this.colore=(params.colore + "" != "undefined" ? params.colore : "#000000"); 190 this.menu=(params.menu + "" != "undefined" ? params.menu : true); 191 this.table=(params.table + "" != "undefined" ? params.table : "" ); 192 this.tableStile=(params.tableStile + "" != "undefined" ? params.tableStile : "" ); 193 this.GetCur=GetCur; 194 this.Vai=Vai; 195 this.CreaTabella=CreaTabella; 196 this.SetCookie=SetCookie; 197 this.GetCookie=GetCookie; 198 this.delimitatore=""; 199 //fine interfaccia e membri pubblici 200 201 202 if ( this.path != "" && this.path.substring(this.path.lenght -1, this.path.lenght) != "/") this.delimitatore = "/"; 203 this.Dexpire=new Date(); 204 this.Dexpire.setTime(this.Dexpire.getTime() + (48 * 60 * 60 * 1000 * 365)); 205 var p=this.GetCur(); 206 this.Vai(p); 207 this.CreaTabella(p); 208 209 function Vai(m_cur) { 210 211 var x; 212 var y=m_cur; 213 var num=parseInt((this.imgCount-1)/(this.imgPerCol*this.imgPerRow)); 214 215 var pag=this.GetCookie("pagina",this.Dexpire,"/",null,false); 216 if (this.menu == true) { 217 this.SetCookie("com_nome",this.nome,this.Dexpire,"/",null,false); 218 this.SetCookie("titolo",this.titolo,this.Dexpire,"/" ,null,false); 219 this.SetCookie("perRiga",this.imgPerRow,this.Dexpire,"/" ,null,false); 220 this.SetCookie("perColonna",this.imgPerCol,this.Dexpire,"/" ,null,false); 221 this.SetCookie("massimo",this.imgCount,this.Dexpire,"/" ,null,false); 222 this.SetCookie("percorso",this.path,this.Dexpire,"/" ,null,false); 223 this.SetCookie("nomeFileHtm",this.nomeFileHtm,this.Dexpire,"/" ,null,false); 224 } 225 if ((pag==null)|| (pag > num)) pag=0; 226 227 document.writeln("<script language=javascript>"); 228 document.writeln('var page=' + pag + ';'); 229 document.writeln("var max=" + num + ";" ); 230 document.writeln(" function Conta(direct) { "); 231 document.writeln(" var exp=new Date(); "); 232 document.writeln(" exp.setTime(exp.getTime() + (48 * 60 * 60 * 1000 * 365)); "); 233 document.writeln(' if (direct=="P") { '); 234 document.writeln(" if ( page > 0) { page--; "); 235 document.writeln(' SetCookie("'+ this.nome + 'pagina",page,exp,"/",null,false); '); 236 document.writeln(" } "); 237 document.writeln(" } "); 238 document.writeln(' if (direct=="S") { '); 239 document.writeln(" if ( page < max) { "); 240 document.writeln(" page++; "); 241 document.writeln(' SetCookie("'+ this.nome + 'pagina",page,exp,"/",null,false); '); 242 document.writeln(" } "); 243 document.writeln(" } "); 244 document.writeln(" } "); 245 document.writeln(" function SetCookie(name,value) { "); 246 document.writeln(" var argv = SetCookie.arguments; "); 247 document.writeln(" var argc = SetCookie.arguments.length; "); 248 document.writeln(" var expires =(2 < argc) ? argv[2]: null; "); 249 document.writeln(" var path = (3 < argc) ? argv[3]: null ; "); 250 document.writeln(" var domain = (4 < argc) ? argv[4]:null; "); 251 document.writeln(" var secure = (5 < argc) ? argv[5] : false; "); 252 document.writeln(' document.cookie=name + "=" + escape(value) + '); 253 document.writeln(' ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + '); 254 document.writeln(' ((path == null) ? "" : ("; path=" + path)) + '); 255 document.writeln(' ((domain == null) ? "" : ("; domain=" + domain)) + '); 256 document.writeln(' ((secure == true) ? "; secure" : ""); '); 257 document.writeln(" } "); 258 document.writeln("</scr" + "ipt>"); 259 260 261 function getCookieVal(offset) { 262 var endstr=document.cookie.indexOf(";", offset); 263 if (endstr == -1) 264 endstr = document.cookie.length; return unescape(document.cookie.substring(offset,endstr)); 265 266 } 267 268 function GetCookie(name) 269 { 270 var arg=this.nome + name + "="; 271 var alen=arg.length; 272 var clen=document.cookie.length; 273 var i=0; 274 275 while (i < clen) 276 { 277 var j=i+alen; 278 if (document.cookie.substring(i, j) == arg) 279 return getCookieVal (j); 280 281 i = document.cookie.indexOf(" ", i) + 1; 282 if (i == 0) 283 break; 284 } 285 return null; 286 } 287 288 function SetCookie(name, value) { 289 var argv=SetCookie.arguments; 290 var argc=SetCookie.arguments.length; 291 var expires=(2 < argc) ? argv[2] : null; 292 var path = (3 < argc) ? argv[3] : null; 293 var domain = (4 < argc) ? argv[4] : null; 294 var secure = (5 < argc) ? argv[5] : false; 295 if ( eval(name != "com_nome")) { 296 document.cookie = this.nome + name + "=" + escape(value) + 297 ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 298 ((path == null) ? "" : ("; path=" + path)) + 299 ((domain == null) ? "" : ("; domain=" + domain)) + 300 ((secure == true) ? "; secure" : ""); 301 } else { 302 document.cookie = name + "=" + escape(value) + 303 ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + 304 ((path == null) ? "" : ("; path=" + path)) + 305 ((domain == null) ? "" : ("; domain=" + domain)) + 306 ((secure == true) ? "; secure" : ""); 307 } 308 } 309 310 function CreaTabella(m_cur) { 311 var SrcImg; 312 var SrcThu; 313 var rows; 314 var cols; 315 var max4pg=this.imgPerCol*this.imgPerRow; 316 if ((this.imgCount-m_cur)<max4pg) { 317 rows=parseInt((this.imgCount-m_cur) / this.imgPerCol); 318 if (((this.imgCount-m_cur)%this.imgPerCol)!=0) rows++; 319 if (rows>1) 320 cols=this.imgPerCol ; 321 else 322 cols=(this.imgCount-m_cur); 323 } else { 324 cols=this.imgPerCol; 325 rows=this.imgPerRow; 326 } 327 328 document.writeln('<table style="' + this.tableStile + '" ' + this.table); 329 document.writeln(" cols=" + cols + " rows=" + rows + " cellspacing=20 cellpadding=0 border=0 width=100% height=90% >"); 330 for ( i = m_cur; i < m_cur + max4pg; i++ ){ 331 SrcImg =this.path + this.delimitatore + this.prefImg + i + this.extImg; 332 SrcThu= this.path+ this.delimitatore + this.prefThum + i + this.extThum; 333 if (i< this.imgCount) { 334 if ((i % this.imgPerCol)==0) document.writeln("<tr width=100% height=1*>"); 335 document.writeln('<td width=1*><a href="' + SrcImg + '")>'); 336 document.writeln("<img src=" + SrcThu + " id=" + i + " hspace=0 vspace=0 width=" + this.imgLarghezza + " height=" + this.imgAltezza + " align=absmiddle border=" + this.bordi + ">"); 337 document.writeln("</a>"); 338 } 339 } 340 document.writeln("</table>"); 341 document.writeln("<hr>"); 342 document.writeln("<table cols=2 width=100%><tr width=100%>"); 343 344 if (m_cur > max4pg - 1 ) { 345 document.writeln('<td align=left width=50%><A href=' + this.path + this.delimitatore + this.nomeFileHtm + ' onclick=Conta("P")>'); 346 document.writeln("<font color="+ this.colore +" face=Arial size=2 id=prev><b>&lt&lt</b></font></a>"); 347 } 348 349 350 if ( m_cur< this.imgCount - max4pg - 1 ) { 351 document.writeln('<td align=right width=50%><A href=' + this.path + this.delimitatore + this.nomeFileHtm + ' onclick=Conta("S")>'); 352 document.writeln("<font color=" + this.colore + " face=Arial size=2 id=succ><b>&gt&gt</b></font></a>"); 353 } 354 document.writeln("</table>"); 355 window.status=""; 356 357 } 358 359 function GetCur() { 360 var x=this.GetCookie("pagina",this.Dexpire,"/" ,null,false); 361 if ((x==false)||(x==null)) { 362 return 0; 363 } else { 364 x = x * this.imgPerCol* this.imgPerRow; 365 if (x > this.imgCount) 366 return 0; 367 else 368 if (x > (parseInt(( this.imgCount-1)/(this.imgPerCol* this.imgPerRow))*(this.imgPerRow*this.imgPerCol))) 369 return (parseInt((this.imgCount-1)/(this.imgPerCol*this.imgPerRow))*(this.imgPerRow*this.imgPerCol)); 370 else 371 return x; 372 } 373 } 374 } 375 376 /* File initmenu.js 377 378 -------SCRIPT DI INIZIALIZZAZIONE PER MENU SCHEDARIO IN JAVASCRIPT------------------------------------------ 379 380 PARAMETRI: 381 382 Input: 383 384 NOME VALORE DEFAULT 385 386 frameTarget frame di destinazione per i tag <A> "_blank" 387 linkstile attributi del parametro stile per i tag <A> "" 388 font parametri per i tag <FONT> "face=arial size=1" 389 fontStile attributi del parametro stile per i tag <FONT> "" 390 391 Output: 392 393 il costruttore della classe visualizza automaticamente la pagina html, 394 e restituisce l' handle all' oggetto menu_schedario, ottenuto tramite "new"; 395 396 Descrizione: 397 398 vedere l' intestazione a menu_schedario.js. 399 400 ****************************************************************************** 401 402 */ 403 404 /*-------------------------------------------------------------- 405 Assegnazione dei parametri e dichiarazione 406 di un nuovo oggetto com.menu_schedario 407 ------------------------------------------------------------- */ 408 409 function menu_init() { 410 var _param_ = new Object(); 411 _param_.frameTarget="main"; 412 _param_.font="face=arial size=1"; 413 _param_.fontStile="COLOR: blue"; 414 _param_.linkStile="TEXT-DECORATION: none"; 415 menu1=new com_menu_schedario(_param_); 416 } 417 menu_init(); 418 419 /* File com_menu_schedario.js 420 421 -------MENU DI NAVIGAZIONE PER SCHEDARIO IMMAGINI IN JAVASCRIPT------------------------------------------ 422 423 PARAMETRI: 424 425 Input: 426 427 NOME VALORE DEFAULT 428 429 frameTarget frame di destinazione per i tag <A> "_blank" 430 linkstile attributi del parametro stile per i tag <A> "" 431 font parametri per i tag <FONT> "face=arial size=1" 432 fontStile attributi del parametro stile per i tag <FONT> "" 433 434 Nota: per l' input utilizzare il file "init_menu_schedario", 435 436 Output: 437 438 numerazione delle immagini contenute nello schedario, in forma di elenco 439 ad intervalli. 440 441 Descrizione: 442 443 questa nuova release di menu per lo schedario immagini funziona come componente "in-line" per entrambi i browser 444 IE e Netscape. 445 il costruttore contenuto in questo file deve essere richiamato da uno script di inizializzazione; 446 la chiamata implicitamente attiva la generazione di codice Html; 447 l' ordine da seguire nella dichiarazione degli script, per non avere messaggi d' errore come 448 "menu1 non un oggetto" : oggetto script menu schedario (questo file) - script di dichiarazione 449 (l' altro file .js contenuto in questa release relativo a menu_schedario). 450 451 NOTE DI VERSIONE: 452 453 Versione 1.0 454 - lo script non pu essere utilizzato "in-line"; la distribuzione prevede un solo file htm contenente 455 tutto il codice. 456 457 Versione