Wrong paths (and some unclosed elements) were causing the problems.
Try this code for your page:
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>Leighton Masonic Hall</title>
<!--
1 ) Reference to the files containing the JavaScript and CSS.
These files must be located on your server.
-->
<script type="text/javascript" src="highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = null;
hs.fadeInOut = true;
hs.align = 'center';
hs.captionEval = 'this.a.title';
hs.numberPosition = 'caption';
hs.targetX = 'gallery-area 10px';
hs.targetY = 'gallery-area';
hs.useBox = true;
hs.width = 600;
hs.height = 450;
hs.allowMultipleInstances = false;
hs.expandDuration = 0;
hs.restoreCursor = null;
hs.captionOverlay.fade = false;
// Add the slideshow controller
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: false,
overlayOptions: {
className: 'controls-in-heading',
opacity: 1,
position: 'bottom right',
offsetX: 0,
offsetY: 50,
hideOnMouseOut: false
}
});
// gallery config object
var config1 = {
slideshowGroup: 'group1',
transitions: ['expand', 'crossfade'],
thumbnailId: 'thumb-target'
};
// gallery config object
var config2 = {
slideshowGroup: 'group2',
transitions: ['expand', 'crossfade'],
thumbnailId: 'thumb-target'
};
// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
document.getElementById('first1').onclick();
});
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
if(this.a.id == 'last1') return false;
if(this.a.id == 'last2') return false;
else return hs.next();
};
// Set different restoreTitle for the in-page gallery and the mini-galleries
hs.Expander.prototype.onInit = function () {
if(this.a.id == 'last')
hs.lang.restoreTitle = '';
else
hs.lang.restoreTitle = 'Click for next image';
};
hs.Expander.prototype.onBeforeClose = function() {
if (this.a.id == 'last1') return false;
if (this.a.id == 'last2') return false;
if (this.a.id == 'first1') return false;
if (this.a.id == 'first2') return false;
};
// Keep the position after window resize
hs.addEventListener(window, 'resize', function() {
var i, exp;
hs.getPageSize();
for (i = 0; i < hs.expanders.length; i++) {
exp = hs.expanders[i];
if (exp) {
var x = exp.x,
y = exp.y;
// get new thumb positions
exp.tpos = hs.getPosition(exp.el);
x.calcThumb();
y.calcThumb();
// calculate new popup position
x.pos = x.tpos - x.cb + x.tb;
x.scroll = hs.page.scrollLeft;
x.clientSize = hs.page.width;
y.pos = y.tpos - y.cb + y.tb;
y.scroll = hs.page.scrollTop;
y.clientSize = hs.page.height;
exp.justify(x, true);
exp.justify(y, true);
// set new left and top to wrapper and outline
exp.moveTo(x.pos, y.pos);
}
}
});
</script>
<!--
jQuery library
-->
<script type="text/javascript" src="jsor-jcarousel-f1351b7/lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="jsor-jcarousel-f1351b7/lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="jsor-jcarousel-f1351b7/skins/tango/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel-1').jcarousel();
jQuery('#mycarousel-2').jcarousel();
});
</script>
<style type="text/css">
.highslide img {
border: none;
}
.highslide-active-anchor img {
visibility: visible;
}
.highslide-controls {
width: 65px !important;
}
.highslide-controls .highslide-close {
display: none;
}
.highslide-controls .highslide-play {
display: none;
}
/* jCarousel skin overrides */
.jcarousel-skin-tango .jcarousel-container {
border: none;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 540px;
padding: 10px 40px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 540px;
}
.jcarousel-skin-tango .jcarousel-next-horizontal {
top: 33px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
top: 33px;
}
.jcarousel-skin-tango .jcarousel-item {
width: auto;
}
body,td,th {
color: #FFF;
}
body {
background-color: #000;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<div align="center">
<table width="620" border="0" cellspacing="3" cellpadding="3">
<tr>
<td><div align="left"><img src="ugle-8.jpg" alt="UGLE link" width="186" height="220" onclick="MM_goToURL('parent','http://www.ugle.org.uk/');return document.MM_returnValue" onmouseover="MM_popupMsg('This is a personal site and has no connection whatsoever with the United Grand Lodge of England or the Provincial Grand Lodge of Bedfordshire. It is just a set of photographs for those interested in Freemasonry \rHowever this link will take you to the UGLE ')" /></div></td>
<td><div align="center"></div>
<img src="title.jpg" width="400" height="120" alt="Title" /></td>
<td><div align="center"><img src="gchapterrefilled.gif" alt="Grand Chapter" width="275" height="216" onclick="MM_goToURL('parent','http://www.grandchapter.org.uk/');return document.MM_returnValue" onmouseover="MM_popupMsg('This is a personal site and has no connection whatsoever with the Supreme Grand Chapter Royal Arch of England or the Provincial Grand Chapter of Bedfordshire. It is just a set of photographs for those interested in Freemasonry However this link will take you to the SGC ')" /></div>
<div align="right"></div></td>
</tr>
</table>
</div>
<div style="width: 620px; margin: 0 auto; border: 1px solid silver;">
<ul id="mycarousel-1" class="jcarousel-skin-tango">
<li>
<a id="first1" href="pictures/Leighton Masonic Hall 26-3-09 adam fireplace 01_web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Adam Fireplace behind Master's Chair">
<img src="pictures/Leighton Masonic Hall 26-3-09 adam fireplace 01_web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 adam fireplace 02 _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Adam Fireplace behind Master's Chair" >
<img src="pictures/Leighton Masonic Hall 26-3-09 adam fireplace 02 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 lights 01 _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Chandellier in Lodge Room">
<img src="pictures/Leighton Masonic Hall 26-3-09 lights 01 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 lights 03 _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Chandellier in Lodge Room">
<img src="pictures/Leighton Masonic Hall 26-3-09 lights 03 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 masters chair _web.JPG" class="highslide"
onclick="return hs.expand(this, config1 )" title="Master's Chair" >
<img src="pictures/Leighton Masonic Hall 26-3-09 masters chair _web_tn.JPG" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 masters chair h pan 01 _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Master's Chair">
<img src="pictures/Leighton Masonic Hall 26-3-09 masters chair h pan 01 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 meeting room wrap round pan 01_web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Main Lodge Room wrap round pan" >
<img src="pictures/Leighton Masonic Hall 26-3-09 meeting room wrap round pan 01_web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 sw chair _web.JPG" class="highslide"
onclick="return hs.expand(this, config1 )" title="Senior Warden's Chair" >
<img src="pictures/Leighton Masonic Hall 26-3-09 sw chair _web_tn.JPG" alt="" height="75" /></a></li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 sw chair h pan 01 _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Caption text">
<img src="pictures/Leighton Masonic Hall 26-3-09 sw chair h pan 01 _web_tn.jpg" alt="" height="75" />
</a></li>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 dining room h pan _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Dining Room">
<img src="pictures/Leighton Masonic Hall 26-3-09 dining room h pan _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 entrace area _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Entrance area" >
<img src="pictures/Leighton Masonic Hall 26-3-09 entrace area _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 kitchen h pan _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Kitchen">
<img src="pictures/Leighton Masonic Hall 26-3-09 kitchen h pan _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 L o I room 02 _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Lodge of Instruction Room" >
<img src="pictures/Leighton Masonic Hall 26-3-09 L o I room 02 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 robing passage 01 _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Robing Area">
<img src="pictures/Leighton Masonic Hall 26-3-09 robing passage 01 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a id="last1" href="pictures/Leighton Masonic Hall 26-3-09 robing passage 02 _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Robing Area">
<img src="pictures/Leighton Masonic Hall 26-3-09 robing passage 02 _web_tn.jpg" alt="" height="75" />
</a>
</li>
</ul>
<div id="gallery-area" style="width: 620px; height: 490px; margin: 0 auto; border: 1px solid white;">
<!-- Element used as thumbnailId for the image popups to expand from and close to -->
<div id="thumb-target" style="width: 10px; margin: 200px auto 0 auto; height: 1px;"></div>
</div>
<ul id="mycarousel-2" class="jcarousel-skin-tango">
<li>
<a id="first2" href="windows/Leighton Masonic Hall 26-3-09 bird window 01 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Bird Window">
<img src="windows/Leighton Masonic Hall 26-3-09 bird window 01 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 bird window 02 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Bird Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 bird window 02 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 bird window 03 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Bird Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 bird window 03 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 bird window 04 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Bird Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 bird window 04 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 bird window 05 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Bird Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 bird window 05 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 bird window 06_web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Bird Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 bird window 06_web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 Games window 01 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Games Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 Games window 01 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 Games window 02 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Games Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 Games window 01 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 Games window 02 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Games Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 Games window 01 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 Games window 03 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Games Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 Games window 03 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 Games window 04 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Games Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 Games window 04 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a id="last2" href="windows/Leighton Masonic Hall 26-3-09 Games window 05 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Games Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 Games window 04 _web_tn.jpg" alt="" height="75" />
</a>
</li>
</ul>
</div>
<div align="center">
<div align="center">
<table width="620" border="0" cellspacing="3" cellpadding="3">
<tr>
<td><div align="left"><img src="gchapterrefilled.gif" alt="Grand Chapter" width="275" height="216" onclick="MM_goToURL('parent','http://www.grandchapter.org.uk/');return document.MM_returnValue" onmouseover="MM_popupMsg('This is a personal site and has no connection whatsoever with the Supreme Grand Chapter Royal Arch of England or the Provincial Grand Chapter of Bedfordshire. It is just a set of photographs for those interested in Freemasonry However this link will take you to the SGC ')" /></div></td>
<td><div align="center"></div>
<img src="title.jpg" width="400" height="120" alt="Title" /></td>
<td><div align="center"></div>
<div align="right"><img src="ugle-8.jpg" alt="UGLE link" width="186" height="220" onclick="MM_goToURL('parent','http://www.ugle.org.uk/');return document.MM_returnValue" onmouseover="MM_popupMsg('This is a personal site and has no connection whatsoever with the United Grand Lodge of England or the Provincial Grand Lodge of Bedfordshire. It is just a set of photographs for those interested in Freemasonry \rHowever this link will take you to the UGLE ')" /></div></td>
</tr>
</table>
<div align="center">
</div>
<div align="center">
<table width="620" border="0" cellspacing="3" cellpadding="3">
<tr>
<td width="199"><h3 align="center"><a href="http://www.happysnapper.com/book">Return to happysnapper</a></h3> </td>
<td width="125"><div align="center"></div></td>
<td width="266"><div align="center"><a href="mailto:[email protected]">Contact Webmaster</a> </div></td>
</tr>
</table>
</div>
</div>
</div>
<p style="text-align: left;">Site written with the kind assistance of <a href="http://www.highslide.com/">Highslide JS</a> & <a href="http://sorgalla.com/projects/jcarousel/">jCarousel</a></p>
</body>
</html>
If you want the gallery to blend in to your page ÔÇô like in the screenshot ÔÇô you can use the code below.
- 2010-05-23_1753.png (392.75 KiB) Viewed 7668 times
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<title>Leighton Masonic Hall</title>
<!--
1 ) Reference to the files containing the JavaScript and CSS.
These files must be located on your server.
-->
<script type="text/javascript" src="highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
<!--
2) Optionally override the settings defined at the top
of the highslide.js file. The parameter hs.graphicsDir is important!
-->
<script type="text/javascript">
hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = null;
hs.fadeInOut = true;
hs.align = 'center';
hs.captionEval = 'this.a.title';
hs.numberPosition = 'caption';
hs.targetX = 'gallery-area 10px';
hs.targetY = 'gallery-area';
hs.useBox = true;
hs.width = 870;
hs.height = 450;
hs.allowMultipleInstances = false;
hs.expandDuration = 0;
hs.restoreCursor = null;
hs.captionOverlay.fade = false;
// Add the slideshow controller
hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: false,
overlayOptions: {
className: 'controls-in-heading',
opacity: 1,
position: 'bottom right',
offsetX: 0,
offsetY: 50,
hideOnMouseOut: false
}
});
// gallery config object
var config1 = {
slideshowGroup: 'group1',
transitions: ['expand', 'crossfade'],
thumbnailId: 'thumb-target'
};
// gallery config object
var config2 = {
slideshowGroup: 'group2',
transitions: ['expand', 'crossfade'],
thumbnailId: 'thumb-target'
};
// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
document.getElementById('first1').onclick();
});
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
if(this.a.id == 'last1') return false;
if(this.a.id == 'last2') return false;
else return hs.next();
};
// Set different restoreTitle for the in-page gallery and the mini-galleries
hs.Expander.prototype.onInit = function () {
if(this.a.id == 'last')
hs.lang.restoreTitle = '';
else
hs.lang.restoreTitle = 'Click for next image';
};
hs.Expander.prototype.onBeforeClose = function() {
if (this.a.id == 'last1') return false;
if (this.a.id == 'last2') return false;
if (this.a.id == 'first1') return false;
if (this.a.id == 'first2') return false;
};
// Keep the position after window resize
hs.addEventListener(window, 'resize', function() {
var i, exp;
hs.getPageSize();
for (i = 0; i < hs.expanders.length; i++) {
exp = hs.expanders[i];
if (exp) {
var x = exp.x,
y = exp.y;
// get new thumb positions
exp.tpos = hs.getPosition(exp.el);
x.calcThumb();
y.calcThumb();
// calculate new popup position
x.pos = x.tpos - x.cb + x.tb;
x.scroll = hs.page.scrollLeft;
x.clientSize = hs.page.width;
y.pos = y.tpos - y.cb + y.tb;
y.scroll = hs.page.scrollTop;
y.clientSize = hs.page.height;
exp.justify(x, true);
exp.justify(y, true);
// set new left and top to wrapper and outline
exp.moveTo(x.pos, y.pos);
}
}
});
</script>
<!--
jQuery library
-->
<script type="text/javascript" src="jsor-jcarousel-f1351b7/lib/jquery-1.4.2.min.js"></script>
<!--
jCarousel library
-->
<script type="text/javascript" src="jsor-jcarousel-f1351b7/lib/jquery.jcarousel.min.js"></script>
<!--
jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="jsor-jcarousel-f1351b7/skins/tango/skin.css" />
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#mycarousel-1').jcarousel();
jQuery('#mycarousel-2').jcarousel();
});
</script>
<style type="text/css">
.highslide-wrapper {
background: black;
}
.highslide img {
border: none;
}
.highslide-image {
border: 1px solid gray;
}
.highslide-active-anchor img {
visibility: visible;
}
.highslide-controls {
width: 65px !important;
}
.highslide-controls .highslide-close {
display: none;
}
.highslide-controls .highslide-play {
display: none;
}
/* jCarousel skin overrides */
.jcarousel-skin-tango .jcarousel-container {
border: none;
background: black;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 810px;
padding: 10px 40px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 810px;
}
.jcarousel-skin-tango .jcarousel-next-horizontal {
top: 33px;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
top: 33px;
}
.jcarousel-skin-tango .jcarousel-item {
width: auto;
}
body,td,th {
color: #FFF;
}
body {
background-color: #000;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /></head>
<body>
<div align="center">
<table width="620" border="0" cellspacing="3" cellpadding="3">
<tr>
<td><div align="left"><img src="ugle-8.jpg" alt="UGLE link" width="186" height="220" onclick="MM_goToURL('parent','http://www.ugle.org.uk/');return document.MM_returnValue" onmouseover="MM_popupMsg('This is a personal site and has no connection whatsoever with the United Grand Lodge of England or the Provincial Grand Lodge of Bedfordshire. It is just a set of photographs for those interested in Freemasonry \rHowever this link will take you to the UGLE ')" /></div></td>
<td><div align="center"></div>
<img src="title.jpg" width="400" height="120" alt="Title" /></td>
<td><div align="center"><img src="gchapterrefilled.gif" alt="Grand Chapter" width="275" height="216" onclick="MM_goToURL('parent','http://www.grandchapter.org.uk/');return document.MM_returnValue" onmouseover="MM_popupMsg('This is a personal site and has no connection whatsoever with the Supreme Grand Chapter Royal Arch of England or the Provincial Grand Chapter of Bedfordshire. It is just a set of photographs for those interested in Freemasonry However this link will take you to the SGC ')" /></div>
<div align="right"></div></td>
</tr>
</table>
</div>
<div style="width: 890px; margin: 0 auto; background: black;">
<ul id="mycarousel-1" class="jcarousel-skin-tango">
<li>
<a id="first1" href="pictures/Leighton Masonic Hall 26-3-09 adam fireplace 01_web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Adam Fireplace behind Master's Chair">
<img src="pictures/Leighton Masonic Hall 26-3-09 adam fireplace 01_web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 adam fireplace 02 _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Adam Fireplace behind Master's Chair" >
<img src="pictures/Leighton Masonic Hall 26-3-09 adam fireplace 02 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 lights 01 _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Chandellier in Lodge Room">
<img src="pictures/Leighton Masonic Hall 26-3-09 lights 01 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 lights 03 _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Chandellier in Lodge Room">
<img src="pictures/Leighton Masonic Hall 26-3-09 lights 03 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 masters chair _web.JPG" class="highslide"
onclick="return hs.expand(this, config1 )" title="Master's Chair" >
<img src="pictures/Leighton Masonic Hall 26-3-09 masters chair _web_tn.JPG" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 masters chair h pan 01 _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Master's Chair">
<img src="pictures/Leighton Masonic Hall 26-3-09 masters chair h pan 01 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 meeting room wrap round pan 01_web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Main Lodge Room wrap round pan" >
<img src="pictures/Leighton Masonic Hall 26-3-09 meeting room wrap round pan 01_web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 sw chair _web.JPG" class="highslide"
onclick="return hs.expand(this, config1 )" title="Senior Warden's Chair" >
<img src="pictures/Leighton Masonic Hall 26-3-09 sw chair _web_tn.JPG" alt="" height="75" /></a></li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 sw chair h pan 01 _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Caption text">
<img src="pictures/Leighton Masonic Hall 26-3-09 sw chair h pan 01 _web_tn.jpg" alt="" height="75" />
</a></li>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 dining room h pan _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Dining Room">
<img src="pictures/Leighton Masonic Hall 26-3-09 dining room h pan _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 entrace area _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Entrance area" >
<img src="pictures/Leighton Masonic Hall 26-3-09 entrace area _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 kitchen h pan _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Kitchen">
<img src="pictures/Leighton Masonic Hall 26-3-09 kitchen h pan _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 L o I room 02 _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Lodge of Instruction Room" >
<img src="pictures/Leighton Masonic Hall 26-3-09 L o I room 02 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="pictures/Leighton Masonic Hall 26-3-09 robing passage 01 _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Robing Area">
<img src="pictures/Leighton Masonic Hall 26-3-09 robing passage 01 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a id="last1" href="pictures/Leighton Masonic Hall 26-3-09 robing passage 02 _web.jpg" class="highslide"
onclick="return hs.expand(this, config1 )" title="Robing Area">
<img src="pictures/Leighton Masonic Hall 26-3-09 robing passage 02 _web_tn.jpg" alt="" height="75" />
</a>
</li>
</ul>
<div id="gallery-area" style="width: 890px; height: 490px; margin: 0 auto; border: 1px solid black;">
<!-- Element used as thumbnailId for the image popups to expand from and close to -->
<div id="thumb-target" style="width: 10px; margin: 200px auto 0 auto; height: 1px;"></div>
</div>
<ul id="mycarousel-2" class="jcarousel-skin-tango">
<li>
<a id="first2" href="windows/Leighton Masonic Hall 26-3-09 bird window 01 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Bird Window">
<img src="windows/Leighton Masonic Hall 26-3-09 bird window 01 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 bird window 02 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Bird Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 bird window 02 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 bird window 03 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Bird Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 bird window 03 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 bird window 04 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Bird Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 bird window 04 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 bird window 05 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Bird Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 bird window 05 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 bird window 06_web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Bird Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 bird window 06_web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 Games window 01 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Games Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 Games window 01 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 Games window 02 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Games Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 Games window 01 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 Games window 02 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Games Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 Games window 01 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 Games window 03 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Games Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 Games window 03 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a href="windows/Leighton Masonic Hall 26-3-09 Games window 04 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Games Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 Games window 04 _web_tn.jpg" alt="" height="75" />
</a>
</li>
<li>
<a id="last2" href="windows/Leighton Masonic Hall 26-3-09 Games window 05 _web.jpg" class="highslide"
onclick="return hs.expand(this, config2 )" title="Games Window" >
<img src="windows/Leighton Masonic Hall 26-3-09 Games window 04 _web_tn.jpg" alt="" height="75" />
</a>
</li>
</ul>
</div>
<div align="center">
<div align="center">
<table width="620" border="0" cellspacing="3" cellpadding="3">
<tr>
<td><div align="left"><img src="gchapterrefilled.gif" alt="Grand Chapter" width="275" height="216" onclick="MM_goToURL('parent','http://www.grandchapter.org.uk/');return document.MM_returnValue" onmouseover="MM_popupMsg('This is a personal site and has no connection whatsoever with the Supreme Grand Chapter Royal Arch of England or the Provincial Grand Chapter of Bedfordshire. It is just a set of photographs for those interested in Freemasonry However this link will take you to the SGC ')" /></div></td>
<td><div align="center"></div>
<img src="title.jpg" width="400" height="120" alt="Title" /></td>
<td><div align="center"></div>
<div align="right"><img src="ugle-8.jpg" alt="UGLE link" width="186" height="220" onclick="MM_goToURL('parent','http://www.ugle.org.uk/');return document.MM_returnValue" onmouseover="MM_popupMsg('This is a personal site and has no connection whatsoever with the United Grand Lodge of England or the Provincial Grand Lodge of Bedfordshire. It is just a set of photographs for those interested in Freemasonry \rHowever this link will take you to the UGLE ')" /></div></td>
</tr>
</table>
<div align="center">
</div>
<div align="center">
<table width="620" border="0" cellspacing="3" cellpadding="3">
<tr>
<td width="199"><h3 align="center"><a href="http://www.happysnapper.com/book">Return to happysnapper</a></h3> </td>
<td width="125"><div align="center"></div></td>
<td width="266"><div align="center"><a href="mailto:[email protected]">Contact Webmaster</a> </div></td>
</tr>
</table>
</div>
</div>
</div>
<p style="text-align: left;">Site written with the kind assistance of <a href="http://www.highslide.com/">Highslide JS</a> & <a href="http://sorgalla.com/projects/jcarousel/">jCarousel</a></p>
</body>
</html>
This design uses this controlbar (not Highslide standard):
Download it and put it in your highslide/graphics folder. Find this part in the highslide.css file:
Code: Select all
.controls-in-heading .highslide-controls a {
background-image: url(graphics/controlbar-white-small.gif);
height: 20px;
width: 20px;
}
Replace the background-image with controlbar-black-small.gif.
Code: Select all
.controls-in-heading .highslide-controls a {
background-image: url(graphics/controlbar-black-small.gif);
height: 20px;
width: 20px;
}