"Catturare" il valore di "src" corrente per un'immagine

**pierofix** · 18-07-2007, 14:28

Eh no, così come hai scritto non può funzionare.

'href=percorso_foto' non è corretto. Ti faccio un esempio generico:

codice:

XHTML

<a id="foto">
   [img]gioconda.jpg[/img]
</a>


Javascript (da inserire nella head del documento)

window.onload = function()
{
   var foto = document.getElementById('foto')
   var immagine = foto.getElementsByTagName('img').item(0)
   var immagine_percorso = immagine.getAttribute('src')

   foto.setAttribute('href', immagine_percorso)
}

Ci sarebbero da fare un sacco di considerazioni sulla strada che stai seguendo. Sarebbe meglio prevedere infatti un modo che preservi la fruibilità della galleria anche in caso di javascript disattivato sul browser dell'utente. Se hai tempo/voglia possiamo provare a tirar fuori qualcosa di meglio...

**fbcyborg** · 18-07-2007, 15:03

Allora ti spiego meglio la situazione così non sto a fare tentativi inutilmente.

Ho 2 files: index.html e immagini.js.

ecco il mio file javascript immagini.js:

codice:

var contatori = new Array(0,0,0,0,0);

function previous(array,slide,i){
	if (document.images){
		if (contatori[i] > 0) contatori[i]--
			slide.src  = array[contatori[i]]
	}
}

function next(array,slide,i){
	if (document.images){
		if (contatori[i] < array.length-1)	contatori[i]++
			slide.src  = array[contatori[i]]
	}
}

Eventualmente potremmo usare questo file per contenere tutte le funzioni javascript necessarie.

Ecco invece il mio file html:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<script type="text/javascript" src="javascript/immagini.js" ></script>
<script>
var settecento = new Array ("images/settecento/pav1.jpg",
			"images/settecento/pav2.jpg",
			"images/settecento/pav3.jpg",
			"images/settecento/pav4.jpg",
			"images/settecento/pav5.jpg",
			"images/settecento/pav6.jpg",
			"images/settecento/pav7.jpg",
			"images/settecento/pav8.jpg",
			"images/settecento/pav9.jpg",
			"images/settecento/pav10.jpg",
			"images/settecento/pav11.jpg",
			"images/settecento/pav12.jpg",
			"images/settecento/pav13.jpg",
			"images/settecento/pav14.jpg",
			"images/settecento/pav15.jpg",
			"images/settecento/pav16.jpg");

var sintesi = new Array ("images/sintesi/sintesi1.jpg",
			"images/sintesi/sintesi2.jpg",
			"images/sintesi/sintesi3.jpg",
			"images/sintesi/sintesi4.jpg");
</script>

			<div align="center">
			[img]images/settecento/pav1.jpg[/img]</a>
			

			Indietro
			Avanti
			</div>

			<div align="center">
			[img]images/sintesi/sintesi1.jpg[/img]
			

			Indietro
			Avanti
			</div>
</body>
</html>

Come vedi ho messo una tabella 2x2 in cui ogni cella della seconda riga mostra una galleria di immagini.
Adesso.. per adattare quello che mi hai scritto tu, su questo codice.. come posso fare, senza commettere errori, evitando quindi di impelagarmi in errori da cui potrei non venirne più fuori?

Grazie infinite per il supporto che mi stai dando.

**pierofix** · 18-07-2007, 15:36

Lo scopo del progettista web è quello di fornire le informazioni all'utente nel miglior modo possibile.

Ora, tutta la tua galleria, per funzionare, si affida al browser dell'utente in quanto sfrutta javascript. Il che è pericoloso: cosa succederebbe infatti se il client non avesse javascript (pensa alle persone con certe disabilità che usano tecnologie assistive, agli internet-box nelle stazioni o solo semplicemente ai motori di ricerca che devono indicizzare le tue pagine)? La tua galleria non funzionerebbe per nulla. E tu avresti fallito.

Cosa ci vuole quindi? Ci vuole un meccanismo che sfrutti più intelligentemente gli strumenti a disposizione. Ci sarebbero ad esempio due strade preferibili:

usare un linguaggio lato server - ad esempio PHP - per caricare le varie immagini;
inserire tutte le immagini nella pagina html e usare javascript per nasconderle tutte e per visualizzarne solo una alla volta.

Ora, per scegliere la strada appropriata ci sono due rispettive domande che ti pongo:

hai la possibilità di usare, sul sito che stai facendo, un linguaggio lato server?
quanto pesa ogni singola immagine della galleria?

Insomma, come vedi, la vera qualità si raggiunge solo con gli strumenti adeguati (e, si sa, anche sudando un bel po'

).

**fbcyborg** · 18-07-2007, 15:42

Molto bene... ciò che mi scrivi mi conduce a chiedermi per quale ragione ho deciso di utilizzare un javascript, e la riposta è che "credevo fosse una cosa semplice da realizzare e veloce".

Il mio sito è fatto interamente in php, e quello che mi hai detto mi fa riflettere molto. Elaborare qualcosa lato server è senz'altro migliore. Il problema è che non so come realizzare una galleria in php ed ottenere lo stesso effetto se non addirittura migliore...

Sviluppo siti con Joomla! ma non sono un web designer, anzi sviluppo siti per divertimento e per fare qualche favore ad amici, visto che mi occupo di tutt'altro.

Se sai indicarmi la strada su come utilizzare solo PHP te ne sono estremamente grato.. anzi, preferisco!!!

**pierofix** · 18-07-2007, 16:21

Ottimo. Per fortuna allora che ho chiesto.

Partiamo dal presupposto che nel forum di PHP troverai delle soluzioni già pronte, delle discussioni già affrontate e delle persone più esperte di me in materia.

Io farei una cosa molto semplice. Una pagina in cui hai:

l'immagine;
i pulsanti 'avanti' e 'indietro'.

Il percorso dell'immagine lo passerai tramite variabile get nell'URL, avendo magari l'accortezza di usare un semplice numero e ricomporre l'intero percorso file successivamente.

Facciamo un esempio concreto. Nella primissima pagina avrai un URL di questo tipo:

codice:

http://www.sito.it/galleria/?img=1

All'interno della pagina avrai delle variabili di questo tipo:

Codice PHP:


$directory = 'images/settecento/';

$prefisso = 'pav';

$estensione = '.jpg';



$immagine = $directory . $prefisso . $img . $estensione;



...



echo '[img]' . $immagine . '[/img]';

**fbcyborg** · 18-07-2007, 16:43

Ok, grazie, allora se non ti dispiace apro un thread nella sezione PHP così almeno non andiamo OT in questo...

**pierofix** · 18-07-2007, 16:50

Scelta ottimale.

**fbcyborg** · 18-07-2007, 16:55

Ecco il link.

**fbcyborg** · 18-07-2007, 21:50

Alla fine ho risolto con questo meraviglioso plugin: Multithumb.

Discussione: "Catturare" il valore di "src" corrente per un'immagine

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio