Rotating background images with admin options

2 Views

I recently saw an admin panel that had options to set background images for a page.

The option was found on from clicking pages and then a “main page”. Under the description was a form that allowed you to upload up to 5 different images. You could reorder them etc.

Read More

This in turn uses those images to rotate through background images on the “main page”

I was wondering how you would replicate this? I’m a huge wp noob when it comes to editing admin stuff. If it’s a just bunch of PHP hooks and stuff no problem, but I have a feeling it’s more than that. I realize one solution is to create a post and then attach a bunch of images to that post, but the client saw this panel and wants something just like it. Where they can change the images from the page configuration (which makes sense). As for the delivery end (the css and javascript) that’s no problem, I’m just wondering about this piece right here.

here’s the setup:
enter image description here

Any help would be phenomenal.

Thank you

Example of the result http://www.honolulufurniturecompany.com

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. i would try the plugin “attachments” for the images. use it all the time for making page-specific galeries, downloads, etc.

    afterwards, you can use the script “supersized”

    Enqueue the Javascript from the Plugin, and place the following Code into the <head>:

    <script type="text/javascript">  

    jQuery(function($){
        $.supersized({

                            //Functionality gnav != true
                slideshow               :   1,        //Slideshow on/off
                autoplay                :   1,        //Slideshow starts playing automatically
                start_slide             :   1,        //Start slide (0 is random)
                random                  :   0,        //Randomize slide order (Ignores start slide)
                slide_interval          :   5000,    //Length between transitions
                transition              :   1,         //0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
                transition_speed        :   2500,    //Speed of transition
                new_window              :   1,        //Image links open in new window/tab
                pause_hover             :   0,        //Pause slideshow on hover
                keyboard_nav            :   1,        //Keyboard navigation on/off
                performance             :   1,        //0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
                image_protect           :   1,        //Disables image dragging and right click with Javascript
                image_path              :   '', //Default image path

                //Size & Position
                min_width               :   0,        //Min width allowed (in pixels)
                min_height              :   0,        //Min height allowed (in pixels)
                vertical_center         :   1,        //Vertically center background
                horizontal_center       :   1,        //Horizontally center background
                fit_portrait            :   0,        //Portrait images will not exceed browser height
                fit_landscape           :   0,        //Landscape images will not exceed browser width
                //Components
                navigation              :   0,        //Slideshow controls on/off
                thumbnail_navigation    :   0,        //Thumbnail navigation
                slide_counter           :   0,        //Display slide numbers
                slide_captions          :   0,        //Slide caption (Pull from "title" in slides array)
                            slides                  :   [        //Slideshow Images
                                                { image : "URLTOIMAGE", thumb : "URLTOTHUMB" , title : "TITLE" }, ...                                       ]

        }); 
    });

</script>

    you can use as many images as you want. I recommend them to have a resolution of about 1600×900, to have beautiful images evven on a big screen, while not having a too big filesize.