12 comments skip to comment form

1. 

   Jim Gaudet said— 10 hours later

   First, I love the simplicity of your website design. Content/social media focused.

   What about populating the array from a table in a MySQL database? Minus the connection info..

   Thanks,

   ~Jim

   #1
2. 

   Bruno Correia said— 12 hours later

   Brian,
   I like the array approach. I wrote a plugin to do a similar task, but it sends a cookie to ensure the same image won’t load twice in a row.
   Good reading, thanks.

   #2
3. 

   Design Informer said— 14 hours later

   Thank you very much for this. I was looking for something like this to implement on my blog header.

   Now my question:
   How can I do this with two images? let’s say I have a header image and a background image, and I want them both to rotate but with corresponding images. Please advise how this can be done.

   Thank you so much.

   #3
4. 

   Brian J King said— 22 hours later

   Great – always nice to see improvements & more simplicity. Thanks Brian!

   #4
5. 

   Brian Cray said— 22 hours later

   Design Informer: Try this…

   var images1 = ['image1.jpg', 'image2.jpg'];
   var images2 = ['image1.jpg', 'image2.jpg'];
   var random = Math.floor(Math.random() * images1.length);
   $('#header').css({'background-image': 'url(images/' + images1[random] + ')'});
   $('#otherarea').css({'background-image': 'url(images/' + images2[random] + ')'});

   Hope that helps

   #5
6. 

   Brian Cray said— 1 day later

   Jim: Best way is to make an AJAX call to pull the images from the database in the form of a JSON object (using $.getJSON() – http://docs.jquery.com/Ajax/jQuery.getJSON), then cycle through the items and use javascript’s .push() method to add the images to the images variable. If you need custom work done, check out my services page =)

   #6
7. 

   Design Informer said— 2 days later

   Thanks Brian. It works!

   #7
8. 

   Erik Ford said— 2 days later

   This is insanely easy to implement. Thanks for sharing these snippets. Of course, as a jQuery novice, I have a question. If I wanted to change the image based on the time of day, how would I use this code if at all. Thanks.

   #8
9. 

   Design Informer said— 2 days later

   Actually, I wanted to do the same thing as well Erik. I’m already currently using it on my blog.

   Also, what about a daily image?

   #9
10. 

    Jim Gaudet said— 1 week later

    Thanks Brian! Hope you had a great holiday,

    #10
11. 

    Steve said— 2 weeks later

    Thanks! Impossibly simple and impossibly excellent!

    #11
12. 

    Webdesign Rosenheim said— 1 month later

    Thanks for this!
    How does one say: “the best things are the simple things!” or something like that
    I’ll give it a try on the next web project!

    #12
13. 

    Respond to this post—

    Your name

    E-mail address will not be published