Solved: click photo gallery - Page 4

tomdkat · 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 · 11:14 PM

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.

tomdkat · 12:05 AM

Quote:

Originally Posted by skyhigh007

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...

skyhigh007 · 05-Apr-2008, 03:52 PM **#49**

You are right, looks like might be the way I list the thumbnails.

skyhigh007 · 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 · 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 · 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 · 05:49 PM

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...

skyhigh007 · 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 · 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 · 14-Apr-2008, 07:20 PM **#56**

Thank you very much! I will keep working on it!

skyhigh007 · 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 · 15-Apr-2008, 01:05 AM **#58**

I would number each thumbnail sequentially and NOT reset the numbering for each set.

Peace...

skyhigh007 · 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 · 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...

Search
Search in:
Show Threads Show Posts
Advanced Search

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