jQuery - 缩小图库，通过CSS更改背景颜色？

Question

我有一个网站，我使用php旋转脚本文件随机化背景图像。但我在想，是否可以为每个背景图像创建一个小型预览图库，并使其在用户悬停在图像上时，网站的css背景图像即时更改？当用户点击他想要的图像时，图像会永久更改？图片网址可能需要保存在数据库记录顺便说一句。

我该怎么做？首先，我需要创建画廊的权利。也许我可以做一个“为文件夹中的每个图像，显示为堆叠面板”？根据上述文件夹中的图像，这些图像会自动发布到图库中？

任何想法或想法，我应该如何做到这一点？也许它基于现有的图库插件？

Answer 1

假设您的图片与一类“画廊”

​$(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); 
      } 
     }); 
    }); 

});​