SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    googlicious graymatter bvarvel's Avatar
    Join Date
    Sep 2002
    Location
    Katy, TX
    Posts
    956
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Rotator Script - Need help!!

    Can anyone help with this? I have a template page setup here:

    http://www.origincommercial.com/property.php

    I'm trying to figure out how to get the large picture below to change when each thumbnail is clicked on - but I want to do it without having to rehit the server. Would be really cool if I could have the border on the thumbnail change color on selection too, but that's neglible.

    Can anyone get me pointed in the right direction?

  2. #2
    SitePoint Enthusiast PicklePete's Avatar
    Join Date
    Apr 2008
    Location
    England
    Posts
    46
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey, give this a whirl.

    Code:
    function swapImage(img_id) {
    	document.getElementById('mainPic').src = "media/" + img_id + ".jpg"
    }
    HTML Code:
    <img class="thumb" src="media/1.jpg" width="50" height="50" onclick="swapImage(1);" />
    <img class="thumb" src="media/2.jpg" width="50" height="50" onclick="swapImage(2);" />
    <img class="thumb" src="media/3.jpg" width="50" height="50" onclick="swapImage(3);" />
    <img class="thumb" src="media/4.jpg" width="50" height="50" onclick="swapImage(4);" />
                
    <img id="mainPic" />
    As you click the thumbnails, it looks for the "larger" version of itself, and applies it to mainPic.

  3. #3
    googlicious graymatter bvarvel's Avatar
    Join Date
    Sep 2002
    Location
    Katy, TX
    Posts
    956
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks! one question:

    Is it possible to give it a string name, ie:

    Code:
    <img src="photos/vcr2_t.jpg" width="75" height="75" class="picframe" alt="Placeholder" onclick="swapImage(vcr2);"/>
    Because this page will eventually be fed a 'property id', so this one page will be used to show multiple properties and I'll need a way to differentiate between properties.

    When I tried it, it doesn't seem to want to work.

  4. #4
    googlicious graymatter bvarvel's Avatar
    Join Date
    Sep 2002
    Location
    Katy, TX
    Posts
    956
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK - just had to put the string in single quotes and it fixed it. One more question, is there a way to change the background-color of the border around the thumbnail in that same onclick event?

  5. #5
    googlicious graymatter bvarvel's Avatar
    Join Date
    Sep 2002
    Location
    Katy, TX
    Posts
    956
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is all working perfectly now, but one more thing to make it complete... is there anyway to add a text descriptor that will change along with the picture? And I'm still curious if there's anyway to highlight the thumbnail picture on selection as well.

    thanks everyone for your help!

  6. #6
    SitePoint Zealot
    Join Date
    Apr 2008
    Posts
    112
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    something like this: highlight effect ?
    Proud member of this community.
    ____________________________

  7. #7
    googlicious graymatter bvarvel's Avatar
    Join Date
    Sep 2002
    Location
    Katy, TX
    Posts
    956
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It doesn't even need to be THAT involved. Look here (it's the updated page):

    http://www.origincommercial.com/properties/vcr

    Here's what I would like to happen: The user clicks on the thumbnail -> the thumbnails background color and border change color -> the large photo is changed -> and some subtext about that picture in shown.

    Can this be added to the simple step already shown in the examples above?


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
  •