Create Photo Gallery using Javascript

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • domichula12
    New Member
    • Sep 2007
    • 2
    #1

    Create Photo Gallery using Javascript

    I'm making a website, but i need a photo gallery, like at the top of
    the page there are thumbnails of the pictures and when they are
    clicked a bigger picture loads beneath the line of thumbnails. If you
    ever used frontpage you might know what i'm talking about. Also when
    the thumbnails are cliked beneath the larger pictures, the name and
    description pops up.

    I will want to add photos in later aswell, so a scroll bar at the top
    would be good.

    I need to be able to do it without that much work with the images.

    Can anyone help me?
    I don't know anything bout Javascript. Sorry!! So I need baby language when it comes to that. I have worked with html. I'm using frontpage to load it on the website.
    Thanks in advance
    Tags: None
    • Death Slaught
      Top Contributor
      • Aug 2007
      • 1137
      #2
      Originally posted by domichula12
      I'm making a website, but i need a photo gallery, like at the top of
      the page there are thumbnails of the pictures and when they are
      clicked a bigger picture loads beneath the line of thumbnails. If you
      ever used frontpage you might know what i'm talking about. Also when
      the thumbnails are cliked beneath the larger pictures, the name and
      description pops up.

      I will want to add photos in later aswell, so a scroll bar at the top
      would be good.

      I need to be able to do it without that much work with the images.

      Can anyone help me?
      I don't know anything bout Javascript. Sorry!! So I need baby language when it comes to that. I have worked with html. I'm using frontpage to load it on the website.
      Thanks in advance

      Well you could just use HTML to make the thumbnail a link and when you click on it, it opens a new page that displays the image at a larger size. Heres how you could do it:

      Say these are the thumbnails (i'm only using 2 thumbnails but you should get the idea) :

      [HTML]<a href="Location of bigger picture" target="_blank" >
      <img border="0" src="Location of the thumbnail" />
      </a>
      <a href="Location of other bigger picture" target="_blank" >
      <img border="0" src="Location of the other thumbnail" />
      </a>[/HTML]

      and these are the bigger thumbnails:

      [HTML]<img src="Location of the bigger thumbnail" width="how big you want the width of the thumbnail" height="how big you want the height of the thumbnail" />
      <img src="Location of the other bigger thumbnail" width="how big you want the width of the thumbnail" height="how big you want the height of the thumbnail" />[/HTML]

      you would have to put the bigger thumbnails in a different HTML document, and make the smaller ones a link to them.

      I'm not sure if this is what your looking for, but if it's not then i'm sure another TSDN member will be able to help.

      Thanks, Death

        Comment

        • domichula12
          New Member
          • Sep 2007
          • 2
          #3
          Originally posted by Death Slaught
          Well you could just use HTML to make the thumbnail a link and when you click on it, it opens a new page that displays the image at a larger size. Heres how you could do it:

          Say these are the thumbnails (i'm only using 2 thumbnails but you should get the idea) :

          [HTML]<a href="Location of bigger picture" target="_blank" >
          <img border="0" src="Location of the thumbnail" />
          </a>
          <a href="Location of other bigger picture" target="_blank" >
          <img border="0" src="Location of the other thumbnail" />
          </a>[/HTML]

          and these are the bigger thumbnails:

          [HTML]<img src="Location of the bigger thumbnail" width="how big you want the width of the thumbnail" height="how big you want the height of the thumbnail" />
          <img src="Location of the other bigger thumbnail" width="how big you want the width of the thumbnail" height="how big you want the height of the thumbnail" />[/HTML]

          you would have to put the bigger thumbnails in a different HTML document, and make the smaller ones a link to them.

          I'm not sure if this is what your looking for, but if it's not then i'm sure another TSDN member will be able to help.

          Thanks, Death
          No, I want it to show up on the same page, next to the thumbnails.

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              Originally posted by domichula12
              I'm making a website, but i need a photo gallery, like at the top of the page there are thumbnails of the pictures and when they are
              clicked a bigger picture loads beneath the line of thumbnails. If you
              ever used frontpage you might know what i'm talking about. Also when
              the thumbnails are cliked beneath the larger pictures, the name and
              description pops up.
              Let's say you have three thumbnails:
              [HTML]<img id="img1" src="img1.gif">
              <img id="img2" src="img2.gif">
              <img id="img3" src="img3.gif">[/HTML] Set these to the size you want using width/height properties.

              Now onto the bigger picture. This will again be an img tag. Give it an id, e.g.[HTML]<img id="bigimg">[/HTML] Now in your thumbnails, add onclicks that change the main picture, e.g.[CODE=javascript]<img id="img1" src="img1.gif" onclick="docume nt.getElementBy Id('bigimg').sr c=this.src;">[/CODE] You could call a function instead. There are also other techniques, but this is the simplest way.

              See how you get along with that. If you get stuck, post your code.

                Comment

                Previous template Next
                Working...