www.webdeveloper.com
Results 1 to 6 of 6

Thread: Help need with simple image gallery

  1. #1
    Join Date
    Apr 2009
    Location
    Western Mass
    Posts
    3

    Question Help need with simple image gallery

    So I'm really new to the whole javascript thing. I have a pretty good understanding of html and css, but javascript pretty much confuses me. I have a portfolio website that I'd like to get up and running eventually for my design. The part that I am not sure how to make work, or even where to start is the really simple image gallery idea I was thinking about using. Basically I only have a div on one side with the categories I would be putting my portfolio photos into, and then the right side would have a div where the big photo would show with the thumbnail selector div below that one. Basically I want to link the thumbnails to the big photo, so that when a user clicks on one it changes the big photo. I have no idea where to start. I have the base for my code here, but I am not sure how to even make the thumbnails link to the bigger div. I tried to walk through a few peoples example on other threads for galleries and linking photos in the same way, but couldn't get any of them to work. Does anyone have any suggestions?

    Below is what I have so far for code:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Photo Gallery</title>
    <style type="text/css">
    body
    	{
    	margin: 0px;
    	padding: 0px;
    	}
    
    #mainContain
    	{
    	position: relative;
    	top: 20px;
    	left: 0px;
    	width: 860px;
    	height: 600px;
    	margin: 0px auto;
    	background: #CCFFFF;
    	padding: 0px;
    	border: none;
    	}
    
    #categories
    	{
    	position: relative;
    	top: 0px;
    	left: 0px;
    	width: 200px;
    	height: 600px;
    	margin: 0px 10px 0px 0px;
    	padding: 0px;
    	background: #6699CC;
    	border: none;
    	float: left;
    	}
    	
    #rightContain
    	{
    	postion: relative;
    	top: 0px;
    	left: 0px;
    	width: 650px;
    	height: 600px;
    	margin:  0px;
    	padding: 0px;
    	background: #FFFFCC;
    	border: none;
    	float: left;
    	}
    	
    #photoView
    	{
    	position: relative;
    	top: 0px;
    	left: 0px;
    	width: 650px;
    	height: 425px;
    	margin: 0px 0px 10px 0px;
    	padding: 20px 0px;
    	background: #333333;
    	border: none;
    	}
    	
    #photoContain
    	{
    	position: relative;
    	top: 0px;
    	left: 0px;
    	width: 580px;
    	height: 424px;
    	margin: 0px auto;
    	padding: 10px 0px;
    	background: #CC9933;
    	}	
    	
    #selector
    	{
    	position: relative;
    	top: 0px;
    	left: 0px;
    	width: 640px;
    	height: 115px;
    	margin: 0px;
    	padding: 10px 0px 0px 10px;
    	border: none;
    	background: #33FFFF;
    	overflow-x: scroll;
    	overflow-y: hidden;
    	}
    
    img.thumb
    	{
    	margin-right: 10px;
    	float: left;
    	}			
    </style>				
    </style>
    </head>
    
    <body>
    <div id="mainContain">
        <div id="categories">
        </div>
        
        <div id="rightContain">
            <div id="photoView">
            	<table id="photoContain" border="0" cellspacing="0" cellpadding="0">
                  <tr align="center">
                    <td><img id="bigImage" src="img/testPic.png" /></td>
                  </tr>
                </table>  
            </div>
            
          <div id="selector">
            	<table width="100%" border="0" cellspacing="0" cellpadding="0">
                  <tr>
                    <td width="18%">
                    	<img class="thumb" src="img/testThumb.png" />               
                    </td>
                    <td width="18%">
                    	<img class="thumb" src="img/testThumb2.png" />               
                    </td>
                    <td width="18%">
                    	<img class="thumb" src="img/testThumb3.png" />               
                    </td>
                  </tr>
                </table>
            
          </div>
        </div>
        
    </div>
    </body>
    </html>
    Any suggestions on where to go from here would be so helpful. I know I need to create a function, and then an onClick kinda thing for the thumbnails to link to the big image, but I'm just not sure how to build it.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,441

    Lightbulb

    Let's see what you can do with this ...

    (Note: Fixed mis-spelled 'postion' in <style> section and removed dupicated </style> tag in your original post).

    Added <script> section in <head>
    and few lines of HTML in <body> section.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Photo Gallery</title>
    <style type="text/css">
    body {
    	margin: 0px;
    	padding: 0px;
    	}
    
    #mainContain {
    	position: relative;
    	top: 20px;
    	left: 0px;
    	width: 860px;
    	height: 600px;
    	margin: 0px auto;
    	background: #CCFFFF;
    	padding: 0px;
    	border: none;
    	}
    
    #categories {
    	position: relative;
    	top: 0px;
    	left: 0px;
    	width: 200px;
    	height: 600px;
    	margin: 0px 10px 0px 0px;
    	padding: 0px;
    	background: #6699CC;
    	border: none;
    	float: left;
    	}
    	
    #rightContain {
    	position: relative;
    	top: 0px;
    	left: 0px;
    	width: 650px;
    	height: 600px;
    	margin:  0px;
    	padding: 0px;
    	background: #FFFFCC;
    	border: none;
    	float: left;
    	}
    	
    #photoView {
    	position: relative;
    	top: 0px;
    	left: 0px;
    	width: 650px;
    	height: 425px;
    	margin: 0px 0px 10px 0px;
    	padding: 20px 0px;
    	background: #333333;
    	border: none;
    	}
    	
    #photoContain {
    	position: relative;
    	top: 0px;
    	left: 0px;
    	width: 580px;
    	height: 424px;
    	margin: 0px auto;
    	padding: 10px 0px;
    	background: #CC9933;
    	}	
    	
    #selector {
    	position: relative;
    	top: 0px;
    	left: 0px;
    	width: 640px;
    	height: 115px;
    	margin: 0px;
    	padding: 10px 0px 0px 10px;
    	border: none;
    	background: #33FFFF;
    overflow:auto;
    /*
    	overflow-x: scroll;
    	overflow-y: hidden;
    */
    	}
    
    img.thumb {
    	margin-right: 10px;
    	float: left;
    	}			
    </style>	
    
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=207990		
    	
    var ImageDisplayLists = [];  // setup below is ['URL','Caption information']
      ImageDisplayLists['Horses'] = [
      ['http://www.westsierrahanoverians.com/images/fortunato_foal2.jpg','3 days old'],
      ['http://www.westsierrahanoverians.com/images/fortunato_foal.jpg','3 monhs old'],
      ['http://www.westsierrahanoverians.com/images/fortunato_canter.jpg','Canter'],
      ['http://www.westsierrahanoverians.com/images/forunato_trot.jpg','Trot'],
      ['http://www.westsierrahanoverians.com/images/wakanova_conf.jpg','Wakanova'],
      ['http://www.westsierrahanoverians.com/images/princess_canter.jpg','Princess'],
      ['http://www.westsierrahanoverians.com/images/dona_fran_trot.jpg','Dona Fran trot'],
      ['http://www.westsierrahanoverians.com/images/wakanova_trot2.jpg','Wakanova trot']  // Note: no comma 
    ];
    
    var ImageList = new Array();
    function SetImage(imgPtr) {
      var ids = 'BigImage';
      document.getElementById(ids).src=ImageList[imgPtr][0];
      document.getElementById(ids).alt=ImageList[imgPtr][0];
      document.getElementById(ids+'Caption').innerHTML = ImageList[imgPtr][1];
    }
    function InitImages(imgArray) {
      ImageList = ImageDisplayLists[imgArray];
      for (var i=0; i<ImageList.length; i++) {
        document.write('<img id="FC'+i+'" src="'+ImageList[i][0]+'" alt="'+ImageList[i][0]+'"' 
        + ' height="75" width="75" onClick="SetImage('+i+')">&nbsp;');
      }
    }
    
    window.onload = function() { SetImage(0); }
    
    </script>
    </head>
    
    <body>
    <div id="mainContain">
        <div id="categories">
        </div>
        
        <div id="rightContain">
            <div id="photoView">
            	<table id="photoContain" border="0" cellspacing="0" cellpadding="0">
                  <tr align="center">
                    <td>
    <img id="BigImage" height="400" width="600" src="" alt="">
    <br><span id="BigImageCaption"></span>
                    </td>
                  </tr>
                </table>  
            </div>
            
          <div id="selector">
    <script type="text/javascript">InitImages('Horses')</script>
          </div>
        </div>
        
    </div>
    </body>
    </html>
    Alter "ImageDisplayLists" array with your 'URL' and 'Caption' information

  3. #3
    Join Date
    Apr 2009
    Location
    Western Mass
    Posts
    3

    Thanks...

    Thanks for your help, I really appreciate it

    Alright, so far I copied and pasted the pieces in that you mentioned. It looks to me like the image list is showing up in the selector, but when you click on them, nothing happens(they also dont make any indication that you can click on them either, not sure if that matters or not). The big image in the top area is only showing the src that is attached to the tag already, and there is no caption below it either. Here is what I have for code so far:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Photo Gallery</title>
    <style type="text/css">
    body
    	{
    	margin: 0px;
    	padding: 0px;
    	}
    
    #mainContain
    	{
    	position: relative;
    	top: 20px;
    	left: 0px;
    	width: 860px;
    	height: 600px;
    	margin: 0px auto;
    	background: #CCFFFF;
    	padding: 0px;
    	border: none;
    	}
    
    #categories
    	{
    	position: relative;
    	top: 0px;
    	left: 0px;
    	width: 200px;
    	height: 600px;
    	margin: 0px 10px 0px 0px;
    	padding: 0px;
    	background: #6699CC;
    	border: none;
    	float: left;
    	}
    	
    #rightContain
    	{
    	position: relative;
    	top: 0px;
    	left: 0px;
    	width: 650px;
    	height: 600px;
    	margin:  0px;
    	padding: 0px;
    	background: #FFFFCC;
    	border: none;
    	float: left;
    	}
    	
    #photoView
    	{
    	position: relative;
    	top: 0px;
    	left: 0px;
    	width: 650px;
    	height: 425px;
    	margin: 0px 0px 10px 0px;
    	padding: 20px 0px;
    	background: #333333;
    	border: none;
    	}
    	
    #photoContain
    	{
    	position: relative;
    	top: 0px;
    	left: 0px;
    	width: 580px;
    	height: 424px;
    	margin: 0px auto;
    	padding: 10px 0px;
    	background: #CC9933;
    	}	
    	
    #selector
    	{
    	position: relative;
    	top: 0px;
    	left: 0px;
    	width: 640px;
    	height: 115px;
    	margin: 0px;
    	padding: 10px 0px 0px 10px;
    	border: none;
    	background: #33FFFF;
    	overflow: auto;
    	/*
    	overflow-x: scroll;
    	overflow-y: hidden;*/
    	}
    	
    /* classes */
    img.thumb
    	{
    	margin-right: 10px;
    	float: left;
    	}		
    </style>
    
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?t=207990		
    	
    var ImageDisplayLists = [];  // setup below is ['URL','Caption information']
      ImageDisplayLists['Green'] = [
      ['img/testPic.png','Red Background'],
      ['img/testPic2.png','Red Tint'],
      ['img/testPic3.png','Teal Tint']// Note: no comma 
    ];
    
    var ImageList = new Array();
    function SetImage(imgPtr) {
      var ids = 'BigImage';
      document.getElementById(ids).src=ImageList[imgPtr][0];
      document.getElementById(ids).alt=ImageList[imgPtr][0];
      document.getElementById(ids+'Caption').innerHTML = ImageList[imgPtr][1];
    }
    function InitImages(imgArray) {
      ImageList = ImageDisplayLists[imgArray];
      for (var i=0; i<ImageList.length; i++) {
        document.write('<img id="FC'+i+'" src="'+ImageList[i][0]+'" alt="'+ImageList[i][0]+'"' 
        + ' height="75" width="75" onClick="SetImage('+i+')">&nbsp;');
      }
    }
    
    window.onload = function() { SetImage(0); }
    
    </script>
    
    </head>
    
    <body>
    <div id="mainContain">
        <div id="categories">
        </div>
        
        <div id="rightContain">
            <div id="photoView">
            	<table id="photoContain" border="0" cellspacing="0" cellpadding="0">
                  <tr align="center">
                    <td><img id="bigImage" width="350" height="350" src="img/testPic.png" alt="green blob" />
                    <br /><span id="BigImageCaption"></span></td>
                  </tr>
                </table>  
            </div>
            
          <div id="selector">
            	<script type="text/javascript">InitImages('Green')</script>
          </div>
        </div>
        
    </div>
    </body>
    </html>
    Hopefully I have at least copied and altered the code you gave me correctly. Do you have any suggestions as to why the selector images don't change the big picture above yet?

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,441

    Smile

    Assuming the images are in a directory 'img' one down from the script location
    the primary problem I see is that you changed the id of the 'BigImage' to 'bigImage'

    Should fix a majority of the problems

  5. #5
    Join Date
    Apr 2009
    Location
    Western Mass
    Posts
    3
    Excellent! Thanks so much for the help!

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,441
    You're most welcome.
    Glad I was able to help.
    Good Luck!

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