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); 
      } 
     }); 
    }); 

});​