www.webdeveloper.com
Results 1 to 8 of 8

Thread: Anyone know something that can display various sub images based on which main image..

  1. #1
    Join Date
    Sep 2006
    Location
    Wixom, MI
    Posts
    292

    Anyone know something that can display various sub images based on which main image..

    What I am looking to do is have a page displaying a dozen or so images, these correspond to various patterns of material.

    What I need to do is make it so that when someone clicks one of these pattern images the various color variations for that pattern (several images) are displayed maybe in an area that hovers over the content of the page with a X in the corner to close it and go back to whats beneath.

    Does that make sense?

    Not sure what it would be called, have tried searching on here and on google etc but not finding anything.

    Perhaps this would be done with some jquery / javascript / css etc.

    Thanks in advance.
    OriginalFundRaisingWidget - Free "Non Commercial" PayPal FundRaising Widget, for Charities, Organizations and Individuals, Hosted Free. Check It Out

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261
    Something like this???
    Code:
    <html>
    <head>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=215968
    
                var baseURL = 'http://www.nova.edu/hpd/otm/pics/4fun/';
                var picData1 = [
                    ['11.jpg','pic 11 description','pic 1 href'],  // 3rd element not used here
                    ['12.jpg','pic 12 description','pic 2 href'],
                    ['13.jpg','pic 13 description','pic 1 href'],
                    ['14.jpg','pic 14 description','pic 2 href'],
                    ['15.jpg','pic 15 description','pic 1 href']];
                //   'image file', 'image description', 'not used and could be removed'
                //   3rd element above could be use to link to another page
                var picData2 = [
                    ['21.jpg','pic 21 description','pic 2 href'],
                    ['22.jpg','pic 22 description','pic 1 href'],
                    ['23.jpg','pic 23 description','pic 2 href'],
                    ['24.jpg','pic 24 description','pic 2 href'],
                    ['25.jpg','pic 25 description','pic 3 href']];
                    
    function swap(imgData,imgNo) {
      document.getElementById("main").src = baseURL+imgData[imgNo][0];
      document.getElementById('imgDescription').innerHTML = imgData[imgNo][1];
      return false;
    }
    </script>
    <style type="text/css">
    .tnail { height:20%; width:20%; }
    </style>
    </head>
    <body>
    <table width="80%" align="center">
     <tr><td colspan="5">I'll put a header image here.</td> </tr>
     <tr>
    	<td width="20%"><center>Print</center></td>
    	<td width="20%"><center>Motion</center></td>
    	<td width="20%"><center>Photo</center></td>
    	<td width="20%"><center>Misc</center></td>
    	<td width="20%"><center>Resume</center></td>
     </tr>
     <tr>
    	 <td colspan="2">
        <table align="left">
         <tr> <td colspan="100%">Catagory 1 </td> </tr>
         <tr> <td>
    <script type="text/javascript">
      var str = '';
      for (var i=0; i<picData1.length; i++) {
        str += '<a href="#" onClick="return swap(picData1,'+i+')">';
        str += '<img src="'+baseURL+picData1[i][0]+'" class="tnail"></a>';
      }
      document.write(str);
    </script>
         </td></tr>        
         <tr> <td colspan="100%">Catagory 2 </td> </tr>
         <tr> <td>
    <script type="text/javascript">
      var str = '';
      for (var i=0; i<picData2.length; i++) {
        str += '<a href="#" onClick="return swap(picData2,'+i+')">';
        str += '<img src="'+baseURL+picData2[i][0]+'" class="tnail"></a>';
      }
      document.write(str);
    </script>
         </td> </tr>       	
        </table>
      </td>
      <td colspan="3">
       <img id="main" src="http://www.nova.edu/hpd/otm/pics/4fun/11.jpg" width="400">
      </td>
     </tr>
     <tr> <td colspan="5"> <p id="imgDescription">Description goes here</p></td> </tr>
    </table>
    </body>
    </html>

  3. #3
    Join Date
    Sep 2006
    Location
    Wixom, MI
    Posts
    292
    Kind of but instead of displaying a large version of the selected image to the side of the other images it needs to work as follows.

    One of the main images is clicked and then perhaps a div that was previously hidden, that will be shown now, appears over the top of the whole page, in this would be several new images with names under each (the main image would be a pic of a pattern, the new images would be that pattern in several different colors), this will be used to allow someone to pick a pattern for material and then chose a color that pattern comes in, each pattern image when clicked would being up the images of all the various colors you can chose from for that pattern and then people can take the pattern name/color name info and use that to select what they want elsewhere etc, does that make sense.
    OriginalFundRaisingWidget - Free "Non Commercial" PayPal FundRaising Widget, for Charities, Organizations and Individuals, Hosted Free. Check It Out

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261
    if you can not change the code provided,
    then at least provide a picture of your expectations
    or an HTML layout of your requirements.

  5. #5
    Join Date
    Sep 2006
    Location
    Wixom, MI
    Posts
    292
    How does this look

    sample.jpg
    OriginalFundRaisingWidget - Free "Non Commercial" PayPal FundRaising Widget, for Charities, Organizations and Individuals, Hosted Free. Check It Out

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261
    Now do you have some sample pattern and color images to play with?

  7. #7
    Join Date
    Sep 2006
    Location
    Wixom, MI
    Posts
    292
    I do yes, just need to know the code to allow for it to work like i need it in displaying and hiding the colors images box for each pattern when someone clicks the pattern.
    OriginalFundRaisingWidget - Free "Non Commercial" PayPal FundRaising Widget, for Charities, Organizations and Individuals, Hosted Free. Check It Out

  8. #8
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,261
    Quote Originally Posted by BWWebDesigns View Post
    I do yes, just need to know the code to allow for it to work like i need it in displaying and hiding the colors images box for each pattern when someone clicks the pattern.
    I'm asking for MY testing purposes.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles