There's no such thing as a stupid question, but they're the easiest to answer.
JoinTour
Login
 
Tag Cloud
access audio avg avg 8 bios blue screen boot browser bsod computer crash css dell desktop driver drivers dvd email error excel explorer firefox firefox 3 freeze gimp graphics hard drive hardware help please hijackthis hjt hjt log install internet internet explorer itunes javascript keyboard laptop log malware monitor network networking openoffice outlook outlook 2003 outlook express password popups problem router seo slow sound sp3 spyware startup trojan usb video virtumonde virus vista vundo windows windows xp winxp wireless youtube
Web Design & Development
Search
Search in:
 
Advanced Search
Tech Support Guy Forums > Internet & Networking > Web Design & Development >
Solved: click photo gallery


HELLO AND WELCOME! Before you can post your question, you'll have to register -- it's completely free! Click here to join today! We highly recommend that you print a copy of our Guide for New Members. Enjoy!

 
Thread Tools
tomdkat's Avatar
Computer Specs
Distinguished Member with 2,996 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
04-Apr-2008, 11:45 AM #46
The "previousid > 0" might be what caused an issue in Opera. In my version, I tested to see if the element was null. My code works fine in Opera 9.5b and Firefox 2.0.0.13 (both on Linux) regardless of how you click the thumbnails. I haven't tried IE yet.

Peace...
skyhigh007's Avatar
Senior Member with 362 posts.
 
Join Date: Jun 2004
04-Apr-2008, 11:05 PM #47
Im testing it on the windows and your code also has the same problem in Opera 9.25, Besides that, I.E, firefox, Safari and Netscape are all fine! The problem is when you click from right to left, all the thumbnails that was previously clicked will stay in selected.

Anyway, I fix it by changing the border="none" to 1px solid white. Thank you very much. By the way, are you going to sue me If im using your code on a website?

now the last part of the gallery, adding arrows on the larger image.

Last edited by skyhigh007 : 04-Apr-2008 11:14 PM.
tomdkat's Avatar
Computer Specs
Distinguished Member with 2,996 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
04-Apr-2008, 11:35 PM #48
Quote:
Originally Posted by skyhigh007 View Post
Im testing it on the windows and your code also has the same problem in Opera 9.25, Besides that, I.E, firefox, Safari and Netscape are all fine! The problem is when you click from right to left, all the thumbnails that was previously clicked will stay in selected.
I tested in Opera 9.5b on Windows and I didn't have access to Opera 9.2. I've got access to Opera 9.2 now so I'll see what my local test case does.

EDIT: Ok, I just did a test in Opera 9.27 on Windows XP and my test case works as is. I'll change the images and will send you a link to a server you can run against to see for yourself.

Peace...

Last edited by tomdkat : 05-Apr-2008 12:05 AM.
skyhigh007's Avatar
Senior Member with 362 posts.
 
Join Date: Jun 2004
05-Apr-2008, 03:52 PM #49
You are right, looks like might be the way I list the thumbnails.
skyhigh007's Avatar
Senior Member with 362 posts.
 
Join Date: Jun 2004
09-Apr-2008, 11:18 PM #50
After searching and searching ,I still don't have clue on how to add navigational buttons on the large image. any hints?
tomdkat's Avatar
Computer Specs
Distinguished Member with 2,996 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
10-Apr-2008, 02:30 AM #51
Actually, one idea I *just* had is to use a DIV with a transparent GIF as a background that will overlay the large image.

Let me cobble up a working example to show you.

Peace...
skyhigh007's Avatar
Senior Member with 362 posts.
 
Join Date: Jun 2004
10-Apr-2008, 11:37 PM #52
Thank you, I just added navigation buttons when use hover the large image, but I dont know how its going to move to the previous or next larger image when you click on the previous or next button.
tomdkat's Avatar
Computer Specs
Distinguished Member with 2,996 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
11-Apr-2008, 05:47 PM #53
Well, I appear to have hit a brick wall. I've got some arrows appearing when you hover over the large image and I've got links working for the arrows but I'm having problems getting the links for the arrows updating properly when you click them.

EDIT: This is what I've come up with in case someone else has some ideas:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>Photo Gallery</title>

  <script type="text/javascript">
var prevThumb=null;
function swapImg(newImg,thumbNail,nextImg,prevImg) {
document.getElementById('large-img').src=newImg;
if (prevThumb!=null) {
prevThumb.style.border='none';
}
thumbNail.style.border='1px solid red';
prevThumb=thumbNail;
document.getElementById('left-nav').href='#'+prevImg;
document.getElementById('right-nav').href='#'+nextImg;
}

function doNav(navElement) {
alert(navElement.href);
start=navElement.href.indexOf("#");
newLoc=navElement.href.substring(start+1,99);
alert(newLoc);
document.getElementById('large-img').src=newLoc;
}
  </script>

  <style type="text/css">
#navigation {
border: 5px ridge #66cccc;
display: block;
width: 500px;
position: absolute;
padding-top: 0px;
top: 0px;
height: 400px;
margin-left: 57px;
margin-top: 150px;
color: white;
}
#large {
border-style: solid;
border-width: 1px;
display: block;
width: 500px;
height: 400px;
position: relative;
margin-top: 0px;
padding-top: 0px;
top: 0px;
}
div#navigation:hover {
background-image: url(nav-back.png);
background-repeat: no-repeat;
}
.nav-col {
display: block;
height: 100%;
width: 35px;
}
.left-nav {
display: block;
float: left;
}
.right-nav {
display: block;
float: right;
}
div#navigation a {
width: 100%;
height: 100%;
display: block;
}
a {
color: white;
text-decoration: none;
}
  </style>
</head>

<body>
<table style="width: 550px; text-align: left; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="text-align: center;"><img onclick="swapImg('pic1.jpg',this,'pic2.jpg','pic4.jpg');" style="width: 150px; height: 113px;" alt="Thumbnail #1" src="pic1t.jpg"></td>
      <td style="text-align: center;"><img onclick="swapImg('pic2.jpg',this);" style="width: 150px; height: 113px;" alt="Thumbnail #2" src="pic2t.jpg"></td>
      <td style="text-align: center;"><img onclick="swapImg('pic3.jpg',this);" style="width: 150px; height: 113px;" alt="Thumbnail #3" src="pic3t.jpg"></td>
      <td style="text-align: center;"><img onclick="swapImg('pic4.jpg',this);" style="width: 150px; height: 113px;" alt="Thumbnail #4" src="pic4t.jpg"></td>
    </tr>
    <tr align="center">
      <td style="height: 425px;" colspan="4">
      <div id="large"><img style="width: 500px; height: 400px;" id="large-img" alt="Large image" src="filler.jpg"></div>
      <div id="navigation">
      <div class="nav-col left-nav"><a href="#" id="left-nav" onclick="doNav(this);">#</a></div>
      <div class="nav-col right-nav">
      <a href="#" id="right-nav">#</a></div>
      </div>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>
Peace...

Last edited by tomdkat : 11-Apr-2008 05:49 PM. Reason: Added current HTML code
skyhigh007's Avatar
Senior Member with 362 posts.
 
Join Date: Jun 2004
13-Apr-2008, 12:22 PM #54
Thank you for coding up an example. I will look into that code and test it out.
tomdkat's Avatar
Computer Specs
Distinguished Member with 2,996 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
13-Apr-2008, 06:37 PM #55
Ok. Keep in mind the code above doesn't fully work but using it, you can see how much progress I made.

Peace...
skyhigh007's Avatar
Senior Member with 362 posts.
 
Join Date: Jun 2004
14-Apr-2008, 07:20 PM #56
Thank you very much! I will keep working on it!
skyhigh007's Avatar
Senior Member with 362 posts.
 
Join Date: Jun 2004
14-Apr-2008, 11:21 PM #57
Oh by the way, I just find out that there are 60 thumbnails or more and all of them cant fit on one page, so I was thinking to have multiple lists. What I want to accomplish is when a user clicks on an "set 1" it will load a list. Everything has to be on one page. How do you approach to write onClick for set1 ?

Code:
<ul>
    <li><a href="#">set 1</a>
       <ul>
           <li><img src="1.jpg"></li> 
           <li><img src="2.jpg"></li>
       </ul>
    </li>   
   <li><a href="#">set 2</a>
       <ul>
           <li><img src="1.jpg"></li> 
           <li><img src="2.jpg"></li>
       </ul>
    </li> 
</ul>
tomdkat's Avatar
Computer Specs
Distinguished Member with 2,996 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
15-Apr-2008, 01:05 AM #58
I would number each thumbnail sequentially and NOT reset the numbering for each set.

Peace...
skyhigh007's Avatar
Senior Member with 362 posts.
 
Join Date: Jun 2004
15-Apr-2008, 02:54 PM #59
What I have right now is just a list, the thumbnails I have cant fit on a fixed space, So I what I'm thinking is to to have multiple sets of thumbnails and the display for the larger image stays the same. The code was just an example to illustrate the structure. How do you make the onclick() for set1 ?
tomdkat's Avatar
Computer Specs
Distinguished Member with 2,996 posts.
 
Join Date: May 2006
Location: S.F. Bay Area, CA
Experience: Intermediate
15-Apr-2008, 03:36 PM #60
If you number the images sequentially, the code you have now won't have to change.
Code:
<ul>
    <li><a href="#">set 1</a>
       <ul>
           <li><img src="1.jpg"></li> 
           <li><img src="2.jpg"></li>
       </ul>
    </li>   
   <li><a href="#">set 2</a>
       <ul>
           <li><img src="3.jpg"></li> 
           <li><img src="4.jpg"></li>
       </ul>
    </li> 
</ul>
Otherwise, you would need develop another method of getting a "handle" to the thumbnail object you want to "select". Passing "this" is the best way of doing that since each thumbnail can be handled independently and you won't need unique ids for each thumbnail, etc. So, if you wanted to pass the thumbnail that was clicked to the swapImg() function, the call would look like this:

Code:
<ul>
    <li><a href="#">set 1</a>
       <ul>
           <li><img src="1.jpg" onClick="swapImg('[large image file name or URL]',this);"></li> 
           <li><img src="2.jpg" onClick="swapImg('[large image file name or URL]',this);"></li>
       </ul>
    </li>   
   <li><a href="#">set 2</a>
       <ul>
           <li><img src="3.jpg" onClick="swapImg('[large image file name or URL]',this);"></li> 
           <li><img src="4.jpg" onClick="swapImg('[large image file name or URL]',this);"></li>
       </ul>
    </li> 
</ul>
Then swapImg() would be coded like:
Code:
var oldThumb=null;

function swapImg(largeImg,thumbnail) {

document.getElementById('large-img').src=largeImg;

if (oldThumb != null) {
  oldThumb.border='none';
}

thumbnail.border='1px solid red;';
oldThumb = thumbnail;
}
Peace...
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are Off
Refbacks are Off

You Are Using:
Server ID
Advertisements do not imply our endorsement of that product or service.
All times are GMT -4. The time now is 03:23 AM.
Copyright © 1996 - 2008 TechGuy, Inc. All rights reserved.
Powered by vBulletin, Copyright © 2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Optimization by vBSEO 3.1.0
Powered by Cermak Technologies, Inc.