How do I get my image gallery to work? [HTML]
How do I get my image gallery to work? [HTML]
Example
I am trying to do exactly what they have done here, with the image thumbs on the same table, and the next button will scroll through them.
My Result
:confused::confused::confused:
Whats going on?
Below is the HTLM Coding as i can not attach files
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="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="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="images/design-inner.png" alt="" width="148" height="34" border="0"></a></td>
<td width="15"> </td>
<td><a href="collection.htm"><img src="images/collection-inner.png" alt="" width="113" height="34" border="0"></a></td>
<td width="15"> </td>
<td><a href="press.htm"><img src="images/press-inner.png" alt="" width="72" height="34" border="0"></a></td>
<td width="15"> </td>
<td><a href="contact.htm"><img src="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="images/photo-t.png" alt="" width="173" height="40"></td>
</tr>
<tr>
<td align="left" valign="top"><div id="gallery">
<img src="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="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="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="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="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="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="images/photos/06.JPG" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>patchwork</b><br></span> --></li>
<li class=" th7 ">
<div><i><em></em><img src="images/photos/07.JPG" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>mushru</b><br></span> --></li>
<li class="th8 ">
<div><i><em></em><img src="images/photos/08.JPG" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>kutchi hastkala</b><br></span> --></li>
<li class="th9 ">
<div><i><em></em><img src="images/photos/09.JPG" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>lakhnavi</b><br></span> --></li>
<li class="th10 ">
<div><i><em></em><img src="images/photos/10.JPG" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>mulmul</b><br></span> --></li>
<li class="th11">
<div><i><em></em><img src="images/photos/11.JPG" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>kantha</b><br></span> --></li>
<li class="th12">
<div><i><em></em><img src="images/photos/12.JPG" alt="" width="490" height="300" title=""></i></div>
<!--<span><b>patchwork</b><br></span> --></li>
</ul>
<img src="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="images/paintings.png" alt="" width="212" height="46" border="0"></a></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
Re: How do I get my image gallery to work? [HTML]
You need to change all but the first 7 <li> tags to have a class like the example below, with 'hide' before the number.
<li class="hide th8">
This will stop the extra boxes from showing and should bring the next/previous buttons onto the same line as the thumbnails.
Also, if you've just lifted the Javascript file from the website you're trying to imitate, you might want to check you have permission to use it. Sorry if you've already done this.
Re: How do I get my image gallery to work? [HTML]
Nice that was very helpful
But theres still one problem, it does not identify the thumb nails on the last few pictures.
do you know where the coding for that is
Re: How do I get my image gallery to work? [HTML]
Quote:
Originally Posted by
xiao
Nice that was very helpful
But theres still one problem, it does not identify the thumb nails on the last few pictures.
do you know where the coding for that is
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.
Re: How do I get my image gallery to work? [HTML]
Quote:
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
Quote:
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
Quote:
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>
Re: How do I get my image gallery to work? [HTML]
Yep it was the scroll_gallery.js file that I was talking about.
What I meant was literally, where ever there is a "7" in the file, replace it with a "6" etc.
I haven't got a decent browser setup here at work to test it (don't do any web development), but I've changed it and pasted it into the code section below:
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-6){
getLi[x].className=getLi[x].className.replace("hide", "");
if ((getLi[x+6].className.indexOf('hide'))==-1)
{
getLi[x+6].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>5 && x<getLi.length) {
getLi[x].className=getLi[x].className.replace("hide", "");
if ((getLi[x-6].className.indexOf('hide'))==-1)
{
getLi[x-6].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";
}
}
}
Re: How do I get my image gallery to work? [HTML]
Yup i did that.
Now it looks like this and it is uploaded
but the problem still remains
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-6){
getLi[x].className=getLi[x].className.replace("hide", "");
if ((getLi[x+6].className.indexOf('hide'))==-1)
{
getLi[x+6].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-6].className.indexOf('hide'))==-1)
{
getLi[x-6].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";
}
}
}
Re: How do I get my image gallery to work? [HTML]
There's one bit you didn't change, the 6 (in the original file) to a 5, on line 45:
if (x>5 && x<getLi.length) {
But if that still doesn't work you could try increasing the width of the table, although that may affect other things, it's probably worth a try.
Re: How do I get my image gallery to work? [HTML]
