User avatar
boilerbill
Posts: 47
Joined: Sun Oct 25, 2009 10:40 pm
Location: Dunstable, England
Contact: Website

Thumbnail galleries & expansions

Take a site like http://happysnapper.com/dunstablemason/ (Please - well, someone has to)

Strip out the annoying pop ups, there to calm those sent to annoy us................

We end up with a completely boringly basic site with the thumbnails above the main picture. Ho Hum.

Now I have it to hand to do something similar for the Centre in the next town. OK, copy and paste would do for most of it.

However they are inordinately fond of the fancy windows there which would make a second strip desirable.

Now it would seem a bit cumbersome to go along the lines of http://www.duofratlodge.org.uk/pavilion/index.html, but to have a second strip directly below the main picture seems a neat way round it.

Any advices on how to go round it?
The samples don't seem to cover it.

Second point:
One the first sample site, http://happysnapper.com/dunstablemason/ there are a few panoramic shots which, when opened, fly out to the left of the screen. Is there any way of having them centred before someone complains of them breaking out of the side of the monitor?

TIA, grateful for any advices as always,

Keith
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Thumbnail galleries & expansions

Hello Keith,

Second point first:
Try this code for your page. IÔÇÖve marked my changes with yellow.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Dunstable 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" /> 
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]--> 
 
 
 
<!--
    2) Optionally override the settings defined at the top
    of the highslide.js file. The parameter hs.graphicsDir is important!
    Add the slideshow and do some adaptations to this example.
--> 
 
<script type="text/javascript">
//<![CDATA[
hs.graphicsDir = 'highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
 
// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: true,
	useControls: true,
	overlayOptions: {
		position: 'bottom right',
		offsetY: 50
	},
	thumbstrip: {
		position: 'above',
		mode: 'horizontal',
		relativeTo: 'expander'
	}
});
 
// Options for the in-page items
var inPageOptions = {
	//slideshowGroup: 'group1',
	outlineType: null,
	allowSizeReduction: [hilight]true[/hilight],
	wrapperClassName: 'in-page controls-in-heading',
	useBox: true,
	[hilight]width: 850,[/hilight]
	height: 450,
	targetX: 'gallery-area 10px',
	targetY: 'gallery-area [hilight]10px[/hilight]',
	captionEval: 'this.thumb.alt',
	numberPosition: 'caption'
}
 
// Open the first thumb on page load
hs.addEventListener(window, 'load', function() {
	document.getElementById('thumb1').onclick();
});
 
// Cancel the default action for image click and do next instead
hs.Expander.prototype.onImageClick = function() {
	if (/in-page/.test(this.wrapper.className))	return hs.next();
}
 
// Under no circumstances should the static popup be closed
hs.Expander.prototype.onBeforeClose = function() {
	if (/in-page/.test(this.wrapper.className))	return false;
}
// ... nor dragged
hs.Expander.prototype.onDrag = function() {
	if (/in-page/.test(this.wrapper.className))	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);
		}
	}
});
//]]>
function MM_popupMsg(msg) { //v1.0
  alert(msg);
}
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
</script> 
 
<!--
	3) Modify some of the styles
--> 
<style type="text/css"> 
	.highslide-image {
		border: 1px solid black;
	}
	.highslide-controls {
		width: 90px !important;
	}
	.highslide-controls .highslide-close {
		display: none;
	}
	.highslide-caption {
		padding: .5em 0;
	}
body {
	background-color: #000;
}
body,td,th {
	color: #F39;
}
</style> 
 

</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> 
   
  <!--
	4)	Put all the thumbnails inside a hidden div where Highslide can index them to
		create the slideshow.
--> 
   
 </div> 
<div class="hidden-container"> 
  <!--
	5) This is how you mark up the thumbnail images with an anchor tag around it.
	The anchor's href attribute defines the URL of the full-size image. Given the captionEval
	option is set to 'this.a.title', the caption is grabbed from the title attribute of
	the anchor.
--> 
   
   <a id="thumb1" class='highslide' href='dunstable masonic hall 24-3-09 external_web.jpg'			onclick="return hs.expand(this, inPageOptions)"> 
     <img src='dunstable masonic hall 24-3-09 external_web_TN.jpg' alt='Being rather isolated, the place needs to be a bit of a fortress'/></a> 
   
   <a class='highslide' href='dunstable masonic hall 24-3-09 locker room_web.jpg'			onclick="return hs.expand(this, inPageOptions)"> 
     <img src='dunstable masonic hall 24-3-09 locker room_web_TN.jpg' alt='Needless to say the lockers never have anything of value in them'/></a> 
   
   <a class='highslide' href='dunstable masonic hall 24-3-09 robing room 01_web.jpg'			onclick="return hs.expand(this, inPageOptions)"> 
     <img src='dunstable masonic hall 24-3-09 robing room 01_web_TN.jpg' alt='Robing and Rehearsal Room'/></a>

<a class='highslide' href='dunstable masonic hall 24-3-09 robing room 02_web.jpg'			onclick="return hs.expand(this, inPageOptions)"> 
     <img src='dunstable masonic hall 24-3-09 robing room 02_web_TN.jpg' alt='Robing and Rehearsal Room'/></a>
 
   
   <a class='highslide' href='dunstable masonic hall 24-3-09 dining room h pan 01_web.jpg'			onclick="return hs.expand(this, inPageOptions)"> 
     <img src='dunstable masonic hall 24-3-09 dining room h pan 01_web_TN.jpg' alt='Dining Room and Bar'/></a> 
  
 
   <a class='highslide' href='dunstable masonic hall 24-3-09 dining room h pan 02_web.jpg'			onclick="return hs.expand(this, inPageOptions)"> 
   <img src='dunstable masonic hall 24-3-09 dining room h pan 02_web_TN.jpg' alt='Dining Room and Bar'/></a> 


   <a class='highslide' href='dunstable masonic hall 24-3-09 dining room_web.jpg'			onclick="return hs.expand(this, inPageOptions)"> 
   <img src='dunstable masonic hall 24-3-09 dining room_web_TN.jpg' alt='Dining Room and Bar'/></a>
     

   <a class='highslide' href='dunstable masonic hall 24-3-09 masters chair h pan_web.jpg'			onclick="return hs.expand(this, inPageOptions)"> 
   <img src='dunstable masonic hall 24-3-09 masters chair h pan_web_TN.jpg' alt='The Lodge Room'/></a>


   <a class='highslide' href='dunstable masonic hall 24-3-09 sw chair h pan 01_web.jpg'			onclick="return hs.expand(this, inPageOptions)"> 
   <img src='dunstable masonic hall 24-3-09 sw chair h pan 01_web_TN.jpg' alt='The Lodge Room'/></a>


   <a class='highslide' href='dunstable masonic hall 24-3-09 wardens chairs h pan 01_web.jpg'			onclick="return hs.expand(this, inPageOptions)"> 
   <img src='dunstable masonic hall 24-3-09 wardens chairs h pan 01_web_TN.jpg' alt='The Lodge Room'/></a>
</div> 
 
<div id="gallery-area" style="[hilight]width: 870px;[/hilight] height: 570px; margin: 0 auto; border: 1px solid silver"></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> 
  </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>
</body> 

</html>
First point:
IÔÇÖm probably really slow tonight, ÔÇÿcause I donÔÇÖt understand what you want. I donÔÇÖt understand the second strip... Do you want thumbstrip both above and below the main image in the pavilion page?
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
boilerbill
Posts: 47
Joined: Sun Oct 25, 2009 10:40 pm
Location: Dunstable, England
Contact: Website

Re: Thumbnail galleries & expansions

Thanks for above, I'll get onto it as soon as I finish the bits of 'real life' which intrude this morning.

From what little I have learned about you these few months, I would say that you appear never to be slow, at least mentally................

You have assumed right, I am thinking of having the main pictures on the top strip and these damned windows on the bottom one

Keith
User avatar
boilerbill
Posts: 47
Joined: Sun Oct 25, 2009 10:40 pm
Location: Dunstable, England
Contact: Website

Re: Thumbnail galleries & expansions

A very elegant work round, thanks
Keith
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Thumbnail galleries & expansions

Did you think of something like this: http://www.roadrash.no/hs-support/galle ... eries.html
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
boilerbill
Posts: 47
Joined: Sun Oct 25, 2009 10:40 pm
Location: Dunstable, England
Contact: Website

Re: Thumbnail galleries & expansions

Close, but that appears to be having two separate but different designs of High Slide, one running over the other.

Works but, pardon me, not neatly.

What I am looking for is to try and have both galleries within the white box so top and bottom equate

A troublesome Keith
User avatar
boilerbill
Posts: 47
Joined: Sun Oct 25, 2009 10:40 pm
Location: Dunstable, England
Contact: Website

Re: Thumbnail galleries & expansions

I have done a little screenshot and Photoshop fiddle at http://happysnapper.com/sample.html

This should show more like what I am aiming for, if possible, although just copy pasting the gallery from the top to the bottom has covered the tools and titles

Regards
Keith
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Thumbnail galleries & expansions

Two Highslide thumbstrips isnÔÇÖt possible since the thumbstrip is part of a gallery.
You can achieve something similar by using f.ex jCarousel (http://sorgalla.com/projects/jcarousel/) combined with Highslide galleries using targetX/Y (http://highslide.com/ref/hs.targetX).
See example page: http://www.roadrash.no/hs-support/highs ... ousel.html
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
boilerbill
Posts: 47
Joined: Sun Oct 25, 2009 10:40 pm
Location: Dunstable, England
Contact: Website

Re: Thumbnail galleries & expansions

You have come up marvellously again :-)

Which is more than can be said for me :-(

My results are sat at:
http://happysnapper.com/leightonmasonichall/

I just copied and pasted your page into a new document using notepad. I then rerouted the graphics.

Grabbed the jsor-jcarousel-0.2.4-0-gf1351b7.zip from the site, expanded it and put the resultant dir in my main one.

Tried playing with those routing which may be effected with nothing seeming to relate to download and page, now back winging again!!

Keith
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Thumbnail galleries & expansions

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
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):
Image
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;
}
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
boilerbill
Posts: 47
Joined: Sun Oct 25, 2009 10:40 pm
Location: Dunstable, England
Contact: Website

Re: Thumbnail galleries & expansions

Strange effects. Copied and pasted the last lot and got the defects :-(

Done the same now and got a whole new set of problems :-(

Still on http://happysnapper.com/leightonmasonichall/

Just lost all but the first of the thumbs on each row.............

Must be the heat wave, either melting the mush between the ears, the electrons or the thumbnails, if need be I can check inside the tower for melted pictures........

Keith
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Thumbnail galleries & expansions

Keith, did you fix it? I can see all your thumbs - both above and below. (using Firefox)
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Thumbnail galleries & expansions

Tested in Safari after my previous post ÔÇô I can see the same issue.
Seems like Firfox can handle loading the thumbs without setting both width and height, but Safari (and probably other browsers) canÔÇÖt.
I think the fix is setting both width and height inline.
First image - top scroll area:

Code: Select all

<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="" [hilight]height="68" width="90"[/hilight] /> 
   </a> 
</li>
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
User avatar
boilerbill
Posts: 47
Joined: Sun Oct 25, 2009 10:40 pm
Location: Dunstable, England
Contact: Website

Re: Thumbnail galleries & expansions

Absolute perfection in Google Chrome :-)

For some reason in IE7 & 8 there is quite a gap between the main picture and the lower gallery, but what the hell, you have won yet again

regards
Keith
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Thumbnail galleries & expansions

I canÔÇÖt see any gap in IE7 & 8, so I guess youÔÇÖve fixed it.

BTW ÔÇô thanks for the marriage license! :D
2010-05-24_0811.png
2010-05-24_0811.png (5.44 KiB) Viewed 7633 times
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no

Return to “Highslide JS Usage”