Poter cambiare da un link lo sfondo a tutta pagina gestito da JQuery

[grimorg80]

Ciao a tutti!

Domanda piuttosto interessante...

Sto facendo alcune prove... Ho messo in una pagina un'immagine di sfondo a tutta pagina, utilizzando JQuery e il sistema backstretch (Ecco il link).

Ora... vorrei permettere all'utente di cambiare lo sfondo. Mettendo un elenco di 3 o 4 link, vorrei che cliccandoci sopra cambi lo sfondo.

Ora... so che normalmente si fa con javascript. Però quello che mi incasina è se è possibile mantenere il backstretch e allo stesso tempo il cambio delle immagini.

A questo punto ho bisogno del vostro aiuto!! Grazie!!

[gianiaz]

Ho dato un occhio al plugin, in pratica crea un div con id "backstretch" a cui da z-index -9999 e in cui mette l'immagine facendo il resize in base alle dimensioni della pagina.

in pratica, il metodo + semplice per cambiare l'immagine è secondo me è il seguente:

<script>
$(function() {
  $('.backstretchchange').click(function() {
    $('#backstretch').remove();
    $.backstretch($(this).attr('href'));
    return false;
  });
});
</script>

Immagine 1

[grimorg80]

Tanto per cominciare. Grazie!

Ho inserito il codice nella pagina, aggiungendo i link ad altre immagini. Effettivamente, qualcosa succede. Ho usato immagini con rapporti di dimensioni differenti apposta. Il risultato è che l'immagine rimane la stessa, ma si stretcha, con le proporzioni dell'immagine che dovrebbe apparire al suo posto.

Effetto testato su Chrome, Explorer 9 e Firefox 4.

[grimorg80]

Nessuno sa da cosa potrebbe dipendere?

[gianiaz]

se puoi mettere online gli dò un occhio.

ciao

[grimorg80]

Ti ringrazio davvero. Purtroppo la mia capacità di comprendere la programmazione a oggetti è davvero limitata. Questione di schemi mentali... sarò troppo "artista" che ne so...

ecco il link.

http://www.pazzicamerieri.it/temp

[gianiaz]

jQuery.each(jQuery.browser, function(i) {  
    if($.browser.msie && ($.browser.version <= 6 )  
      { /*Se il browser è uguale a IE6: Non fare niente*/ }  
    else  
    { /*Altrimenti: Esegui il plugin*/  
      $.backstretch("img/temp1.jpg");}  
    })  
	
	$(function() {
  		$('.backstretchchange').click(function() {
    		$('#backstretch').remove();
    		$.backstretch($(this).attr('href'));
    	return false;
  		});
	});

Questo codice è errato.

Non so cosa tu voglia fare con quell'each, ma mi sa tanto di copincolla :-D

prova cosi:

	$(function() {
          if(!$.browser.msie || ($.browser.msie && $.browser.version > 6 ))  {
            $.backstretch("img/temp1.jpg");}  
	    $('.backstretchchange').click(function() {
    	      $('#backstretch').remove();
    	      $.backstretch($(this).attr('href'));
    	      return false;
  	    });
          }
         });

ah, un'ultima nota... cambia quelle immagini!!! 7 mega per immagine sono un po' troppi forse

[grimorg80]

Haaha! No beh, le immagini le usavo in locale solo per provare. Non c'entrano nulla con quello che poi userò.

"ti sa di copia e incolla"? ..... è un fottutissimo copia incolla!!!

Te l'ho detto... con javascript proprio non ce la posso fare.

Venendo al codice... funziona! C'era una parentesi graffa di troppo, ma l'ho tolta. Funziona!

Grazie davvero!