Come è stata fatta questa "photogallery"?

**d-force** · 21-07-2005, 15:27

Ciao a tutti,

vi posto direttamente la ULR http://www.hotelparaisoperdido.com/EN/gallery.html

Qualcuno di voi sa come è stata fatta?

Ho provato anche a scaricare il files in .js ma niente da fare

Potreste darmi una dritta giusta per farla uguale?

Grazie 1000!

d-force

**badaze** · 21-07-2005, 17:27

Prova questo ( x IE ). Forse se domani ho tempo daro' un'occhiata più approfondita.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var arrFoto = new Array();
arrFoto[0] = "http://www.hotelparaisoperdido.com/common/images/gallery/inside/photo1.jpg";
arrFoto[1] = "http://www.hotelparaisoperdido.com/common/images/gallery/inside/photo2.jpg";
arrFoto[2] = "http://www.hotelparaisoperdido.com/common/images/gallery/inside/photo3.jpg";
arrFoto[3] = "http://www.hotelparaisoperdido.com/common/images/gallery/inside/photo4.jpg";
arrFoto[4] = "http://www.hotelparaisoperdido.com/common/images/gallery/inside/photo5.jpg";
arrFoto[5] = "http://www.hotelparaisoperdido.com/common/images/gallery/inside/photo6.jpg";
arrFoto[6] = "http://www.hotelparaisoperdido.com/common/images/gallery/inside/photo7.jpg";
arrFoto[7] = "http://www.hotelparaisoperdido.com/common/images/gallery/inside/photo8.jpg";

var curSlide = '';
var curFoto  = -1;
var curArr   = new Array();
function show(slide, anArray) {
 //-------- Chiudo un slide aperto
 if (curSlide != '') {
  closeSlide(curSlide);
 } //  if (curSlide != '')
 //-------- Dati del slide corrente
 curArr   = anArray;
 curSlide = slide;
 curFoto  = 0;
 //-------- Preparo la prima foto;
 showPhoto(curFoto)
 //-------- Mostro il div
 divId    = "div"+curSlide; 
 document.getElementById(divId).className  = "showSlide";
} // function show(slide, anArray)

function showPhoto(numero) {
  //-------- Assegno il numero dell'immagine
  imageId  = "image"+curSlide;
  document.getElementById(imageId).src = curArr[numero];
	//-------- Modifico il contenuto dello span
	spanId   = "count"+curSlide;
	document.getElementById(spanId).innerHTML = (numero+1)+'/'+(curArr.length);
} // function showPhoto(numero)

function closeSlide(slide) {
 //-------- Nascondo il div
 divId    = "div"+curSlide;
 document.getElementById(divId).className  = "hiddenSlide";
} // function closeSlide(slide)

//------------ Immagine precedente
function next() {
 curFoto++;
 if (curFoto > curArr.length-1) {curFoto = curArr.length-1} 
 showPhoto(curFoto);
} // function next()

//------------ Prossima immagine
function previous() {
 curFoto--;
 if (curFoto < 0) {curFoto = 0} 
 showPhoto(curFoto);
} // function previous()

//-->
</script>

<style type="text/css">
<!--
.hiddenSlide {position:absolute;left:-1000;top:-1000}
.showSlide   {position:absolute;left:300;top:100}

-->
</style>


</head>
<body bgcolor="white">

<div id="div1" class="hiddenSlide" style="width:510px;">
 <table summary="" style="width:500px;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40)" border="1" >
  <tr>
   <td width="100%" align="right" onclick="closeSlide('1')" bgcolor="yellow">
	  Close
	 </td>
  </tr>
	<tr>
	 <td align="center"> 
	  <table style="width:400px;filter:progid:none">
	   <tr>
      <td width="100%" align="center" bgcolor="white">
		   [img][/img]
			</td>
	   </tr>
	  </table>
	 </td>
  </tr>
	<tr>
   <td width="100%" align="center" id="pippo1" bgcolor="yellow">
	  <
	  
	  <span id="count1"></span>
	  
	  >
	 </td>
  </tr>	
 </table>
</div>


<input type="button" value="Show" onclick="show('1',arrFoto)">
Pippo.it il cercatrova

Portale per ricerche in Internet: news, previsioni del tempo e bollettino della

neve, orario dei treni, notizie di borsa, oroscopo, cerca trova lavoro, ...

www.pippo.it/ - 37k - 19 juil 2005 - En cache - Pages similaires 



Pippo.com: another building in the cyberspace

Vari documenti tra cui la Guida ad Internet e FAQ su Linux.
 
www.pippo.com/ - 10k - En cache - Pages similaires 



Pippo Pollina - [ Traduire cette page ]

Cantautore italiano.

www.pippopollina.com/ - 2k - En cache - Pages similaires 



pippopollina

Statistiche.

www.pippopollina.com/flash.htm - 11k - En cache - Pages similaires 



Pippo-Pompoen

officiële website van de tijdschriften Pippo en Pompoen.

www.pippo.nl/ - 3k - En cache - Pages similaires 



Carrosserie Del Pippo

Carrosserie située à Montreuil en Seine Saint Denis, réparation de toutes marques

de vehicules, voitures de luxe, agréer par toutes les partenaires ...

www.carrosseriedelpippo.com/ - 17k - En cache - Pages similaires 



:::Il sito ufficiale di Pippo Matino...........ESSENTIAL TEAM ...

Pippo matino web site...........biografia, discografia del famoso artista italiano.V
www.pippomatino.com/ - 2k - En cache - Pages similaires 




</body>
</html>

**d-force** · 21-07-2005, 17:46

VVoVe: sei un GRANDE!!!

L'ho appena testata...e funziona!

Batsa fare una messa a punto della grafica e dovrebbe andare bene.

Se domani gli dai un'occhiata più approfondita fammi sapare!

grazie 1000!!!

d-force

**d-force** · 21-07-2005, 18:20

Ciao badaze,

allora l'ho messa on-line qua: http://www.piedicosta.com/piedicosta...otografie2.htm

Vorrei personalizzarla un pò come segue:

- si vedono gli spazi tra le celle della tabella anche se ho inserito

codice:

border="0" cellspacing="0" cellpadding="0"

Non capisco l'errore che mi da, quando clicco sulla freccia DX (next) :master: Dove ho sbagliato?

Grazie in anticipo per il tuo aiuto...

d-force

**Janet** · 21-07-2005, 18:30

nella mia ignoranza in materia di js, credo che per quel che riguarda l'errore quando clicchi sulla freccia avanti è che ha come collegamento "http://www.piedicosta.com/piedicosta2006/italiano/java%20script:next()"
e non è propriamente corretto visto che "java%20script:next()" non è una pagina ma un comando js.

quindi o utilizzi solo il comando in js per andare avanti o fai un collegamento diretto con il link per esteso.

Janet

**d-force** · 21-07-2005, 18:55

Si, OK...infatti adesso ho cambiaot un parametro e funziona.

Ma ancora non riesco a capire come posso togliere lo spazio tra le celle (ho giaà inserito cellspacing e cellpadding ="0"

d-force

**badaze** · 22-07-2005, 11:26

Prova questo

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
<!--
var arrFoto = new Array();
arrFoto[0] = "http://www.hotelparaisoperdido.com/common/images/gallery/inside/photo1.jpg";
arrFoto[1] = "http://www.hotelparaisoperdido.com/common/images/gallery/inside/photo2.jpg";
arrFoto[2] = "http://www.hotelparaisoperdido.com/common/images/gallery/inside/photo3.jpg";
arrFoto[3] = "http://www.hotelparaisoperdido.com/common/images/gallery/inside/photo4.jpg";
arrFoto[4] = "http://www.hotelparaisoperdido.com/common/images/gallery/inside/photo5.jpg";
arrFoto[5] = "http://www.hotelparaisoperdido.com/common/images/gallery/inside/photo6.jpg";
arrFoto[6] = "http://www.hotelparaisoperdido.com/common/images/gallery/inside/photo7.jpg";
arrFoto[7] = "http://www.hotelparaisoperdido.com/common/images/gallery/inside/photo8.jpg";

var curSlide = '';
var curFoto  = -1;
var curArr   = new Array();
function show(slide, anArray) {
 //-------- Chiudo un slide aperto
 if (curSlide != '') {
  closeSlide(curSlide);
 } //  if (curSlide != '')
 //-------- Dati del slide corrente
 curArr   = anArray;
 curSlide = slide;
 curFoto  = 0;
 //-------- Preparo la prima foto;
 showPhoto(curFoto)
 //-------- Mostro il div
 divId    = "div"+curSlide; 
 document.getElementById(divId).className  = "showSlide";
} // function show(slide, anArray)

function showPhoto(numero) {
  //-------- Assegno il numero dell'immagine
  imageId  = "image"+curSlide;
  document.getElementById(imageId).src = curArr[numero];
	//-------- Modifico il contenuto dello span
	spanId   = "count"+curSlide;
	document.getElementById(spanId).innerHTML = (numero+1)+'/'+(curArr.length);
} // function showPhoto(numero)

function closeSlide(slide) {
 //-------- Nascondo il div
 divId    = "div"+curSlide;
 document.getElementById(divId).className  = "hiddenSlide";
} // function closeSlide(slide)

//------------ Immagine precedente
function next() {
 curFoto++;
 if (curFoto > curArr.length-1) {curFoto = curArr.length-1} 
 showPhoto(curFoto);
} // function next()

//------------ Prossima immagine
function previous() {
 curFoto--;
 if (curFoto < 0) {curFoto = 0} 
 showPhoto(curFoto);
} // function previous()

//-->
</script>

<style type="text/css">
<!--
.hiddenSlide {position:absolute;left:-1000;top:-1000}
.showSlide   {position:absolute;left:300;top:100}
-->
</style>


</head>
<body bgcolor="blue">

<div id="div1" class="hiddenSlide" style="width:510px;">
 <table style="width:500px;" border="0" cellpadding="0" cellspacing="0" >
  <tr>
   <td width="100%" align="right" onclick="closeSlide('1')" style="background-color:yellow">
	  Close
	 </td>
  </tr>
	<tr>
	 <td align="center" valign="top" bgcolor="white"> 
	  <table style="width:400px;" border="0" cellpadding="0" cellspacing="0">
	   <tr>
      <td width="100%" align="center" bgcolor="white">
		   [img][/img]
			</td>
	   </tr>
	  </table>
	 </td>
  </tr>
	<tr>
   <td width="100%" align="center" id="pippo1" bgcolor="yellow">
	  <
	  
	  <span id="count1"></span>
	  
	  >
	 </td>
  </tr>	
 </table>
</div>


<input type="button" value="Show" onclick="show('1',arrFoto)">
Pippo.it il cercatrova

Portale per ricerche in Internet: news, previsioni del tempo e bollettino della

neve, orario dei treni, notizie di borsa, oroscopo, cerca trova lavoro, ...

www.pippo.it/ - 37k - 19 juil 2005 - En cache - Pages similaires 



Pippo.com: another building in the cyberspace

Vari documenti tra cui la Guida ad Internet e FAQ su Linux.
 
www.pippo.com/ - 10k - En cache - Pages similaires 



Pippo Pollina - [ Traduire cette page ]

Cantautore italiano.

www.pippopollina.com/ - 2k - En cache - Pages similaires 



pippopollina

Statistiche.

www.pippopollina.com/flash.htm - 11k - En cache - Pages similaires 



Pippo-Pompoen

officiële website van de tijdschriften Pippo en Pompoen.

www.pippo.nl/ - 3k - En cache - Pages similaires 



Carrosserie Del Pippo

Carrosserie située à Montreuil en Seine Saint Denis, réparation de toutes marques

de vehicules, voitures de luxe, agréer par toutes les partenaires ...

www.carrosseriedelpippo.com/ - 17k - En cache - Pages similaires 



:::Il sito ufficiale di Pippo Matino...........ESSENTIAL TEAM ...

Pippo matino web site...........biografia, discografia del famoso artista italiano.V
www.pippomatino.com/ - 2k - En cache - Pages similaires 




</body>
</html>

Discussione: Come è stata fatta questa "photogallery"?

Strumenti discussione

Ricerca discussione

Visualizza

Come è stata fatta questa "photogallery"?

Permessi di invio