Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am building a custom theme for a client in Wordpress:

She wants the background to change when you click on a gallery thumbnail in a post. It must be a solution, that doesn't involve any coding on her end.

  • create new gallery in a post
  • » user clicks thumbnail
  • » swaps background image
  • » clicks another thumbnail
  • » changes background image again

Any help is much appreciated.

share|improve this question

migrated from stackoverflow.com Oct 30 '11 at 2:53

This question came from our site for professional and enthusiast programmers.

add comment

1 Answer 1

The background image is applied to the <body> element, so using jQuery, all you really need to do is add a .click() handler to the $('dt.gallery-icon img') element, grabbing its src attribute and applying it to the body's background-image.

EDIT: I thought this would be an interesting exercise, so here is a plugin that does what you want (as far as I understood it). Go into wp-content/plugins and create a new file. Call it whatever you like. Paste this into your new file. Then go into the WordPress Admin back end and activate the new plugin.

<?php

/*
Plugin Name: SE-32426 BackgroundGallery
Plugin URI: http://wordpress.stackexchange.com/questions/32426/how-to-change-background-image-from-wordpress-gallery
Description: Click on any image of a default WP gallery, and that image is displayed in the background image.
Author: @TomAuger
Author URI: http://www.tomauger.com
License: GPL2
*/

class SE32426_BackgroundGallery {
    // Make sure jQuery is loaded. If it already is, then this will do nothing.
    static function enqueue_jquery(){
        wp_enqueue_script( 'jquery' );
    }

    // Add our own javaScript to the top of the WordPress gallery section.
    // Another way to do this would be to create a separate .js file and enqueue it like we did above.
    static function add_gallery_script( $output ){
        $output .= <<<END_JAVASCRIPT
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $('dl.gallery-item img').click(function(event){
            // Prevent the click from actually going through and linking to the attachment post page
            event.preventDefault();

            // The image we clicked on is probably a thumbnail. We want the full image.
            thumbImg = $(this).attr('src');
            fullImg = thumbImg.replace(/-[^-.]+(\..+)$/, "$1");

            // Set the body's background image to the image we just clicked on.
            $('body').css('background-image', 'url(' + fullImg + ')');
        });
    });
</script>
END_JAVASCRIPT;

        return $output;
    }
}

add_action( 'init', array( 'SE32426_BackgroundGallery', 'enqueue_jquery' ) );
add_filter( 'gallery_style', array( 'SE32426_BackgroundGallery', 'add_gallery_script' ) );
share|improve this answer
1  
It just occurred to me that perhaps you wanted the actual background image to "permanently" change for this user once she clicked on the gallery image. That's a whole different beast. Or you use cookies and run jQuery on every page to swap out the BG image, which seems a little hackish to me. –  Tom Auger Oct 30 '11 at 4:13
    
That would be a lot of AJAX and DB stuff... +1 –  kaiser Mar 10 '12 at 11:07
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.