jQuery - Миниатюрная галерея, изменить цвет фона с помощью CSS?

Question

У меня есть сайт, где я рандомизирую фоновое изображение, используя файл скрипта php ротатора. Но я подумал, можно ли создать небольшую галерею предварительного просмотра каждого фонового изображения и сделать так, чтобы при наведении курсора на изображение фоновое изображение css сайта изменялось на лету? И когда пользователь нажимает на изображение, которое он хочет, изображение постоянно меняется? URL изображения, вероятно, необходимо сохранить в записи базы данных, кстати.

Как бы я это сделал? Для начала мне нужно правильно создать галерею. Возможно, я мог бы сделать «для каждого изображения в папке, отображать как панель стека»? Делать так, чтобы на основе изображений в указанной папке изображения автоматически публиковались в галерее?

Есть идеи или мысли о том, как мне это сделать? Основать его на существующем плагине галереи?

Answer 1

Предположим, что ваши изображения находятся в div с классом 'gallery'

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

});​