Is it possible to modify the background-color of a minified gallery using CSS in jQuery?

As I was brainstorming ideas for my website, I thought about the possibility of creating a small preview gallery for background images. The goal would be to allow users to hover over an image in the gallery and have the CSS background image of the site change on the fly. If they click on the desired image, it would permanently change the background. To achieve this, I might need to save the image URL in a database record.

So, how can I make this idea a reality? First, I would need to create the gallery. One approach could be to iterate through each image in a folder and display them as a stack panel in the gallery. This way, any new images added to the folder would automatically appear in the gallery.

Do you have any suggestions on how I should implement this feature? Should I build it from scratch or base it on an existing gallery plugin?

javascriptjquerycss

Answer №1

To display your images within a container div labeled 'gallery'

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

    $('div.gallery img').hover(function(){
        // Adjust as needed to fit additional background options.
        $('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 designated URL for saving database changes
            data: originalBG,
            dataType:'Text',
            type: 'POST',  // Can also use GET if desired
            success: function(data) {
                // Primarily used for testing purposes.
                alert('Background updated to: ' + data);
            }
        });
    });

});​

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Implementing Hot Module Replacement (HMR) for multiple HtmlWebpackPlugin outputs in webpack

I am in the process of integrating HMR into my current project. Let's begin by examining how things are currently being handled. Within my project, I have multiple HTML files that need to be accessed at various routes. For example, the /about page re ...

javascriptreactjswebpackwebpack-dev-serverhtml-webpack-plugin

The background image on my link bar is inexplicably not appearing

I've been trying to solve this issue for hours and I'm at a loss. Initially, the background image was displaying correctly, but now it's not working. HTML: <head> <link type="text/css" rel="stylesheet" href="css/normalize.css" ...

phphtmlcssimagebackground

Guide to positioning a link on the right side of a navigation bar

I am trying to achieve a specific layout using Bootstrap. I want to align the logout button to the right-hand side and have three modules (contact us, about epm, and modules) centered on the page. Can someone guide me on how to achieve this using Bootstr ...

htmlcsstwitter-bootstrap

Discover the perfect method for combining two objects while updating any empty values with a new specified value. Furthermore, in the case where the new value is also

My task involves working with an array of objects where each time I select a value, it gets pushed into the array. My goal is to merge two objects that share the same key "code" and remove any empty values. (4) [{…}, {…}, {…}, {…}] 0: {code: "abc ...

javascriptjavascript-objects

Add the Google analytics JavaScript code to your ASP.NET web application

I am trying to integrate the Google Analytics code into my ASP.NET web page, but it is not tracking any data. I want to capture information such as geolocation, IP address, session ID, and browser details using Google Analytics. Below is the code snippet I ...

javascriptjqueryasp.netgoogle-analyticsgoogle-analytics-api

Utilizing margins in CSS for various div elements

Update: I have included Javascript and Masonry tags in my project. Despite having modules of the same size, I am exploring how masonry can assist me. However, I find it a bit puzzling at the moment as I am not aiming to align elements of different sizes. I ...

javascriptcssjquery-masonry

Is there a way to adjust the slide length in JQuery's slideUp function using pixels? It seems like

At the bottom of a page, I have a fixed position div element. There is another div below it, but it is hidden outside of the page margins. I am attempting to slide both divs upwards so that the bottom one becomes visible (moving out of the margin). However ...

jqueryhtmlcss

The Dropdown Menu and Slick Gallery are not intersecting

In my jQuery Slick Gallery, I have a Dropdown Menu that displays an unordered list of menu entries when a button is clicked. The issue I am facing is that the unordered list is hidden at the bottom edge instead of appearing above the dots as intended. You ...

javascriptjquerycssdrop-down-menuslick.js

Prevent random files from being included in RequireJS's r.js optimization process and instead load them asynchronously

Currently, I have successfully implemented RequireJS and a Grunt-based build process that optimizes my JS app into one file using r.js. This consolidation of all app files has proven to be efficient for production deployment. However, the issue arises wit ...

javascriptweb-applicationsrequirejsr.js

Prevent event listeners from being triggered during the '$destroy' event. Error: $on function is undefined

As I attempt to halt all event listeners when the scope is destroyed, a certain error arises. The following error is displayed: TypeError: vm.$on is not a function; Even using vm.on(..) does not resolve the issue angular.module('app.layout&apo ...

javascriptangularjsangular-controllerangularjs-events

Issues persisting with the fixed header functionality in Bootstrap table

I implemented a table using bootstrap-table in my project. Everything seems to be working fine except for the scroll bar within the tbody. For some reason, the scroll bar is not appearing. Can anyone point out what I might be missing? I believe that if th ...

csstwitter-bootstrapbootstrap-table

Inability to retrieve form information within dynamically loaded data using jQuery AJAX

I have a form that is dynamically loaded using Ajax, and it looks like this: <form id="ProtocolForm"> <input id="name_major" type="text" value="some value"> <input id="name_minor" type="text" value="some value"> <input id="Submit" typ ...

javascriptjqueryajaxforms

Introduction to AJAX: Conditional Statements

Within the menu.html file, there are various menu items (a href links) called menu_1, menu_2, and so on. The map.js file is responsible for displaying map content by utilizing an API to showcase different layers and maps. Even though there are many maps t ...

javascriptajax

An error occurred when trying to set a cookie using Set-Cookie in a react application

Currently, I am immersed in a small project that involves user authentication via email and password before gaining access to their individual profiles. The backend operates on cookies which are established once the correct email and password combination i ...

javascriptreactjsauthenticationcookies

Clear form values in react-hook-form upon form closure

Featuring the given component: import { yupResolver } from '@hookform/resolvers/yup'; import { useForm } from 'react-hook-form'; import * as yup from 'yup'; import { useToggle } from '../shared/hooks'; import { Su ...

javascriptreactjstypescriptreact-hooksreact-hook-form

Implementing Dropzone in an Angular MVC5 project

For more information about dropzone, visit this link I am currently implementing dropzone as my file upload handler with the combination of angularjs and MVC5. The challenge I'm facing is getting the Http post request to go from the angularjs servic ...

javascriptangularjsasp.net-mvcdropzone.js

Creating a full-screen background with an rgba overlay using CSS

I recently encountered an issue with a fixed, fullscreen background image on my website. I initially applied the background image to the HTML's CSS instead of the body's CSS. To add a black overlay with lowered opacity, I included the following c ...

htmlcssbackgroundoverlayfullscreen

Displaying unformatted HTML in Bootstrap 3 Tooltip instead of styled HTML text

I'm currently working on implementing a Bootstrap 3 tooltip to showcase custom HTML-formatted text. To make reusability easier, I've encapsulated the tooltip within an Ember component. Upon inspection below, I have configured the data-html attri ...

javascriptjquerytwitter-bootstrapember.jscoffeescript

Leveraging the Html Extension feature in conjunction with ActionLink

A custom MVC5 Html extension has been created to check if a button displayed on the screen is disabled. Here is the code for the extension: public static HtmlString IsButtonEnabled(this HtmlHelper html, bool buttonEnabled) { return new HtmlString(butto ...

javascriptc#htmlasp.netasp.net-mvc

Is it possible for <h2> to utilize React's onLoad event?

I need assistance with creating a dynamic calendar that displays the current month upon page load. I am using HTML format within a React JS file. <h2 onLoad={curMonth}></h2> To achieve this, I have imported the curMonth function from another f ...

javascriptreactjs