Results 1 to 9 of 9

Thread: How do I get my image gallery to work? [HTML]

  1. #1
    Registered+
    Join Date
    Sep 2007
    Location
    Lodnon
    Posts
    30
    Thanks
    0
    Thanked
    0 times in 0 posts
    • xiao's system
      • Motherboard:
      • ASUS P5K Premium
      • CPU:
      • Intel Core 2 Duo Q6600
      • Memory:
      • OCZ 4GB Reaper HPC / Dual Ch. DDR2 PC6400
      • Storage:
      • 2 x Barracuda 7200.9 SATA 500-GB Hard Drive
      • Graphics card(s):
      • Sapphire ATi Radeon HD3870 512MB
      • PSU:
      • Thermaltake Toughpower W0103 600-Watt ATX 12V 2.2
      • Case:
      • Antec Performance One P182 [Gun Metal Black]
      • Operating System:
      • Windows 7 Ultimate x64
      • Monitor(s):
      • Hannstar HW191D [19" LCD]
      • Internet:
      • O2 ADSL2+ 8 Mb/s

    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


    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">&nbsp;</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">&nbsp;</td>
                <td><a href="collection.htm"><img src="images/collection-inner.png" alt="" width="113" height="34" border="0"></a></td>
                <td width="15">&nbsp;</td>
                <td><a href="press.htm"><img src="images/press-inner.png" alt="" width="72" height="34" border="0"></a></td>
                <td width="15">&nbsp;</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">&nbsp;</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">&nbsp;</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>

  2. #2
    Senior Member
    Join Date
    Jul 2004
    Location
    London
    Posts
    2,456
    Thanks
    100
    Thanked
    75 times in 51 posts
    • Mblaster's system
      • Motherboard:
      • ASUS PK5 Premium
      • CPU:
      • Intel i5 2500K
      • Memory:
      • 8gb DDR3
      • Storage:
      • Intel X25 SSD + WD 2TB HDD
      • Graphics card(s):
      • Nvidia GeForce GTX 570
      • PSU:
      • Corsair HX520
      • Case:
      • Antec P180
      • Operating System:
      • Windows 7 Professional x64
      • Monitor(s):
      • HP w2207 (22" wide)
      • Internet:
      • Rubbish ADSL

    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.
    I don't mean to sound cold, or cruel, or vicious, but I am so that's the way it comes out.

  3. #3
    Registered+
    Join Date
    Sep 2007
    Location
    Lodnon
    Posts
    30
    Thanks
    0
    Thanked
    0 times in 0 posts
    • xiao's system
      • Motherboard:
      • ASUS P5K Premium
      • CPU:
      • Intel Core 2 Duo Q6600
      • Memory:
      • OCZ 4GB Reaper HPC / Dual Ch. DDR2 PC6400
      • Storage:
      • 2 x Barracuda 7200.9 SATA 500-GB Hard Drive
      • Graphics card(s):
      • Sapphire ATi Radeon HD3870 512MB
      • PSU:
      • Thermaltake Toughpower W0103 600-Watt ATX 12V 2.2
      • Case:
      • Antec Performance One P182 [Gun Metal Black]
      • Operating System:
      • Windows 7 Ultimate x64
      • Monitor(s):
      • Hannstar HW191D [19" LCD]
      • Internet:
      • O2 ADSL2+ 8 Mb/s

    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

  4. #4
    Senior Member
    Join Date
    Jul 2004
    Location
    London
    Posts
    2,456
    Thanks
    100
    Thanked
    75 times in 51 posts
    • Mblaster's system
      • Motherboard:
      • ASUS PK5 Premium
      • CPU:
      • Intel i5 2500K
      • Memory:
      • 8gb DDR3
      • Storage:
      • Intel X25 SSD + WD 2TB HDD
      • Graphics card(s):
      • Nvidia GeForce GTX 570
      • PSU:
      • Corsair HX520
      • Case:
      • Antec P180
      • Operating System:
      • Windows 7 Professional x64
      • Monitor(s):
      • HP w2207 (22" wide)
      • Internet:
      • Rubbish ADSL

    Re: How do I get my image gallery to work? [HTML]

    Quote Originally Posted by xiao View Post
    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.
    I don't mean to sound cold, or cruel, or vicious, but I am so that's the way it comes out.

  5. #5
    Registered+
    Join Date
    Sep 2007
    Location
    Lodnon
    Posts
    30
    Thanks
    0
    Thanked
    0 times in 0 posts
    • xiao's system
      • Motherboard:
      • ASUS P5K Premium
      • CPU:
      • Intel Core 2 Duo Q6600
      • Memory:
      • OCZ 4GB Reaper HPC / Dual Ch. DDR2 PC6400
      • Storage:
      • 2 x Barracuda 7200.9 SATA 500-GB Hard Drive
      • Graphics card(s):
      • Sapphire ATi Radeon HD3870 512MB
      • PSU:
      • Thermaltake Toughpower W0103 600-Watt ATX 12V 2.2
      • Case:
      • Antec Performance One P182 [Gun Metal Black]
      • Operating System:
      • Windows 7 Ultimate x64
      • Monitor(s):
      • Hannstar HW191D [19" LCD]
      • Internet:
      • O2 ADSL2+ 8 Mb/s

    Re: How do I get my image gallery to work? [HTML]

    Quote Originally Posted by Mblaster View Post
    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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>

  6. #6
    Senior Member
    Join Date
    Jul 2004
    Location
    London
    Posts
    2,456
    Thanks
    100
    Thanked
    75 times in 51 posts
    • Mblaster's system
      • Motherboard:
      • ASUS PK5 Premium
      • CPU:
      • Intel i5 2500K
      • Memory:
      • 8gb DDR3
      • Storage:
      • Intel X25 SSD + WD 2TB HDD
      • Graphics card(s):
      • Nvidia GeForce GTX 570
      • PSU:
      • Corsair HX520
      • Case:
      • Antec P180
      • Operating System:
      • Windows 7 Professional x64
      • Monitor(s):
      • HP w2207 (22" wide)
      • Internet:
      • Rubbish ADSL

    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";		
    			}
    		}
    	}
    I don't mean to sound cold, or cruel, or vicious, but I am so that's the way it comes out.

  7. #7
    Registered+
    Join Date
    Sep 2007
    Location
    Lodnon
    Posts
    30
    Thanks
    0
    Thanked
    0 times in 0 posts
    • xiao's system
      • Motherboard:
      • ASUS P5K Premium
      • CPU:
      • Intel Core 2 Duo Q6600
      • Memory:
      • OCZ 4GB Reaper HPC / Dual Ch. DDR2 PC6400
      • Storage:
      • 2 x Barracuda 7200.9 SATA 500-GB Hard Drive
      • Graphics card(s):
      • Sapphire ATi Radeon HD3870 512MB
      • PSU:
      • Thermaltake Toughpower W0103 600-Watt ATX 12V 2.2
      • Case:
      • Antec Performance One P182 [Gun Metal Black]
      • Operating System:
      • Windows 7 Ultimate x64
      • Monitor(s):
      • Hannstar HW191D [19" LCD]
      • Internet:
      • O2 ADSL2+ 8 Mb/s

    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";		
    			}
    		}
    	}

  8. #8
    Senior Member
    Join Date
    Jul 2004
    Location
    London
    Posts
    2,456
    Thanks
    100
    Thanked
    75 times in 51 posts
    • Mblaster's system
      • Motherboard:
      • ASUS PK5 Premium
      • CPU:
      • Intel i5 2500K
      • Memory:
      • 8gb DDR3
      • Storage:
      • Intel X25 SSD + WD 2TB HDD
      • Graphics card(s):
      • Nvidia GeForce GTX 570
      • PSU:
      • Corsair HX520
      • Case:
      • Antec P180
      • Operating System:
      • Windows 7 Professional x64
      • Monitor(s):
      • HP w2207 (22" wide)
      • Internet:
      • Rubbish ADSL

    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.
    I don't mean to sound cold, or cruel, or vicious, but I am so that's the way it comes out.

  9. #9
    Registered+
    Join Date
    Sep 2007
    Location
    Lodnon
    Posts
    30
    Thanks
    0
    Thanked
    0 times in 0 posts
    • xiao's system
      • Motherboard:
      • ASUS P5K Premium
      • CPU:
      • Intel Core 2 Duo Q6600
      • Memory:
      • OCZ 4GB Reaper HPC / Dual Ch. DDR2 PC6400
      • Storage:
      • 2 x Barracuda 7200.9 SATA 500-GB Hard Drive
      • Graphics card(s):
      • Sapphire ATi Radeon HD3870 512MB
      • PSU:
      • Thermaltake Toughpower W0103 600-Watt ATX 12V 2.2
      • Case:
      • Antec Performance One P182 [Gun Metal Black]
      • Operating System:
      • Windows 7 Ultimate x64
      • Monitor(s):
      • Hannstar HW191D [19" LCD]
      • Internet:
      • O2 ADSL2+ 8 Mb/s

    Re: How do I get my image gallery to work? [HTML]

    Yes!!

    Thank you

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Will a Mirror Raid work under DOS?
    By Alan Wood in forum PC Hardware and Components
    Replies: 17
    Last Post: 04-08-2008, 02:19 PM
  2. Help with ghost image Bootable???
    By malice19 in forum Software
    Replies: 7
    Last Post: 25-06-2008, 09:08 AM
  3. WoW on a corporate LAN - Will it work?
    By EvilMunky in forum PC
    Replies: 8
    Last Post: 09-06-2005, 12:17 PM
  4. Replies: 0
    Last Post: 07-02-2005, 01:58 PM
  5. Help make an image gallery
    By Darkmatter in forum Software
    Replies: 4
    Last Post: 17-05-2004, 02:42 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •