Originally Posted by
Mblaster
That is working for me on IE8 (or maybe you already fixed it).
The only problem I see now is that your image 7 doesn't show in the list of thumb nails, but it still gets navigated to with the previous/next buttons but displays no image.
This is because the Javascript file you're using was designed for having 7 thumb nails on the bottom and you're using 6. You might be able to fix this by changing all occurances of 7 to 6, and 6 to 5 in the Javascript file but I've only had a quick look at the Javascript file so not sure it'll work. Alternativly you could change it back to 7 thumb nails and decrease the size of your previous/next images so they fit on a single line.
Ya i noticed that, i am finding it difficult to fix that.
if i hide th7 then it shows
Previous 1 2 3 4 5 6 Next
But it will not show 7 as you noticed.
but i show th7 as it was designed to do so, it does like this (the Next button being on the next line instead of on the same row, as shown below
Previous 1 2 3 4 5 6 7
Next
I do not know how to "fix this by changing all occurances of 7 to 6, and 6 to 5 in the Javascript file"
As i have never dealt with JS or CSS before.
Below i will Put the Code for JS, CSS, HTML
p.s. I am assuming the .js file that is in use here is scroll_gallery.js
If it is not please let me know and i will paste the correct one.
scroll_gallery.js
Code:
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this script and the associated (x)html
is available at http://www.stunicholls/gallery/left_right_click.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This script and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
clickMenu = function(gallery)
{
var getImg = document.getElementById(gallery).getElementsByTagName("IMG");
var getLi = document.getElementById(gallery).getElementsByTagName("LI");
for (var i=0; i<getImg.length; i++) {
getImg[i].onclick=function() {
if ((this.className.indexOf('left'))!=-1) {
for (var x=getLi.length-1; x>0; x--) {
if ((getLi[x].className.indexOf('chosen'))!=-1) {
getLi[x].className=getLi[x].className.replace("chosen", "");
x--;
if (x>-1) {
getLi[x].className+=" chosen";
if (x>-1 && x<getLi.length-7){
getLi[x].className=getLi[x].className.replace("hide", "");
if ((getLi[x+7].className.indexOf('hide'))==-1)
{
getLi[x+7].className+=" hide";
}
}
}
}
}
}
if ((this.className.indexOf('right'))!=-1) {
for (var x=0; x<getLi.length-1; x++) {
if ((getLi[x].className.indexOf('chosen'))!=-1) {
getLi[x].className=getLi[x].className.replace("chosen", "");
x++;
if (x<getLi.length) {
getLi[x].className+=" chosen";
if (x>6 && x<getLi.length) {
getLi[x].className=getLi[x].className.replace("hide", "");
if ((getLi[x-7].className.indexOf('hide'))==-1)
{
getLi[x-7].className+=" hide";
}
}
}
}
}
}
}
}
for (var i=0; i<getLi.length; i++) {
getLi[i].onclick=function() {
for (var x=0; x<getLi.length; x++) {
if ((getLi[x].className.indexOf('chosen'))!=-1) {
getLi[x].className=getLi[x].className.replace("chosen", "");
}
}
this.className+=" chosen";
}
}
}
photo.css
Code:
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.stunicholls/gallery/left_right_click.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* the box which has the thumbnails */
#gallery {width:534px; position:relative; height:60px; padding-top:370px; margin:0px 0px 0px 0px;}
/* the left and right arrows */
#gallery img.left {width:56px; height:12px; ; float:left;cursor:pointer; padding-top:20px;}
#gallery img.right {width:40px; height:12px; ; float:left;cursor:pointer; padding-top:20px;}
/* the thumbnails */
#gallery ul {list-style:none; padding:0; margin:0; float:left; border-width:5px 2px;}
#gallery ul li {display:inline; width:50px; height:50px; float:left; margin:0 6px; border:1px solid #000; cursor:pointer;}
#gallery ul li.hide {display:none;}
/* using background images */
#gallery ul li.th1 {background:url(../images/photos/01-t.jpg);}
#gallery ul li.th2 {background:url(../images/photos/02-t.jpg);}
#gallery ul li.th3 {background:url(../images/photos/03-t.jpg);}
#gallery ul li.th4 {background:url(../images/photos/04-t.jpg);}
#gallery ul li.th5 {background:url(../images/photos/05-t.jpg);}
#gallery ul li.th6 {background:url(../images/photos/06-t.jpg);}
#gallery ul li.th7 {background:url(../images/photos/07-t.jpg);}
#gallery ul li.th8 {background:url(../images/photos/08-t.jpg);}
#gallery ul li.th9 {background:url(../images/photos/09-t.jpg);}
#gallery ul li.th10 {background:url(../images/photos/10-t.jpg);}
#gallery ul li.th11 {background:url(../images/photos/11-t.jpg);}
#gallery ul li.th12 {background:url(../images/photos/12-t.jpg);}
/* remove visibility:hidden; if you want to use the original images as thumbnails */
#gallery ul li img { visibility:hidden; display:block; width:50px; height:50px;}
/* text box */
#gallery ul li span {
display:none;
position:absolute;
left:20px;
top:10px;
width:500px;
font-family: Tahoma, Arial, Georgia;
font-size:13px;
line-height:15px;
text-align:justify;
}
#gallery ul li b {color:#444;}
/* big image */
#gallery ul li.chosen {border-color:#fff; cursor:default;}
#gallery ul li.chosen div {
position:absolute;
left:0px;
top:50px;
width:534px;
height:300px;
}
#gallery ul li.chosen div i {width:530px; height:300px; display:table-cell; vertical-align:middle; text-align:center;}
#gallery ul li.chosen div i img {visibility:visible; width:auto; height:auto; border:1px solid #d7b478; margin:0 auto;}
#gallery ul li.chosen span {display:block;}
photo.htm
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Pallavi Goenka || The Designer</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/photo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/img_hover.js"></script>
<script src="js/scroll_gallery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#links a").enter();// call the function
});
</script>
</head>
<body onload="clickMenu('gallery')">
<table width="1003" border="0" align="center" cellpadding="0" cellspacing="0" class="designer_bg">
<tr>
<td width="235" align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><a href="index.htm"><img src="http://forums.hexus.net/images/motif_inner.png" alt="" width="236" height="319" border="0"></a></td>
</tr>
<tr>
<td align="center" valign="top"><a href="index.htm"><img src="http://forums.hexus.net/images/pallavi_inner.png" alt="" width="235" height="73" border="0"></a></td>
</tr>
</table></td>
<td width="32" align="center" valign="top"> </td>
<td height="770" align="right" valign="top" style="padding-top:44px; padding-right:125px;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="right" valign="top"><!-- #BeginLibraryItem "/Library/top_menu.lbi" --><table border="0" cellpadding="0" cellspacing="0" id="links">
<tr>
<td><a href="designer.htm"><img src="http://forums.hexus.net/images/design-inner.png" alt="" width="148" height="34" border="0"></a></td>
<td width="15"> </td>
<td><a href="collection.htm"><img src="http://forums.hexus.net/images/collection-inner.png" alt="" width="113" height="34" border="0"></a></td>
<td width="15"> </td>
<td><a href="press.htm"><img src="http://forums.hexus.net/images/press-inner.png" alt="" width="72" height="34" border="0"></a></td>
<td width="15"> </td>
<td><a href="contact.htm"><img src="http://forums.hexus.net/images/contact-inner.png" alt="" width="95" height="34" border="0"></a></td>
</tr>
</table><!-- #EndLibraryItem --></td>
</tr>
<tr>
<td height="30"> </td>
</tr>
<tr>
<td align="left" valign="top"><img src="http://forums.hexus.net/images/photo-t.png" alt="" width="173" height="40"></td>
</tr>
<tr>
<td align="left" valign="top"><div id="gallery">
<img src="http://forums.hexus.net/images/previous.png" alt="previous" class="left" title="" width="56" border="0" height="12">
<ul>
<li class=" th1 chosen">
<div><i><em></em><img src="http://forums.hexus.net/images/photos/01.jpg" alt="" width="490" height="300" class="start" title=""></i></div>
<!--<span><b>mushru</b><br></span> --></li>
<li class="th2 ">
<div><i><em></em><img src="http://forums.hexus.net/images/photos/02.jpg" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>kutchi hastkala</b><br></span> --></li>
<li class="th3 ">
<div><i><em></em><img src="http://forums.hexus.net/images/photos/03.jpg" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>lakhnavi</b><br></span> --></li>
<li class="th4 ">
<div><i><em></em><img src="http://forums.hexus.net/images/photos/04.jpg" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>mulmul</b><br></span> --></li>
<li class="th5">
<div><i><em></em><img src="http://forums.hexus.net/images/photos/05.jpg" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>kantha</b><br></span> --></li>
<li class="th6">
<div><i><em></em><img src="http://forums.hexus.net/images/photos/06.jpg" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>patchwork</b><br></span> --></li>
<li class="hide th7 ">
<div><i><em></em><img src="http://forums.hexus.net/images/photos/07.jpg" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>mushru</b><br></span> --></li>
<li class="hide th8 ">
<div><i><em></em><img src="http://forums.hexus.net/images/photos/08.jpg" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>kutchi hastkala</b><br></span> --></li>
<li class="hide th9 ">
<div><i><em></em><img src="http://forums.hexus.net/images/photos/09.jpg" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>lakhnavi</b><br></span> --></li>
<li class="hide th10 ">
<div><i><em></em><img src="http://forums.hexus.net/images/photos/10.jpg" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>mulmul</b><br></span> --></li>
<li class="hide th11">
<div><i><em></em><img src="http://forums.hexus.net/images/photos/11.jpg" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>kantha</b><br></span> --></li>
<li class="hide th12">
<div><i><em></em><img src="http://forums.hexus.net/images/photos/12.jpg" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>kantha</b><br></span> --></li>
</ul>
<img src="http://forums.hexus.net/images/next.png" alt="next" class="right" title="" width="40" border="0" height="12">
</div></td>
</tr>
<tr>
<td height="50"> </td>
</tr>
<tr>
<td align="right" valign="top"><table border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="painting.htm"><img src="http://forums.hexus.net/images/paintings.png" alt="" width="212" height="46" border="0"></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>