CODEWITHSUNDEEP
javascriptjquery
Lieutenant Dan
Lieutenant Dan

Reputation: 8294

Full Screen Background Image(s) + Rotating Images?

I know how to implement Full-Screen / Expandable background images; I typically use a jQuery method. EG: http://tinyurl.com/9yl4rbw

BUT! I'm trying to make it so the background image is different each time the page is visited. Not a slide show; but like the old javascript (EG: http://www.computerhope.com/j18.htm)

How could I combine the two; jQuery expandable background and on-page-refresh-new image javascript?

Anyone came across a quality plugin for this effect?

*Edit___*

I use the jQuery method as within the reference URL above; essentially below:

<!--Expandable BG code IE 7 +-->

  <style>

                #bg { position: fixed; top: 0; left: 0; }
                .bgwidth { width: 100%; }
                .bgheight { height: 100%; }

                #page-wrap { position: relative; width: 950px; margin-left: auto; margin-right: auto;;  }

  </style> 


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script>
                $(function() {   

                        var theWindow        = $(window),
                            $bg              = $("#bg"),
                            aspectRatio      = $bg.width() / $bg.height();

                        function resizeBg() {

                                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                                    $bg
                                        .removeClass()
                                        .addClass('bgheight');
                                } else {
                                    $bg
                                        .removeClass()
                                        .addClass('bgwidth');
                                }

                        }

                        theWindow.resize(function() {
                                resizeBg();
                        }).trigger("resize");

                });
        </script>


<!--Expandable BG code IE 7 +-->

<!--Full BG Call-->

<img src="Sandwichfullbg.jpg" id="bg" >


<div id="page-wrap">


<!--End Full BG Call-->

I'd like to discover a simple solution to having the background change on new page visit or page refresh; ideally holding around 30 images. EG: Refresh page > New rad Image; Refresh page > New rad Image; (x 30)

Upvotes: 2

Views: 1789

Answers (3)

Alexander Wigmore
Alexander Wigmore

Reputation: 3186

Why not just use the new background-size:cover, for the background, and then use jQuery to randomly change this background image as per the normal method?

I've created a jsfiddle for you, basically doing everything you need. (Keep clicking Run in jsfiddle and you'll see the background-image cycle randomly).

Be aware, background-size:cover, mainly works with newer bowers, but by using Modernizr this can be overcome.

Install Modernizr by linking it in your header

<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>

And in your HTML tag,

<html class="no-js">

Edit: As per the comments, I've made another way that has more browser support:
jsfiddle

This time I've just made it randomly apply a class, of which this class has vendor-prefixs and fixes for ie-7/ie-8 and all the rest really. It won't look perfect in IE8, but images will fully stretch to fit the height/width of the body.

Upvotes: 1

Kostia
Kostia

Reputation: 6304

Add this code at the top of you JS. It will set the src property of the image to a random value from Sandwichfullbg0.jpg to Sandwichfullbg29.jpg (so 30 different images in total)

$('#bg').attr('src', 'Sandwichfullbg' + Math.floor(Math.random() * 30) + '.jpg');

Upvotes: 3

meub
meub

Reputation: 2318

Take a look at this. View the source and check it out. I use an image with a low z-index because it makes resizing easier. Also, I would optimize your background image so its not so big. It's almost a MB and it takes way too long to load. Your version doesn't resize well when the aspect ratio isn't widescreen.

Upvotes: 1

Related Questions