Selezionare galleria di imamgini per sfondo

**bibuz** · 19-07-2011, 10:06

Salve ragazzi buongiorno.

Ho preso e adattato alle mie esigenze uno script che mi permette di mettere come sfondo del sito una sequenza di immagini che si adattano alla risoluzione dello schermo.
Questo è lo script:
All'interno del tag <head> ho il seguente codice:

codice:

    
<script>
	$(function(){
		jQuery('img.slidemaximage').maxImage({
			isBackground: true,
			slideShow: true,
			slideShowTitle: false,
			slideDelay: 7, //secondi
			maxFollows: 'height',
			overflow:'auto',
			resizeMsg: {show: false}
		});
});
</script>

Subito dopo il tag <body> invece richiamo le immagini:

codice:

[img]immagini/loading.gif[/img]
[img]sfondi/1_new.jpg[/img]
[img]sfondi/2_new.jpg[/img]
[img]sfondi/3_new.jpg[/img]
[img]sfondi/4_new.jpg[/img]
[img]sfondi/5_new.jpg[/img]
[img]sfondi/6_new.jpg[/img]
[img]sfondi/7_new.jpg[/img]
[img]sfondi/8_new.jpg[/img]
[img]sfondi/9_new.jpg[/img]

Questo invece sono i css:

codice:

*       { margin:0;padding:0;font-family:arial;font-size:13px; }
html    { overflow-x:hidden;overflow-y:scroll; }


img.slidemaximage     { 
display:none;
position:fixed !important;/*le immagini non scrollano.non funziona in IE6*/
}

Ora vorrei fare in modo che tramite una select possa scegliere diverse tipologie di immagine di sfondo.
Per esempio, Mare, montagna, campagna, città, ecc.....

Potete darmi qualche suggerimento oppure se avete visto una cosa simile in giro suggerirmela.

Grazie a tutti in anticipo.

**cavicchiandrea** · 19-07-2011, 11:25

Prova cosi:

codice:

 

<script>
	$(function(){
Tema('img.slidemaximage');//qui ci metti le immagini di default

});

function Tema(img)
		jQuery(img).maxImage({
			isBackground: true,
			slideShow: true,
			slideShowTitle: false,
			slideDelay: 7, //secondi
			maxFollows: 'height',
			overflow:'auto',
			resizeMsg: {show: false}
		});
</script>

poi crei i vari temi:

codice:

[img]immagini/loading.gif[/img]

[img]sfondi/1_new.jpg[/img]
[img]sfondi/2_new.jpg[/img]
[img]sfondi/3_new.jpg[/img]
[img]sfondi/4_new.jpg[/img]
[img]sfondi/5_new.jpg[/img]
[img]sfondi/6_new.jpg[/img]
[img]sfondi/7_new.jpg[/img]
[img]sfondi/8_new.jpg[/img]
[img]sfondi/9_new.jpg[/img]

[img]sfondi/1_new.jpg[/img]
[img]sfondi/2_new.jpg[/img]
[img]sfondi/3_new.jpg[/img]
[img]sfondi/4_new.jpg[/img]
[img]sfondi/5_new.jpg[/img]
[img]sfondi/6_new.jpg[/img]
[img]sfondi/7_new.jpg[/img]
[img]sfondi/8_new.jpg[/img]
[img]sfondi/9_new.jpg[/img]

etc....

poi tremite select richiami la funzione Tema e gli passi la classe

**bibuz** · 19-07-2011, 14:06

Ho provato ma anche senza creare una select con in questo modo non carica nessuna immagine di sfondo.
Sto facendo intanto altre prove e aggiustamenti partendo dalla funzione da te suggerita.

**bibuz** · 19-07-2011, 14:50

Ho provato in questo modo:

codice:

<script>
	$(function Tema(img){
		jQuery('img.slidemaximage').maxImage({
			isBackground: true,
			slideShow: true,
			slideShowTitle: false,
			slideDelay: 2, //secondi
			maxFollows: 'height',
			overflow:'auto',//importante se � necessario lo scroll della pagina per i contenuti
			resizeMsg: {show: false}
		});
});
	$(function Tema(img){
		jQuery('img.slidemaximage1').maxImage({
			isBackground: true,
			slideShow: true,
			slideShowTitle: false,
			slideDelay: 2, //secondi
			maxFollows: 'height',
			overflow:'auto',
			resizeMsg: {show: false}
		});
});
</script>

E per richiamarla:

codice:

<SELECT onChange='javascript:function Tema(img);'>
		<OPTION VALUE="slidemaximage"> Sfondo 1</OPTION>
		<OPTION VALUE="slidemaximage1"> Sfondo 2</OPTION>
   </SELECT>

In questo modo mi carica subito le immagine con classe "slidemaximage1" ma all'onChange non succede nulla.

**bibuz** · 19-07-2011, 16:43

Allora ho provato a duplicare la funzione originaria del caricamento cambiadogli nome:

codice:

<script>
	$(function Tema(){
		jQuery('img.slidemaximage').maxImage({
			isBackground: true,
			slideShow: true,
			slideShowTitle: false,
			slideDelay: 2, //secondi
			maxFollows: 'height',
			overflow:'auto',//importante se � necessario lo scroll della pagina per i contenuti
			resizeMsg: {show: false}
		});
});
	$(function Tema2(){
		jQuery('img.slidemaximage1').maxImage({
			isBackground: true,
			slideShow: true,
			slideShowTitle: false,
			slideDelay: 2, //secondi
			maxFollows: 'height',
			overflow:'auto',
			resizeMsg: {show: false}
		});
});
</script>

Qui elenco le immagini:

codice:

[img]immagini/loading.gif[/img]

[img]sfondi/1_new.jpg[/img]
[img]sfondi/2_new.jpg[/img]
[img]sfondi/3_new.jpg[/img]
[img]sfondi/4_new.jpg[/img]
[img]sfondi/5_new.jpg[/img]
[img]sfondi/6_new.jpg[/img]
[img]sfondi/7_new.jpg[/img]
[img]sfondi/8_new.jpg[/img]
[img]sfondi/9_new.jpg[/img]

[img]sfondi/1.jpg[/img]
[img]sfondi/2.jpg[/img]
[img]sfondi/3.jpg[/img]
[img]sfondi/4.jpg[/img]
[img]sfondi/5.jpg[/img]
[img]sfondi/6.jpg[/img]
[img]sfondi/7.jpg[/img]
[img]sfondi/8.jpg[/img]

Per fare una prova più semplice ho cercato di richiamare direttamente la funzione "Tema()" direttamente tramite un link:

codice:

Cambia Sfondo

La mia logica era quella di far partire al caricamento una funzione come adesso e successivamente tramite il link richiamarne l'altra.

Solo che così come ho scritto non va.

Suggerimenti?

Discussione: Selezionare galleria di imamgini per sfondo

Strumenti discussione

Ricerca discussione

Visualizza

Selezionare galleria di imamgini per sfondo

Permessi di invio