galleria immagini array innerHTML

**ntoflip** · 30-10-2008, 15:25

Ciao a tutti sono nuovo per tutto quello che riguarda il web, ma sto muovendo i primi passi..
Ho realizzato una gestione privata delle immagini per un cliente con php, in modo che possa inserire e cancellare le immagini nel proprio sito.. Adesso però è arrivato il momento che quelle immagini siano visualizzate nella galleria pubblica ai visitatori..

Quindi tramite database ricavo un array php con i nomi dei files delle immagini caricate in una determinata cartella (ci sarebbero anche le didascalie ma per adesso lasciamo stare). Questo array riesco a passarlo ad un array javascript con il quale vorrei realizzare uno slideshow a loop...

Ho letto in giro che per evitare di ricaricare per ogni foto la pagina che contiene l'immagine si può intervenire su un singolo elemento html (getElementById) e sostituirlo (innerHTML).

allora ho scritto questo codice nella head della pagina (in realtà viene generata da php):

codice:

<HEAD>
<TITLE>galleria</TITLE>

<script language="javascript" type="text/javascript">
<!--
function indietro(elemento) {
if (n = 0) { n = nmax; }
else n = { n - 1; }
immagine = document.getElementById(elemento);
immagine.innerHTML = '[img]'+arrayJS[n]+'[/img]';
return n;
}

function avanti(elemento) {
if (n = nmax) n = 0;
else n = n + 1;
immagine = document.getElementById(elemento);
immagine.innerHTML = '[img]'+arrayJS[n]+'[/img]';
return n;
}
//-->
</script>
</HEAD>

e quest'altro nel corpo nel punto esatto in cui c'è il tag html per l'immagine:

codice:

<SCRIPT language="javascript" type="text/javascript">
<!--
var n = 0;
var nmax = 9;
var arrayJS = new Array();
arrayJS[0] = "1_v.jpg";
arrayJS[1] = "2_v.jpg";
arrayJS[2] = "3_v.jpg";
arrayJS[3] = "4_v.jpg";
arrayJS[4] = "5_v.jpg";
arrayJS[5] = "6_v.jpg";
arrayJS[6] = "7_v.jpg";
arrayJS[7] = "8_v.jpg";
arrayJS[8] = "9_v.jpg";
document.write('<img id="img_gal" src = "../img/galleria/'+arrayJS[n]+'">');
//-->
</SCRIPT>

e poi c'è la barra di navigazione che richiama le funzioni nella head:

codice:

		<
		 | 
		>

Probabilmente è sbagliato tutto il concetto, ma non riesco proprio a capire come poter fare, senza dover scaricare script preconfezionati..
Qualcuno può darmi qualche indicazione??

**paxal78** · 30-10-2008, 16:29

codice:

immagine.src = arrayJS[n]

**ntoflip** · 30-10-2008, 17:48

ho provato anche con .src ma niente.. a te funziona così come ho scritto anche il resto o è il resto il problema??

**paxal78** · 30-10-2008, 18:07

uan variante al volo del tuo codice:

codice:

<HEAD>
<TITLE>galleria</TITLE>

<script language="javascript" type="text/javascript">

window.onload = function(){
	document.getElementById('indietro').onclick=function (idImg) {
	    if (n == 0) {
	        n = nmax;
	    }
	    else{
	        n=n - 1;
	    }		
	    immagine = document.getElementById('img_gal');
		immagine.src = '../img/galleria/' +arrayJS[n];
	}


	document.getElementById('avanti').onclick=function(idImg) {
	    if (n == nmax) n = 0;
	    else n = n + 1;
	    immagine = document.getElementById('img_gal');

	    immagine.src = '../img/galleria/' +arrayJS[n];
	}

};
var n = 0;
var nmax = 9;
var arrayJS = new Array();
var idImg='img_gal'
arrayJS[0] = "1_v.jpg";
arrayJS[1] = "2_v.jpg";
arrayJS[2] = "3_v.jpg";
arrayJS[3] = "4_v.jpg";
arrayJS[4] = "5_v.jpg";
arrayJS[5] = "6_v.jpg";
arrayJS[6] = "7_v.jpg";
arrayJS[7] = "8_v.jpg";
arrayJS[8] = "9_v.jpg";
document.write('<img id="img_gal" src = "../img/galleria/' + arrayJS[n] + '">');


</script>
</HEAD>
<body>
<<<<<
		 | 
		>>>></
		
</body>
</html>

**ntoflip** · 30-10-2008, 18:37

Adesso funziona tutto perfettamente.. grazie mille!!!!

adesso devo solo capire come inserirlo all'interno della pagina in cui mi serve..

Spero di non avere altri problemi

**ntoflip** · 30-10-2008, 20:28

invece altri problemi sono arrivati..

sono riuscito ad inserirlo nella generazione della pagina da php.. e funzionava!! poi ho provato ad aggiungere un po' di codice per cercare di generare anche le didascalie (che volevo acquisire in un altro arrayD) legate alle immagini e che vanno inserite in un altro div che ha come id="didascalia".. allora all'interno della funzione che mi hai postato ho aggiunto delle righe che pensavo avrebbero agito su questo div..

codice:

window.onload = function(){
	document.getElementById('indietro').onclick=function (idImg, did) {
	if (n == 0) {
	n = nmax;
	}
	else {
	n = n - 1;
	}		
	immagine = document.getElementById('img_gal');
		immagine.src = '../el_img/el_galleria/<?php echo $categoria; ?>/' +arrayJS[n];
	dida = document.getElementById('didascalia');
		dida.innerText = arrayD[n];
	}


	document.getElementById('avanti').onclick=function(idImg, did) {
	if (n == nmax) {
	n = 0;
	}
	else {
	n = n + 1;
	}
	immagine = document.getElementById('img_gal');
		immagine.src = '../el_img/el_galleria/<?php echo $categoria; ?>/' +arrayJS[n];
	dida = document.getElementById('didascalia');
		dida.innerText = arrayD[n];
	}

};	// non ho ancora capito se questo punto e virgola è necessario??

Volevo puntualizzare che il tuo codice a me sembra qualcosa di magico perchè non ne riesco proprio a seguirne la logica..

per esempio già come inizia window.onload = function() (questa funzione non ha un nome?? e poi agisce sull'oggetto window??)
poi l'id passato è quello del pulsante e non quello dell'immagine??
Insomma non ci sto capendo un'hacca!!! aiuto!!!!!!!!!

**paxal78** · 30-10-2008, 20:44

niene di magico.

dunque:

Codice PHP:


window.onload = function(){

 //un po di codice

}

vuol dire:

devi eseguire questo codice una volta che la pagina è stata caricata.
per le didascalie fai un array come l'altro ma ci infili le didascalie nelle stesse posizioni.

**ntoflip** · 31-10-2008, 18:36

qualcosa di magico c'è per forza perchè mi sfugge proprio il meccanismo.. per esempio ho provato a sostituire il parametro dato a onclick=function(*) da idImg a Img_gal e funziona lo stesso .. vabbè.. comunque.. non riesco a far modificare la didascalia..

codice:

window.onload = function() {
	document.getElementById('indietro').onclick=function(img_gal) {
	if (n == 0) {
	n = nmax;
	}
	else {
	n = n - 1;
	}		
	immagine = document.getElementById('img_gal');
		immagine.src = '../el_img/el_galleria/<?php echo $categoria; ?>/' +arrayJS[n];
	dida = document.getElementById('didascalia');
	dida.innerText = '<div id="didascalia">'+arrayD[n]+'</div>';
	}


	document.getElementById('avanti').onclick=function(img_gal) {
	if (n == nmax) n = 0;
	else n = n + 1;
	immagine = document.getElementById('img_gal');
		immagine.src = '../el_img/el_galleria/<?php echo $categoria; ?>/' +arrayJS[n];
	dida = document.getElementById('didascalia');
	dida.innerText = '<div id="didascalia">'+arrayD[n]+'</div>';
	}

}

riesco a generare un altro array con le didascalie ma poi per farle modificare non c'è verso.. magari dovrei usare qualcosaltro invece di innerText???

**ntoflip** · 31-10-2008, 18:54

allora ho inserito innerHTML invece di innerText e finalmente va!!!
Sei un grande e se magari vuoi svelare quello che per me è ancora un mistero, sarò molto contento di leggere..

grazie paxal!

**paxal78** · 01-11-2008, 03:02

figures!!!

Discussione: galleria immagini array innerHTML

Strumenti discussione

Ricerca discussione

Visualizza

galleria immagini array innerHTML

grande!!

come immaginavo..

evvai!!

Permessi di invio