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

**BWWebDesigns** · 02-09-2013, 09:49 PM

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.

**JMRKER** · 02-09-2013, 10:10 PM

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>

**BWWebDesigns** · 02-09-2013, 10:19 PM

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.

**JMRKER** · 02-10-2013, 09:34 AM

if you can not change the code provided,
then at least provide a picture of your expectations
or an HTML layout of your requirements.

**BWWebDesigns** · 02-10-2013, 09:46 AM

How does this look

sample.jpg

**JMRKER** · 02-10-2013, 09:54 AM

Now do you have some sample pattern and color images to play with?

**BWWebDesigns** · 02-10-2013, 10:01 AM

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.

**JMRKER** · 02-10-2013, 10:16 AM

Originally Posted by BWWebDesigns

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: Anyone know something that can display various sub images based on which main image..

Thread Tools

Display

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

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions