PDA

View Full Version : problem with photo gallery code

mike_11
06-25-2005, 04:41 PM
Hi, I'm using some javascript to show simple photo galleries on my website www.mikesteel.co.uk

It generally works ok, but there are 2 small errors, which I can't solve - any ideas? (the code is below)

1. the script fails if the first thing a visitor does is click on the view previous arrow (the script is looking for image-1.jpg?)
2. the first time you visit the page and click next the click doesn't register, click again and it starts working.

I really like this code as its very simple to create galleries with many images, but would like to get rid of these glitches if at all possible. Many thanks to anyone who can help.. what can I offer in return - a photo?!


<script type="text/JavaScript">
function showPic(p)
{
var m=document.getElementById('mainPic');
var p=document.getElementById('pic'+p);
for (var i=1; i<=30; i++) document.getElementById('pic'+i).border="0";
p.border="0";
m.src=p.src;
m.name=p.id;
}
function showPrev()
{
var m=document.getElementById('mainPic');
var current=m.name.substr(3)*1;
var next=(current==1)?30:current-1;
m.src="image"+next+".jpg";
m.name="pic"+next;
for (var i=1; i<=30; i++) document.getElementById('pic'+i).border="0";
document.getElementById('pic'+next).border="0";
}
function showNext()
{
var m=document.getElementById('mainPic');
var current=m.name.substr(3)*1;
var next=(current==30)?1:current+1;
m.src="image"+next+".jpg";
m.name="pic"+next;
for (var i=1; i<=30; i++) document.getElementById('pic'+i).border="0";
document.getElementById('pic'+next).border="0";
}
</script>
vwphillips
06-25-2005, 06:02 PM
I'm afraid I was not keen on the script you posted
so came up with this using a very simple slide show that should save you coding in the long run

however like the posed script it uses the thumb nail image as the main image
but with a larger specified size

this makes loading the page in efficient
if you were able to have two sets of images with the same file names one image large and one small but in different directories the directory path could be changed for displaying the large image, I will do this in case you are interested



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var zxcImg;
var zxcImgAry=new Array();
var zxcCnt=-1;

function zxcInit(){
zxcImg=document.getElementById('ThumbNails').getElementsByTagName('IMG');
for (zxc0=0;zxc0<zxcImg.length;zxc0++){
zxcImgAry[zxc0]=zxcImg[zxc0];
zxcImg[zxc0].nu=zxc0-1;
zxcImg[zxc0].onclick=function(){ zxcCnt=this.nu; zxcSSFwd(); }
}
}

function zxcSSBack(){
zxcCnt--;
if (zxcCnt<0){ zxcCnt=zxcImg.length-1; }
zxcDoIt();
}

function zxcSSFwd(){
zxcCnt++;
if (zxcCnt==zxcImg.length){ zxcCnt=0; }
zxcDoIt();
}

function zxcDoIt(){
document.getElementById('zxcMainImg').src=zxcImg[zxcCnt].src;
}


//-->
</script></head>

<body onload="zxcInit()" >
<table>
<tr>
<td colspan="2" ><img id="zxcMainImg" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width=200 height=200 ></td>
</tr>
<tr>
<td width=100 align="center" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" width=20 height=20 onclick="zxcSSBack();" ></td>
<td width=100 align="center" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Right1.gif" width=20 height=20 onclick="zxcSSFwd();" ></td>
</tr>
</table>

<table id="ThumbNails" >
<tr>
<td width="50"><img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=50 height=50 ></td>
<td width="50"><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=50 height=50 ></td>
<td width="50"><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width=50 height=50 ></td>
<td width="50"><img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width=50 height=50 ></td>
</tr>
<tr>
<td width="50"><img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width=50 height=50 ></td>
<td></td>
<td width="50"><img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width=50 height=50 ></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>

</html>



This will also preload the large Image


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

var zxcThumbDirectory='StdImages';
var zxcMainDirectory='StdImages';

var zxcImg;
var zxcImgAry=new Array();
var zxcImage=new Array();
var zxcCnt=-1;

function zxcInit(){
zxcImg=document.getElementById('ThumbNails').getElementsByTagName('IMG');
for (zxc0=0;zxc0<zxcImg.length;zxc0++){
zxcImgAry[zxc0]=zxcImg[zxc0];
zxcImg[zxc0].nu=zxc0-1;
zxcImg[zxc0].onclick=function(){ zxcCnt=this.nu; zxcSSFwd(); }
}
}

function zxcSSBack(){
zxcCnt--;
if (zxcCnt<0){ zxcCnt=zxcImg.length-1; }
zxcLoad();
}

function zxcSSFwd(){
zxcCnt++;
if (zxcCnt==zxcImg.length){ zxcCnt=0; }
zxcLoad();
}

function zxcLoad(){
if (zxcImage[zxcCnt]){
zxcDoIt();
}
else {
document.getElementById('zxcMessage').innerHTML='Please Wait';
zxcImage[zxcCnt]=new Image();
zxcImage[zxcCnt].onload=function(){ document.getElementById('zxcMessage').innerHTML=''; zxcDoIt(); }
zxcImage[zxcCnt].src=zxcImg[zxcCnt].src.replace('zxcThumbDirectory','zxcMainDirectory');
}
}

function zxcDoIt(){
document.getElementById('zxcMainImg').src=zxcImage[zxcCnt].src;
}


//-->
</script></head>

<body onload="zxcInit()" >
<table>
<tr>
<td colspan="3" ><img id="zxcMainImg" src="http://www.vicsjavascripts.org.uk/StdImages/Blank.gif" width=200 height=200 ></td>
</tr>
<tr>
<td width=70 align="center" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Left1.gif" width=20 height=20 onclick="zxcSSBack();" ></td>
<td id="zxcMessage" width=60 align="center" style="font-Size:12px;" ></td>
<td width=70 align="center" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Right1.gif" width=20 height=20 onclick="zxcSSFwd();" ></td>
</tr>
</table>

<table id="ThumbNails" >
<tr>
<td width="50"><img src="http://www.vicsjavascripts.org.uk/StdImages/Zero.gif" width=50 height=50 ></td>
<td width="50"><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width=50 height=50 ></td>
<td width="50"><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width=50 height=50 ></td>
<td width="50"><img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width=50 height=50 ></td>
</tr>
<tr>
<td width="50"><img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width=50 height=50 ></td>
<td></td>
<td width="50"><img src="http://www.vicsjavascripts.org.uk/StdImages/Five.gif" width=50 height=50 ></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>

</html>
Willy Duitt
06-26-2005, 01:03 AM
http://www.webxpertz.net/forums/showthread.php?t=33243
http://www.webdeveloper.com/forum/showthread.php?t=70778
http://forums.devshed.com/t266907/s7fa757909380d9034a8dbf677b8c00bc.html
mike_11
06-26-2005, 01:40 PM
Yes as you can see I'm quite desperate; I've been hitting my head against a wall for a while on this one (and had no idea which forums were any good).

vwphillips - thanks for the idea; i am tempted to try, but on the other hand dont have lot of time; someone has emailed me the following which has seemed to solve both these bugs, though ive no idea how:

change this line

<img src="image1.jpg" id="mainPic" alt=" © Mike Steel " border="0" />

to this

<IMG id=mainPic name=pic1 alt=" © Mike Steel " src="image1.jpg" border="0" />

this seems to do the trick, well at least in the IE & opera i have.
vwphillips
06-26-2005, 02:34 PM
this seems to do the trick

Glad your sorted, good? you like writing so much HTML Code and dont mind the image load times ;)
mike_11
06-27-2005, 10:44 PM
Point taken. I do intend to create some thumbnails for the front page to cut on load time, but less worried about the individual folio pages as the one benefit of no thumbnails is that once they've all loaded you can scroll through fast. I'm no pro coder!