View Full Version : Help with gallery idea please

06-04-2012, 01:16 AM
Hello all,

I have a little problem I've been trying to solve and given that I have 3 days to knock up this website I simply cannot afford to spend more time searching the internet for a suitable solution...

I am creating a gallery feature for a website where the gallery is actually the background of the page. Clicking on the 'gallery' menu item will drop down a series of thumbnails for the user to click. Upon clicking on this the background of the page will change and the user can carry on using the site with the new background.

If you need to have a look at the site to get an idea of what I mean then I have uploaded what I have so far on a test directory at www.zappdance.co.uk/test/new.php. (unfortunately it's far from finished but use your imagination ;))

Now, the issue I have is that I cannot find the code to change the background image. I already have a default image loaded but I need to change this live on the page without any reloading of the page (I am happy for new elements to be loaded - in fact, I would prefer that all images are not preloaded (I already have an idea of how I can do this with such a solution but would result in over 10mb downloaded each time!)).

I suspect this may have Javascript, which is absolutely fine.

Any help is much appreciated.

Antony L.

06-04-2012, 02:10 AM
Have you tried setting the basic body style using CSS then calling the new background image using the onchange() function from your dropdown menu? External JS file would be needed of course. It's late here so I can try to clarify in the AM if my suggestion wasn't specific enough.

06-04-2012, 09:29 AM
Thank you for your reply. I've had a look at the function and in theory it should do exactly what I need it to.

I'll have a go at this in a bit and let you know how I get on.

Thanks once again.

06-04-2012, 10:40 AM
Right, so I've had a play around with this but I am now stumped again.

The way in which I load the background is via this line of code:

<div id="wrapper">
<background = style="background-color#000; background:url(images/bg3.jpg) left top; position:fixed; min-width:1365; width:100%; height:100%; overflow:scroll; float:left;" >

Now the code I'm using to hopefully change this background image is this:

function changeBackground(i) {
if (i == 1) {
} else if etc.

And the line I use to call this change is this hyperlink:

<a href="#" onClick"changeBackground(1)"> <src"images/thumb1.jpg alt="image1">

But I need some way of giving the background an img id otherwise it doesn't know what to change... And I can't work out how I can do this. I know how I could do this if a standard image is to be replaced, but I can't work out how to change something that's called as a background to a DIV.

Any ideas? Thank you.

06-04-2012, 10:59 AM

I have also tried playing with replacing the function code with this instead but this is also giving me grief, although it makes more sense and at least has an element of completeness to it - I don't usually use JavaScript so forgive me if I'm being stupid...

function changeBackground(i) {

if (i == 1) {
document.getElementById("wrapper").style.backgroundImage = "url(images/bg1.jpg)" ;
} else if etc.

06-04-2012, 11:11 AM
Right - sorry to keep posting, but I have solved the issue.

I was being stupid.

My previous post was working exactly but I had stupidly forgotten to give the div an id so of course it could not find the correct div to change the background for!

Thanks for pointing me in the correct direction.

06-04-2012, 04:03 PM
No problem! I was just going to post a similar script for you:

function changeBackground(i) {
var newBG = document.getElementById("wrapper");
if (i == 1) {
newBG.style.background = "url(http://www.zappdance.co.uk/test/images/bg1.jpg) left top\;";
if (i == 2) {
newBG.style.background = "url(http://www.zappdance.co.uk/test/images/bg2.jpg) left top\;";


Where I changed your <div id=wrapper> to

<div id="wrapper" style="background:url(http://www.zappdance.co.uk/test/images/bg3.jpg) left top; background-color:#000; position:fixed; min-width:1365px; width:100%; height:100%; overflow:scroll; float:left;">

That worked for me.