jQuery - Galerie réduite, changez la couleur de fond via CSS?

Question

J'ai un site où je randomiser l'image de fond en utilisant un fichier script php rotator. Mais je pensais, est-il possible de créer une petite galerie de prévisualisation de chaque image de fond et de faire en sorte que lorsque l'utilisateur survole une image, l'image de fond css du site est modifiée à la volée? Et quand l'utilisateur clique sur l'image qu'il veut, l'image est changée de façon permanente? L'URL de l'image devrait probablement être enregistrée dans un enregistrement de base de données btw.

Comment est-ce que je ferais ceci? D'abord, je devrais créer la galerie droite. Peut-être que je pourrais faire un "pour chaque image dans le dossier, afficher en tant que panneau de pile"? En faisant en sorte que sur la base des images dans un dossier dit, les images sont automatiquement publiées dans la galerie?

Des idées ou des pensées sur la façon dont je devrais faire cela? Basez-vous sur un plugin de galerie existant peut-être?

Answer 1

vos images sont supposant que dans un div avec une classe de « galerie »

​$(document).ready(function(){ 
    var originalBG = $('body').css('background'); 

    $('div.gallery img').hover(function(){ 
     // You could change this to include any other background options you need. 
     $('body').css('background',"url('" + $(this).attr('src') + "')"); 
    },function(){ 
     $('body').css('background',originalBG); 
    }); 

    $('div.gallery img').click(function(){ 
     originalBG = $('body').css('background'); 
     $.ajax({ 
      url: '/saveBG.php', // The url to your function to handle saving to the db 
      data: originalBG, 
      dataType:'Text', 
      type: 'POST', // Could also use GET if you prefer 
      success: function(data) { 
       // Just for testing purposes. 
       alert('Background changed to: ' + data); 
      } 
     }); 
    }); 

});​