SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Gallery Help

    Hi, I'm trying to create a basic image gallery. I'm a newb at javascript so please go easy on me

    I have one big "active" image and 4 thumbs. When you click a thumb, the active image should be replaced. Here's what I've done so far but I'm stumped.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
    <html>
    <head>
    <title>gallery</title>
    
    <script type='text/javascript'>
    
    window.onload=function()
    {
    	var activeImg = document.getElementById('active');
    
    	var imageOne = document.getElementById('imgone');
    	var imageTwo = document.getElementById('imgtwo');
    	var imageThree = document.getElementById('imgthree');
    	var imageFour = document.getElementById('imgfour');
    
    	imageOne.onclick=function()
    	{
    		this.activeImg.src = image1.jpg;
    	}
    
    	imageTwo.onclick=function()
    	{
    		this.activeImg.src = image2.jpg;
    	}
    
    	imageThree.onclick=function()
    	{
    		this.activeImg.src = image3.jpg;
    	}
    
    	imageFour.onclick=function()
    	{
    		this.activeImg.src = image4.jpg;
    	}
    }
    
    
    
    </script>
    
    </head>
    <body>
    <table>
     <tr>
      <td colspan="4"><img src="image1.jpg" id="active" /></td>
     </tr>
    
     <tr>
      <td><img src="image1_thumb.jpg" id="imgone" /></td>
      <td><img src="image2_thumb.jpg" id="imgtwo" /></td>
      <td><img src="image3_thumb.jpg" id="imgthree" /></td>
      <td><img src="image4_thumb.jpg" id="imgfour" /></td>
     </tr>
    </table>
    </body>
    </html>
    any help would be appreciated

  2. #2
    SitePoint Enthusiast nimpkish-media's Avatar
    Join Date
    Jun 2010
    Location
    Victoria BC, Canada
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you planning on loading the other large images onload and then hiding them? Or would you like to have them loaded only onclick?

    Will the main images and the thumbnails have the same name but reside in a different directory?

  3. #3
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    They would be loaded onclick, the other big images

    No, all the images are in the same directory. the big ones are called, for example:

    image1.jpg

    the thumb is

    image1_thumb.jpg

    thanks

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To make that code work, you'd need to enclose the image src in quotes. Also, the reference to the dynamic large image has already been obtained via getElementById("active"), so leave the references to 'this' out of it.

    So in the first onclick assignment, use:

    Code:
    activeImg.src = "image1.jpg";
    .. and so on for the others.

    Also, if you are going to apply styling to the gallery later on, you might want to remedy that doctype, which is missing its URI. A Transitional html doctype with a missing URI creates styling problems (quirks mode) for Internet Explorer. Make sure you code consistently also - those img tags are xhtml.

    Also (sorry to be pedantic about non-javascript matters), if you are just starting out, it may pay to look at how galleries can be done without using tables for layout. Have a look at the following example:
    http://www.w3schools.com/css/css_image_gallery.asp

    And for this type of rollover gallery, you can also do it with CSS entirely if you like. Have a look at the many examples at www.cssplay.co.uk

  5. #5
    SitePoint Enthusiast nimpkish-media's Avatar
    Join Date
    Jun 2010
    Location
    Victoria BC, Canada
    Posts
    43
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I created a very simple photo gallery example for you to take a look at. Hopefully it will help you out. I used html, css and a wee little bit of jQuery.

    If you have any questions let me know.

    Good luck!

  6. #6
    SitePoint Member
    Join Date
    Nov 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks alot for the help guys! I figured it out


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
  •