[RESOLVED] Photo gallery script (problem)

[Pete33]

Hi Guys

As with all the best JavaScript, I found a nice feature on a web site and adapted their script for my use. It shows a gallery of photos, one at a time, as you click through the numbered boxes. All the photos are loaded when the page is loaded, but all of them except the first one are hidden.

Now this all works. The problem is for users who have JavaScript deactivated in their browser. If this is the case, all the photos are supposed to be visible, but I can't get that to work on mine (at the moment I have a noscript message to handle this). I'd like to get it working properly but my JavaScript capabilities aren't good enough, so can anyone spot the error in the script?

The script can be seen in action here:
http://www.historyfiles.co.uk/FeaturesBritain/PrehistoryOrkney_SkaraB02.htm

The full script is reproduced in the next post.

[Pete33]

JavaScript Part 1:

<!-- Start of Gallery table -->
<table border="0" cellpadding="0" cellspacing="0" align="left" height="100%">
<tr>
<td width="416px" valign="top">

<div style="display: none;" id="picGallery_loading">
<div class="galMain">
<script type="text/javascript">
<!--
document.write('<p class="jsoff">YOUR PICTURE GALLERY IS NOW LOADING...</p>')
//-->
</script><p class="jsoff">YOUR PICTURE GALLERY IS NOW LOADING...</p>
</div>

<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGallery_loading').style.display = 'block';}
//-->
</script>
</div>

<noscript>
<p class="jsoff">Sorry, you will need to enable your browser's JavaScript feature to view this content. See the <a target="_top" href="../historyHelp.htm">help</a> page.</p></noscript>

<!-- this is like this because of html rendering oddity in firefox -->
<div style="display: block; visibility: visible;" id="picGalleryNoScript_0">
<p class="featuretable">
<img src="image01.jpg"
alt="Text"
id="picture_0" width="416" height="300"></p>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_0').style.display = 'none';}
//-->
</script>
<p class="galtext">Text.</p>
</div>


<div style="display: none; visibility: hidden;" id="picGalleryNoScript_1">
<div>
<p class="featuretable">
<img src="image02.jpg"
alt="Text"
id="picture_1" width="416" height="300"></p>
</div>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_1').style.display = 'none';}
//-->
//-->
</script>
<p class="galtext">Text.</p>
</div>


<div style="display: none; visibility: hidden;" id="picGalleryNoScript_2">
<div>
<p class="featuretable">
<img src="image03.jpg"
alt="Text"
id="picture_2" width="416" height="300"></p>
</div>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_2').style.display = 'none';}
//-->
</script>
<p class="galtext">Text.</p>
</div>

<div style="display: none; visibility: hidden;" id="picGalleryNoScript_3">
<div>
<p class="featuretable">
<img src="image04.jpg"
alt="Text"
id="picture_3" width="416" height="300"></p>
</div>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_3').style.display = 'none';}
//-->
</script>
<p class="galtext">Text.</p>
</div>


<div style="display: none; visibility: hidden;" id="picGalleryNoScript_4">
<div>
<p class="featuretable">
<img src="image05.jpg"
alt="Text"
id="picture_4" width="416" height="300"></p>
</div>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_4').style.display = 'none';}
//-->
</script>
<p class="galtext">Text.</p>
</div>


<div style="display: none; visibility: hidden;" id="picGalleryNoScript_5">
<div>
<p class="featuretable">
<img src="image06.jpg"
alt="Text"
id="picture_5" width="416" height="300"></p>
</div>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_5').style.display = 'none';}
//-->
</script>
<p class="galtext">Text.</p>
</div>


<div style="display: none; visibility: hidden;" id="picGalleryNoScript_6">
<div>
<p class="featuretable">
<img src="image07.jpg"
alt="Text"
id="picture_6" width="416" height="300"></p>
</div>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_6').style.display = 'none';}
//-->
</script>
<p class="galtext">Text.</p>
</div>


<div style="display: none; visibility: hidden;" id="picGalleryNoScript_7">
<div>
<p class="featuretable">
<img src="image08.jpg"
alt="Text"
id="picture_7" width="416" height="300"></p>
</div>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_7').style.display = 'none';}
//-->
</script>
<p class="galtext">Text.</p>
</div>


<div style="display: none; visibility: hidden;" id="picGalleryNoScript_8">
<div>
<p class="featuretable">
<img src="image09.jpg"
alt="Text"
id="picture_8" width="416" height="300"></p>
</div>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_8').style.display = 'none';}
//-->
</script>
<p class="galtext">Text.</p>
</div>


<div style="display: none; visibility: hidden;" id="picGalleryNoScript_9">
<div>
<p class="featuretable">
<img src="image10.jpg"
alt="Text"
id="picture_9" width="416" height="300"></p>
</div>
<script type="text/javascript">
<!--
if (document.getElementById) {document.getElementById('picGalleryNoScript_9').style.display = 'none';}
//-->
</script>
<p class="galtext">Text.</p>
</div>


</td>
<td width="31px"><img src="../images/nav-spacer.gif" width="2" height="1">
</td>
<td width="90px" class="popupnavPos" valign="top">

[Pete33]

JavaScript Part 2:

<div class="popupnav">
<div style="display: block;" class="popupnavBox" id="navBox">
<table border="0" cellpadding="0" cellspacing="0" width="90">
<tbody>
<tr>
<td style="text-align: center" valign="middle" height="304">
<p class="popupnav" valign="top">
<a id="back" span style="font-size: 7.5pt; font-weight: bold;" onclick="showDivPrev();return false;" href="#" target="_top">Back</a>
<p class="popupnavBox" valign="top">
<a class="popupStyle" title="Slide 1" id="pictureLink_0" onclick="showDiv(0);return false;" onmouseover="ColorOver(this);" href="#" onmouseout="ColorOut(this);" target="_top">1</a><p>
<p class="popupnavBox">
<a class="popupStyle" title="Slide 2" id="pictureLink_1" onclick="showDiv(1);return false;" onmouseover="ColorOver(this);" href="#" onmouseout="ColorOut(this);" target="_top">2</a></p>
<p class="popupnavBox">
<a class="popupStyle" title="Slide 3" id="pictureLink_2" onclick="showDiv(2);return false;" onmouseover="ColorOver(this);" href="#" onmouseout="ColorOut(this);" target="_top">3</a></p>
<p class="popupnavBox">
<a class="popupStyle" title="Slide 4" id="pictureLink_3" onclick="showDiv(3);return false;" onmouseover="ColorOver(this);" href="#" onmouseout="ColorOut(this);" target="_top">4</a></p>
<p class="popupnavBox">
<a class="popupStyle" title="Slide 5" id="pictureLink_4" onclick="showDiv(4);return false;" onmouseover="ColorOver(this);" href="#" onmouseout="ColorOut(this);" target="_top">5</a></p>
<p class="popupnavBox">
<a class="popupStyle" title="Slide 6" id="pictureLink_5" onclick="showDiv(5);return false;" onmouseover="ColorOver(this);" href="#" onmouseout="ColorOut(this);" target="_top">6</a></p>
<p class="popupnavBox">
<a class="popupStyle" title="Slide 7" id="pictureLink_6" onclick="showDiv(6);return false;" onmouseover="ColorOver(this);" href="#" onmouseout="ColorOut(this);" target="_top">7</a></p>
<p class="popupnavBox">
<a class="popupStyle" title="Slide 8" id="pictureLink_7" onclick="showDiv(7);return false;" onmouseover="ColorOver(this);" href="#" onmouseout="ColorOut(this);" target="_top">8</a></p>
<p class="popupnavBox">
<a class="popupStyle" title="Slide 9" id="pictureLink_8" onclick="showDiv(8);return false;" onmouseover="ColorOver(this);" href="#" onmouseout="ColorOut(this);" target="_top">9</a></p>
<p class="popupnavBox">
<a class="popupStyle" title="Slide 10" id="pictureLink_9" onclick="showDiv(9);return false;" onmouseover="ColorOver(this);" href="#" onmouseout="ColorOut(this);" target="_top">10</a></p>
<p class="popupnav" valign="top">
<a id="next" span style="font-size: 7.5pt; font-weight: bold;" onclick="showDivNext(this);return false;" href="#" target="_top">Next</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>



<script type="text/javascript">
<!--
var hasLoaded = false;

// picture Gallery background colours
var currentPicColor = '#AF7E6D';
var unselectedColor = '#AB3108';
var deadLinkColor = '#ccc';

//constants
var NUMBER_OF_PICTURES = 10;
var PICTURES_ID_PREFIX = "picGalleryNoScript_";
var PICTURES_LINK_ID_PREFIX = "pictureLink_";

var currentPic = 0;

//divs
var LOADING_DIV = "picGallery_loading";
var NEXT_DIV = "next";
var BACK_DIV = "back";
var NAVBOX_DIV = "navBox";
var THUMBNAILS_DIV = "thumbnails";

function init() {
hasLoaded = true;
showDiv(0);

if (NUMBER_OF_PICTURES > 1) {
document.getElementById(LOADING_DIV).style.display='none';
document.getElementById(NAVBOX_DIV).style.display='block';
document.getElementById(PICTURES_LINK_ID_PREFIX + currentPic).style.background= currentPicColor;
}

if (document.getElementById(THUMBNAILS_DIV)) {
document.getElementById(THUMBNAILS_DIV).style.display='block';
}
}

function doBgColor() {
for(var i = 0; i < NUMBER_OF_PICTURES; i++) {
document.getElementById(PICTURES_LINK_ID_PREFIX + i).style.background= unselectedColor;
}
document.getElementById(PICTURES_LINK_ID_PREFIX + currentPic).style.background= currentPicColor;
}

function doNextColor() {
document.getElementById(BACK_DIV).style.color= unselectedColor;
if(currentPic < (NUMBER_OF_PICTURES - 1)) {
document.getElementById(NEXT_DIV).style.color= unselectedColor;
} else {
document.getElementById(NEXT_DIV).style.color= deadLinkColor;
}
}

function doBackColor(){
document.getElementById(NEXT_DIV).style.color= unselectedColor;

if(currentPic > 0) {
document.getElementById(BACK_DIV).style.color= unselectedColor;
} else {
document.getElementById(BACK_DIV).style.color= deadLinkColor;
}
}

function showDiv(nDiv) {
for(var i = 0; i < NUMBER_OF_PICTURES; i++) {

if (NUMBER_OF_PICTURES > 1) {
document.getElementById(PICTURES_LINK_ID_PREFIX + i).style.background= unselectedColor;
document.getElementById(NEXT_DIV).style.color= unselectedColor;
document.getElementById(BACK_DIV).style.color= unselectedColor;
}

var buttonid = i;
var id = PICTURES_ID_PREFIX + i;
var node = document.getElementById(id);
if(node && i==nDiv) {
node.style.display='block';
node.style.visibility='visible';
currentPic = i;

if (NUMBER_OF_PICTURES > 1) {
document.getElementById(PICTURES_LINK_ID_PREFIX + currentPic).style.background= currentPicColor;
}
} else if(node) {
node.style.display='none';
node.style.visibility='hidden';
}
}
}

function showDivNext() {
if(currentPic < (NUMBER_OF_PICTURES - 1)) {
showDiv(currentPic + 1);
doBgColor();
doNextColor();
}
}

function showDivPrev() {
if(currentPic > 0) {
showDiv(currentPic - 1);
doBgColor();
doBackColor();
}
}

function ColorOver(o) {
o.style.backgroundColor= currentPicColor;
}

function ColorOut(o) {
o.style.backgroundColor= unselectedColor;
document.getElementById(PICTURES_LINK_ID_PREFIX + currentPic).style.background= currentPicColor;
}

if (document.getElementById) {
document.onLoad = init();
}
//-->
</script>
</td>
</tr>
</table><!-- End of Gallery table -->

[coothead]

Hi there Pete33,

I have amended the code so that the images will display when javascript is disabled.
I would like to point out that the your code is in a very messy state and needs your fullest attention...
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.historyfiles.co.uk%2FFeaturesBritain%2FPrehistoryOrkney_SkaraB02.htm
I do not have the time or the inclination to correct it, as I am on my way out to torture myself on the golf course. :supereek:
You will find the file in the attachment.

[Pete33]

Hi Coothead

I checked your script very carefully to see what had changed before applying it to the other gallery pages. It's remarkable how simple it was to fix... but I wouldn't have got it in a million years. Thanks for your help. :)

As for the validating, well, it's a ten year-old site with well over a thousand pages, so there's only a limited amount I can do to update it to today's standards. I've already spent two years working through the site to upgrade old html, and it seems there's plenty more to do. Anyway, I spent much of the evening upgrading some elements, especially in newer pages. The rest may have to wait. I think I'm happier that it displays properly in major browsers than that ticks every box in the validation process.

[coothead]

No problem, you're welcome. :agree: