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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Oct 2002
    Posts
    178
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Image Gallery Question

    Hi all!

    I'm setting up a web page for selling a house. I'd like to display pictures of the property in a gallery.

    What I'd like is a drop down list of the floors, a drop down list of all the photos taken on each floor, a grouping of thumbnails of all the photos from the selected floor and a "Big Image".

    When the user clicks on a thumnail, the chosen picture will appear in the "Big Image" location. There should be a "Next" and a "Previous" arrow to scroll through the available thumbnails. When the user selects an option on the "Floors" list, the thumbnails would change to show the photos from the selected floor and the list of locations in the "Locations" list would change to match the selected floor and the floorplan image would change as appropriate.

    To avoid double entry, I'd also like to make the script run onpage load--I'd just have it load the first floor.

    I'd prefer to make it so that the images/links get changed without having to reload the page.

    I've attached a jpg file to give you a visual idea what I'm talking about. Can someone point me in the right direction as to where I can find a script to start with? I've looked at dynamic drive and none of the scripts that I saw looked like a good fit.

    TIA!
    Attached Thumbnails Attached Thumbnails Image Gallery Question-webpage.jpg  

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Take a look here, this may be on the lines of what you are after

    http://www.huntingground.freeserve.c...how_thumb2.htm


    Also take a look at the image galleries in the Javascript section.

    http://www.huntingground.freeserve.c...ripts/snav.htm
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.

  • #3
    Regular Coder
    Join Date
    Oct 2002
    Posts
    178
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Ok. I made a lot of headway last night. I'm working on getting the scripts to actually work right. AFter that, I'll worry about the layout.

    I think I've actually got a fairly firm grasp on how the image gallery scripts work but I have two questions that I hope someone can answer. The scripts that you pointed to would actually do what I need, but I was able to decipher what they were doing and figure out how to do what I want.

    I successfully got it to scroll the thumbnail images and show the full picture in the proper place. But when I first load the page I'm prompted with a message that active content is disabled for security reasons. I'm worried that the general users that would be visiting my site might be too afraid to enable the scripts. What is it about these scripts that is causing them to get stopped?

    The current code (the file is located at home.comcast.net/~doni49/imagegallery/test2.html) :
    Code:
    <html>
    <head>
    
    <script language="JavaScript">
    var Gallery1 = new Array("IM000018.jpg","IM000019.jpg","IM000020.jpg","IM000021.jpg","IM000022.jpg","IM000023.jpg","IM000026.jpg")
    var floorList = new Array("Exterior", "Basement", "First Floor", "Second Floor")
    var locList1 = new Array ("18", "19", "20", "21", "22", "23", "26")
    
    var thisImg = 0
    
    function initGallery() {
        document.Thumb1.src=Gallery1[0]
        document.Thumb2.src=Gallery1[1]
        document.Thumb3.src=Gallery1[2]
        showPic(0)
    }
    
    function doPrevious() {
        if (thisImg > 0) {
            thisImg--
            document.Thumb1.src=Gallery1[thisImg]
            document.Thumb2.src=Gallery1[thisImg + 1]
            document.Thumb3.src=Gallery1[thisImg + 2]
        }
    }
    
    function doNext() {
        if (thisImg < Gallery1.length -3) {
            thisImg++
            document.Thumb1.src=Gallery1[thisImg]
            document.Thumb2.src=Gallery1[thisImg + 1]
            document.Thumb3.src=Gallery1[thisImg + 2]
        }
    }
    
    function showPic(source) {
      document.bigPic.src=Gallery1[source + thisImg]
    }
    
    onload = initGallery;
    
    // -->
    </script></head>
    <body>
      <table>
        <tr>
          <td>
            <form">
              <select "floor">
                <option selected value="">
                </option>
              </select>
              <select "Locations">
                <option selected value="">
                </option>
              </select>
            </form>
          </td>
        </tr>
        <tr>
          <td><a href="javascript:showPic(0)"><img name="Thumb1" width="100" src=""></a></td>
          <Td><a href="javascript:showPic(1)"><img name="Thumb2" width="100" src=""></a></td>
          <td><a href="javascript:showPic(2)"><img name="Thumb3" width="100" src=""></a></td>
        </tr>
        <tr>
          <td><small><font face="Verdana"><a href="javascript:doPrevious()">Previous</a><font color="#FFFFFF">-</font></td>
          <td><small><font face="Verdana"><a href="javascript:doNext()">Next</a></font></small>
        </tr>
        <tr>
          <td><img name="bigPic" src=""</td>
        </tr>
    </body>
    </html>
    The other question is how to go about populating the drop down list with the contents of the appropriate arrays. Again if someone can just point me in the right direction, it would be appreciated.

    Thanks again for any and all help anyone can/will provide.


  •  

    Posting Permissions

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