Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2012
    Location
    UK
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Help with gallery idea please

    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.

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    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.

  • #3
    New Coder
    Join Date
    Jun 2012
    Location
    UK
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Jun 2012
    Location
    UK
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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:

    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;" >
    </div>
    Now the code I'm using to hopefully change this background image is this:

    Code:
    function changeBackground(i) {
    if (i == 1) {
    document.getElementById("bgImage".src="images/bg1.jpg";
    } else if etc.
    And the line I use to call this change is this hyperlink:

    Code:
    <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.

  • #5
    New Coder
    Join Date
    Jun 2012
    Location
    UK
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Update:

    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...

    Code:
    function changeBackground(i) {
    
    if (i == 1) {
    document.getElementById("wrapper").style.backgroundImage = "url(images/bg1.jpg)" ;
    } else if etc.
    Last edited by aclees86; 06-04-2012 at 11:02 AM.

  • #6
    New Coder
    Join Date
    Jun 2012
    Location
    UK
    Posts
    15
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Regular Coder
    Join Date
    Apr 2012
    Posts
    165
    Thanks
    1
    Thanked 39 Times in 39 Posts
    No problem! I was just going to post a similar script for you:

    Code:
    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
    Code:
    <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.
    Last edited by EpicWebDesign; 06-04-2012 at 04:06 PM.

  • Users who have thanked EpicWebDesign for this post:

    aclees86 (06-10-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •