Advanced Search

Results 1 to 3 of 3

Thread: Set an image as background clicking on its thumbnail

  1. #1
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Set an image as background clicking on its thumbnail

    Hi there!

    I have a problem i've tried to solve since the past four days and still can't make my mind about it.
    I have a photographic page that only includes a header, a full-screen background image(now in the CSS) and a slider with thumbnails of the photos in the gallery. When the user clicks on one thumbnail the corresponding image should be set as the background image for the page, and of course to do that i have a little thumbnail and a compressed big image for every single shot.

    I really can't get how i should do this. Note that if i change it, then go to another page and come back it can reset so i don't need cookies and stuff, i just need the images to change accordingly to the one the user selects.
    Also, i have the image in "background-image" in the CSS but i can move it to the html if it's a problem to keep it there.

    Any tips on how i should do it?

    This is a quickly-drawn layout to explain the elements:

    A) header, which is DONE
    B) 100% resizing bg image, which is DONE
    C) slider with the thumbnails that changes the B point which HAS TO BE DONE


  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,674
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    In about the simplest terms (this sort of thing can be done much more elegantly, like for all thumbnails without having to give each one an onclick event):

    Code:
    <a href="pathto/largerimage.jpg" onclick="document.body.style.backgroundImage = 'url(' + this.href + ')'; return false;">
    <img src="pathto/thumbnail.jpg"></a>
    I don't know what your slider is like, whether or not you can put that code in it. Oh, and if it's not the body whose background needs to be changed you could use like:

    Code:
    document.getElementById('id_for_B_area')
    instead of:

    Code:
    document.body
    in the above.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the quick reply! I'll try to use this code now and see if i can get it to work

Similar Threads

  1. No image clicking thumbnail on Image Thumbnail Viewer II
    By Ratto84 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 05-08-2011, 11:06 AM
  2. Image thumbnail viewer window in the background
    By pumatronic in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 08-06-2009, 06:17 PM
  3. fading background on clicking an image
    By jayshree912 in forum JavaScript
    Replies: 2
    Last Post: 06-05-2008, 06:03 AM
  4. Clicking thumbnail opens into templated HTML with full image
    By JohnH in forum Looking for such a script or service
    Replies: 12
    Last Post: 07-04-2007, 10:58 PM
  5. Image Thumbnail viewer: close by clicking on image as well as text
    By kindredm7 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 12-29-2005, 09:58 PM

Bookmarks

Posting Permissions

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