API tools faq
paste
Advertisement
marongiuchristian93

[JS] 8 - Galleria Foto Base

marongiuchristian93
Jul 11th, 2012
48
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.15 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>Galleria Foto</title>
  4. <meta name="author" content="Christian Marongiu" />
  5.     <style type="text/css">
  6.     a:link, a:hover, a:visited {
  7.         color: #FF0000;
  8.     }
  9.     </style>
  10.     <script type="text/javascript">
  11.  
  12. /*
  13. ##################################################################
  14. ## SCRIPT BY:   Christian Marongiu                              ##
  15. ## INFO:        http://chrmar.altervista.org                    ##
  16. ## CONTACT:     christianmarongiu93@gmail.com                   ##
  17. ## DATA:                10th May 2012 - 18.35                   ##
  18. ##                                                              ##
  19. ## Pagina HTML/JavaScript per generare delle palline            ##
  20. ## in movimento con numero di palline richiesto                 ##
  21. ##                                                              ##
  22. ## Fonte parziale: R.Nikolassy - JavaScript Edizioni Hoepli     ##
  23. ## Script riadattato e rielaborato con modifiche                ##
  24. ##################################################################
  25. */
  26.    
  27.     /*************************************************************************
  28.     ## Ecco come funziona:                      ##
  29.     ## Praticamente la funzione ChiediAlbum serve per vedere quale      ##
  30.     ## album l'utente vuole vedere. Aggiungendo dei CASE X (dove X      ##
  31.     ## è un numero), puoi aggiungere le funzioni per gli album. Ad         ##
  32.     ## esempio se tu chiedi il primo album, si attiva la funzione       ##
  33.     ## Album_1() perche' e' stata trovata tramite lo switch case,       ##
  34.     ## attivato appunto dalla ChiediAlbum(). InnerHTML e' una funzione  ##
  35.     ## del JavaScript che permette di modificare l'HTML di un certo     ##
  36.     ## elemento. Le varie funzioni Album_Y (dove Y e' un numero)        ##
  37.     ## servono per visualizzare l'album scelto. Se tu attivi la funzione    ##
  38.     ## Album_1() ad esempio, vedrai il primo album che e'           ##
  39.     ## "Compleanno di Melo" e per ora, ipoteticamente ha 30 foto. Se tu     ##
  40.     ## cambi la variabile nfoto, cambieranno il numero di foto che escono   ##
  41.     ## perche' sono generate da un FOR, se vedi. Invece la variabile    ##
  42.     ## NALBUM serve per la funzione mostraFoto. E' un elemento che le viene ##
  43.     ## passato in modo da farle capire il numero della foto da visualizzare.## 
  44.     ## Quando clicchi sul link di una foto (es. la 5) la funzione riceve due##
  45.     ## elementi. infatti vedrai in basso apparire qualcosa come     ##
  46.     ## javascript:MostraFoto(5,1). Questo perche' il 5 indica il numero ##
  47.     ## della foto, mentre 1 indica il numero dell'album.            ##
  48.     ## Durante la funzione Album_1() viene generato tramite FOR un elenco   ##
  49.     ## di foto che parte da 1 fino a il numero delle foto impostato (es. 30)##
  50.     ## In questa generazione cambia anche la funzione MostraFoto in base    ##
  51.     ## alla variabile I data al FOR. SE devi fare delle modifiche tieniti   ##
  52.     ## questa pagina di backup, che casomai poi ti aiuto io a modificare    ##
  53.     *************************************************************************/
  54.    
  55.     function ChiediAlbum(x) {
  56.     // Qui ci va l'elenco delle funzioni x gli album   
  57.         switch(x) {
  58.         case 1:
  59.             document.getElementById("album_scelto").innerHTML="<br>Hai scelto di visuallizare il primo album<br>";
  60.             Album_1();
  61.             break;
  62.         case 2:
  63.             document.getElementById("album_scelto").innerHTML="<br>Hai scelto di visuallizare il secondo album<br>";
  64.             Album_2();
  65.             break;         
  66.         }
  67.     }
  68.            
  69.     function Album_1() {
  70.     // Funzione per il primo album
  71.     // Album 1 
  72.     var nalbum = 1; // Album numero 1
  73.     var nfoto = 30; // Numero di foto dell'album - si può modificare  
  74.         document.getElementById("gallery").innerHTML = "<br>Ci sono <b>"+ nfoto +"</b> foto nell'album.<br>Scegli la foto:<br><br>";           
  75.         for(i=1;i<=nfoto;i++) {        
  76.             document.getElementById("gallery").innerHTML += "<a href='javascript:mostraFoto("+i+","+nalbum+")'>"+ i +"</a> - ";
  77.         }              
  78.     } // Fine funzione album 1
  79.    
  80.     function Album_2() {
  81.     // Funzione per il secondo album
  82.     // Album XYZ   
  83.     var nalbum = 2; // Album numero 2
  84.     var nfoto = 23; // Numero di foto dell'album - si può modificare  
  85.         document.getElementById("gallery").innerHTML = "<br>Ci sono <b>"+ nfoto +"</b> foto nell'album.<br>Scegli la foto:<br><br>";           
  86.         for(i=1;i<=nfoto;i++) {        
  87.             document.getElementById("gallery").innerHTML += "<a href='javascript:mostraFoto("+i+","+nalbum+")'>"+ i +"</a> - ";
  88.         }              
  89.     } // Fine funzione album 2 
  90.    
  91.     function mostraFoto(n, numAlbum) {             
  92.         document.getElementById("photo").innerHTML = "<br><br><div align='center'><img src='http://sito.org/photos/album"+numAlbum+"/"+n+".jpg' /></div>";
  93.     }
  94.  
  95.     </script>
  96.  
  97. </head>
  98. <body>
  99.  
  100.  
  101. <div id="album" style="color: #FFFFFF; font-family: Comic Sans MS; text-align: center;">
  102. Scegli l'album da visualizzare: <br>
  103. <a href="javascript:ChiediAlbum(1)">Album 1</a><br>
  104. <a href="javascript:ChiediAlbum(2)">Album 2</a><br>
  105. <!-- QUI SI POSSONO AGGIUNGERE ALTRI ALBUM OVVIAMENTE METTENDO IL NUMERO GIUSTO NELLA FUNZIONE CHIEDIALBUM -->
  106. </div>
  107.  
  108. <div id="album_scelto" style="color: #FFFFFF; font-family: Comic Sans MS; text-align: center;"></div>
  109.  
  110. <div id="gallery" style="color: #FFFFFF; font-family: Comic Sans MS; text-align: center;"></div>
  111.  
  112. <span id="photo" style="color: #FFFFFF; font-family: Comic Sans MS; text-align: center;"></span>
  113. </body>
  114. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!