Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7

Thread: Question

  1. #1
    Junior Member
    Join Date
    Jun 2008
    Posts
    1
    Member #
    16961
    I'm kinda new at web design and i'm wondering how do i create a Photo Album Page to have many squares of Thumbnails that when clicked on can be enlarged?

  2.  

  3. #2
    Junior Member
    Join Date
    May 2008
    Posts
    24
    Member #
    16855
    You can do it by using javascript. There a lot of javascripts out there on the web that you can just cut and paste the code.
    2Shea Creative Graphic Design

    Dull pencils make dull drawings

  4. #3
    Member jamilla_0001's Avatar
    Join Date
    Jun 2008
    Location
    Philippines
    Posts
    34
    Member #
    16926
    theres a lot of way opn how to create a photo album page,
    and here's my sugesstion,actually I'm bot really good when it comes to designing
    anyway,I think you can do it using dreamweaver,I've tried it before..
    or try to brwse tutorial site..don't worry there's a lot of experts in this forum
    they will help you..just wait..

  5. #4
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    i'm thinking use CSS to control the style and layout etc and then use javascript for the open in the new window/enlarge. like previous answers, i can say that there are thousands of sites on the net that can help you do this easily.

  6. #5
    Senior Member seanmiller's Avatar
    Join Date
    Sep 2003
    Location
    Glastonbury, UK
    Posts
    868
    Member #
    3263
    Liked
    1 times
    Search for "lightbox script" on Google.

    Sean

  7. #6
    Senior Member diddy's Avatar
    Join Date
    Jun 2008
    Location
    Sydney, Australia
    Posts
    502
    Member #
    16955
    I came up with an idea. Just use this:
    Code:
     
    <html>
    <head>
    <title>image gallery</title>
    <style type="text/css">
    div.img
    {
      margin: 2px;
      border: 1px solid #0000ff;
      height: auto;
      width: auto;
      float: left;
      text-align: center;
    } 
    div.img img
    {
      display: inline;
      margin: 3px;
      border: 1px solid #ffffff;
    }
    div.img a:hover img {border: 1px solid #0000ff;}
    div.desc
    {
      text-align: center;
      font-weight: normal;
      width: 120px;
      margin: 2px;
    }
    </style>
    <style type="text/css">
    #filter
    {
    opacity:0.4;
    filter:alpha(opacity=40)
    }
    </style>
    </head>
    <body>
    <div class="img">
     <a target="_blank" href="klematis_big.htm"><img id="filter" 
    src="klematis_small.jpg" alt="Klematis" width="110" height="90" 
    onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
    onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></a>
     <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
     <a target="_blank" href="klematis2_big.htm"><img id="filter" 
    src="klematis2_small.jpg" alt="Klematis" width="110" height="90" 
    onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
    onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" /></a>
     <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
     <a target="_blank" href="klematis3_big.htm"><img  
    id="filter"src="klematis3_small.jpg" alt="Klematis" width="110" height="90" 
    onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
    onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"  /></a>
     <div class="desc">Add a description of the image here</div>
    </div>
    <div class="img">
     <a target="_blank" href="klematis4_big.htm"><img  
    id="filter"src="klematis4_small.jpg" alt="Klematis" width="110" height="90" 
    onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
    onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"  /></a>
     <div class="desc">Add a description of the image here</div>
    </div>
    </body>
    </html>
    Just insert your own images and descriptions and save your large versions of the images as welll, link to them and there you have your image gallery!

  8. #7
    Senior Member seanmiller's Avatar
    Join Date
    Sep 2003
    Location
    Glastonbury, UK
    Posts
    868
    Member #
    3263
    Liked
    1 times
    You could also use the gd libraries to automatically create the thumbnails, thus saving you the effort of having two...

    That's how the images work in this site I wrote... you upload the images through an admin interface and the thumbnails are automatically created...

    http://burnthousedrove.co.uk

    Sean


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:42 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com