Images jumping out of div!

gavinwilshen · Fri Feb 11, 2011 2:45 pm

Hi there!

I'm using Highslide JS galleries multiple times within a single web page but alongside another bit of javascript which allows me to show/hide alternate divs containing the different galleries. This part is working fine except that when I click the link to hide the first div and show the next gallery, the images in the new gallery appear to jump out of the div into the top-left-hand corner of the page. I really can't work out why so any advice would be much appreciated.

The web page in question is: http://gavinwilshen.com/community.html

If you click the 'Profile 2' link in the dark grey box, top right of the screen then you'll see what I mean. 'Profile 1' appears on page load and seems fine.

I'm using Firefox 3.0.19 and haven't tested across other browsers yet.

Hope you can help.

Regards,
Gavin

RoadRash · Sat Feb 12, 2011 10:00 pm

Hi Gavin,

I think the easiest is to post your code with changes and comments. Changes/comments are highlighted - read the comments thoroughly.

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Living Religion</title>

<link href="Sitewide2.css" rel="stylesheet" type="text/css" />

<!--scripts for slider-->
 
<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]-->

<script type="text/javascript">
//<![CDATA[
hs.graphicsDir = 'highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
hs.expandDuration = 0;
[hilight]hs.allowSimultaneousLoading = true; // Necessary for loading both galleries[/hilight]

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 3500,
	repeat: true,
	useControls: false
});

// Options for the in-page items for the first gallery
var inPageOptions = {
	[hilight]slideshowGroup: 'group1', // Each slideshow needs its own slideshowGroup to stay separated[/hilight]
	outlineType: null,
	allowSizeReduction: false,
	wrapperClassName: 'in-page controls-in-heading',
	useBox: true,
	width: 600,
	height: 400,
	targetX: 'gallery-area 0',
	targetY: 'gallery-area 0',
	//captionEval: 'this.thumb.alt',
	//numberPosition: 'caption',
	autoplay: true
};

[hilight]// Options for the in-page items for the second gallery 
var inPageOptions2 = {
	slideshowGroup: 'group2', // Each slideshow needs its own slideshowGroup to stay separated
	outlineType: null,
	allowSizeReduction: false,
	wrapperClassName: 'in-page controls-in-heading',
	useBox: true,
	width: 600,
	height: 400,
	targetX: 'gallery-area 0',
	targetY: 'gallery-area 0',
	//captionEval: 'this.thumb.alt',
	//numberPosition: 'caption',
	autoplay: true
};[/hilight]

// Open the first thumb on page load[hilight] - note that the id for the first anchor for both galleries are added[/hilight]
hs.addEventListener(window, 'load', function() {
	document.getElementById('thumb1').onclick();
	[hilight]document.getElementById('thumb2').onclick();[/hilight]
});

// 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, false);
			exp.justify(y, false);

			// set new left and top to wrapper and outline
			exp.moveTo(x.pos, y.pos);
		}
	}
});
//]]>
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

<!--scripts for show/hide divs-->

<script>
function showhide(id){

for (n=1;n<=2;n++)
{
diviname="profile"+n;
obj = document.getElementById(diviname);
obj.style.display = "none";
}
obj = document.getElementById(id);
if (obj.style.display == "none"){
obj.style.display = "";
} else {
obj.style.display = "none";
}
}

</script>

</head>
    
<body onload="MM_preloadImages('images/Fireworks/nav_r1_c2_s2.png','images/_nav/home_over.png','images/_nav/about_over.png','images/_nav/case_over.png','images/_nav/community_over.png','images/_nav/resources_over.png','images/_nav/links_over.png')">

<div id="wrapper">

<div class="container">

  <div class="header"><a href="index.html"><img src="images/About_r1_c1.png"></a></div> 
  <div class="header"><a href="index.html"><img src="images/Header.jpg"></a></div>

<div class="header">
   
<div id="topnav"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/_nav/home_over.png',1)"><img src="images/_nav/home.png" alt="home button" name="home" width="97" height="35" border="0" id="home" /></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','images/_nav/about_over.png',1)"><img src="images/_nav/about.png" alt="About Button" name="About" width="122" height="35" border="0" id="About" /></a><a href="community.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('community','','images/_nav/community_over.png',1)"><img src="images/_nav/community_active.png" alt="community profiles button" name="community" width="200" height="35" border="0" id="community" /></a><a href="research.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Case','','images/_nav/research_over.png',1)"><img src="images/_nav/research.png" alt="research button" name="Research" width="103" height="35" border="0" id="Case" /></a><a href="resources.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('resources','','images/_nav/resources_over.png',1)"><img src="images/_nav/resources.png" alt="resources button" name="resources" width="126" height="35" border="0" id="resources" /></a><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','images/_nav/links_over.png',1)"><img src="images/_nav/links.png" alt="links button" name="links" width="94" height="35" border="0" id="links" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/_nav/contact_over.png',1)"><img src="images/_nav/contact.png" alt="contact button" name="contact" width="148" height="35" border="0" id="contact" /></a><img src="images/_nav/blank.png" width="15" height="35" /></div>
</div>

<div id="sidebarheader">
<p><a href="#" onclick="showhide('profile1'); return(false);">Profile 1</a></p>
<p><a href="#" onclick="showhide('profile2'); return(false);">Profile 2</a></p>
</div>

<div class="headertext">

  <p>In this section of the website you will find information on destinations suitable for student placements. The profiles created here are provided by the communities themselves who have given us permission to use them here. Clicking on the links to the right to view the different profiles >>></p>
</div>

      <div class="sidebar1"><a href="#"></a>
    <ul class="nav">
      <li><a href="#"><div class="thumbnail"><img src="images/1.jpg"></div>
      <div class="thumbtext">
        <h4>Newsletter<br/></h4>
      <p><br />

        To download our latest PDF Newsletter, please click here!    </p></div>
      <div class="clearfloat"></div></a></li>
      <li><a href="#"><div class="thumbnail"><img src="images/5.jpg"></div>
      <div class="thumbtext">
        <h4>Sign Our E-Petition<br/></h4>
      <p><br />
      Help support the ongoing battle against an increase in Student Fees. Sign-Up!</p></div>

      <div class="clearfloat"></div></a></li>
      <li><a href="#"><div class="thumbnail"><img src="images/4.jpg"></div>
      <div class="thumbtext">
        <h4>Study Placements<br/></h4>
      <p><br />
      View the various study placements available here in the UK. Read More...</p></div>
      <div class="clearfloat"></div></a></li>
      <li><a href="#"><div class="thumbnail"><img src="images/3.jpg"></div>

      <div class="thumbtext">
        <h4>Retreat of the Week<br/></h4>
      <p><br />
      Our reviews of the best study destinations on offer. Read More...</p></div>
      <div class="clearfloat"></div></a></li>
      <li><a href="#"><div class="thumbnail"><img src="images/tolerance.jpg"></div>
      <div class="thumbtext">
        <h4>International Day For Tolerance Event<br/></h4>

      <p><br />
      UNESCO events happening around the UK. Read More...</p></div>
      <div class="clearfloat"></div></a></li>
    </ul></div>

<div class="content">

[hilight]<!-- 
	The target div for the galleris must be placed outside the panels 
-->
<div id="gallery-area" style="width: 600px; height: 400px; position: absolute; top: 296px;"></div>[/hilight]

<div id="profiles">

<div id="profile1">
  <h3>Profile: Bhaktivedanta Manor<br />

    &nbsp;</h3>
 
[hilight]<!-- 
	Start gallery 1. Note that the the first div do not have an id anymore.
 -->  
<div style="width: 600px; height: 400px; border: 0px solid silver; background-color: #FFF; overflow: hidden;">[/hilight]

<div style="visibility: hidden;">
[hilight]<!-- 
	The first anchor must have an id that corresponds with the id in the hs.addEventListener in the head section
    Note: The rest of the anchors should NOT have ids
-->[/hilight]
	<a [hilight]id="thumb1" [/hilight]class='highslide' href='images/_Slideshow/_community/bhaktivedanta/sofa.jpg'
			onclick="return hs.expand(this, inPageOptions)">
<img src='images/_Slideshow/_community/bhaktivedanta/sofa.jpg'/></a>

	<a class='highslide' href='images/_Slideshow/_community/bhaktivedanta/manor.jpg'
			onclick="return hs.expand(this, inPageOptions)">
<img src='images/_Slideshow/_community/bhaktivedanta/manor.jpg'/></a>	
        
     <a class='highslide' href='images/_Slideshow/_community/bhaktivedanta/bench.jpg'
			onclick="return hs.expand(this, inPageOptions)">
<img src='images/_Slideshow/_main/geshe.jpg'/></a>	
            
     <a class='highslide' href='images/_Slideshow/_community/bhaktivedanta/statuettes.jpg'
			onclick="return hs.expand(this, inPageOptions)">

<img src='images/_Slideshow/_main/golden_buddha.jpg'/></a>
        
     <a class='highslide' href='images/_Slideshow/_community/bhaktivedanta/milk.jpg'
			onclick="return hs.expand(this, inPageOptions)">
<img src='images/_Slideshow/_main/hijab.jpg'/></a>

</div>

</div>
<!-- 
	End gallery 1 
-->

<div class="contenttext">
<h3>Information:<br/>&nbsp;</h3>
<table width="600" border="0" cellspacing="0" cellpadding="2">
  <tr>
  	<td><p>Name:</p></td>

    <td><p><strong>Bhaktivedanta Manor</strong></p></td>
  </tr>
  <tr>
    <td valign="top"><p>Address:</p></td>
    <td valign="top"><p>Hilfield Lane, Aldenham, Watford, Herts, WD25 8EZ</p><br /></td>
  </tr>
  <tr>

    <td valign="top"><p>Website:</p></td>
    <td valign="top"><p>www.ies.iskcon.com</p><br /></td>
  </tr>
  <tr>
    <td valign="top"><p>Contact:</p></td>
    <td valign="top"><p><strong>Indriyesha Das</strong></p>
      <p>Email: [email protected]</p>

<p>Phone: 01923 859578 </p>
<p>Fax: 01923 851005</p><br /></td>
  </tr>
  <tr>
    <td valign="top"><p>Affiliation/tradition:</p></td>
    <td valign="top"><p><strong>Gaudiya Vaishnava </strong><br />
      (International Society for Krishna Consciousness)</p><br /></td>

  </tr>
  <tr>
    <td valign="top"><p>Purpose of community:</p></td>
    <td valign="top"><p>To systematically propagate spiritual knowledge to society at large and to educate all peoples in the techniques of the spiritual life in order to check the intolerance of values in life and to achieve real unity and peace in the world.</p><br /></td>
  </tr>
  <tr>
    <td valign="top"><p>Facilities:</p></td>

    <td valign="top"><p>Limited. The community can normally accommodate up to 4 students of each gender to stay for a week. Are very used to day visits from schools and universities.</p><br /></td>
  </tr>
  <tr>
    <td valign="top"><p>Access:</p></td>
    <td valign="top"><p>Disabled access fine for day visits. However, there are no lifts to the first floor in the main building or adapted guest facilities for staying.</p><br /></td>
  </tr>
  <tr>

    <td valign="top"><p>Requirements:</p></td>
    <td valign="top"><p>No alcohol or other intoxicants. Vegetarian diet while visiting. Appropriate behaviour, modest and respectful.</p><br /></td>
  </tr>
  <tr>
    <td valign="top"><p>Practical tips:</p></td>
    <td valign="top"><p>Shoes that are easy to slip on and off are useful.</p><br /></td>
  </tr>

  <tr>
    <td valign="top"><p>Suitability: </p></td>
    <td valign="top"><p>Primary schools/secondary schools/university students</p><br /></td>
  </tr>
  <tr>
    <td valign="top"><p>Further reading:</p></td>
    <td valign="top"><p><strong>Krishna Consciousness in the West</strong></p>

      <p>Bromley, D.G. (1989) Cranbury, NJ: Associated University Press.</p>
      <p>&nbsp;</p>
      <p><strong>The Hare Krishna Movement: Forty Years of Chant and Change.</strong> </p>
      <p>Dwyer, G. & Cole, R.J. eds. (2007) London, New York & Melbourne: I.B. Tauris.</p>

      <p>&nbsp;</p>
      <p><strong>My Sweet Lord: The Hare Krishna Movement. </strong></p>
      <p>Knott, K. (1986) Wellingborough: Aquarian Press.</p>
      <p>&nbsp;</p>
      <p><strong>Hare Krishna Transformed.</strong></p>
      <p>Rochford, E.B. (2007) New York: New York University Press.</p><br /></td>
  </tr>

  <tr>
    <td valign="top"><p>Public liability insurance:</p></td>
    <td valign="top"><p>Yes</p></td>
  </tr>
</table>
<p>&nbsp;</p>
<!-- end .contenttext --></div>
<!-- end #profile1 --></div>

<div style="display: none;"id="profile2">
  <h3>Profile: Second Sample Community Profile<br />

    &nbsp;</h3>

[hilight]<!-- 
	Start gallery 2.  Note that the the first div do not have an id anymore.
-->  
<div style="width: 600px; height: 400px; border: 0px solid silver; background-color: #FFF; overflow: hidden;">[/hilight]

<div style="visibility: hidden;">
[hilight]<!-- 
	The first anchor must have an id that corresponds with the id in the hs.addEventListener in the head section
    Note: The rest of the anchors should NOT have ids
    You need to use a configuration object similar to the one used in the first gallery to place the gallery in the target div - 
    I've created a new configuration object - inPageOptions2 in the head section
-->[/hilight]
	<a i[hilight]d="thumb2" [/hilight]class='highslide' href='images/_Slideshow/_community/bhaktivedanta/sofa.jpg'
			[hilight]onclick="return hs.expand(this, inPageOptions2)"[/hilight]>
<img src='images/_Slideshow/_community/bhaktivedanta/sofa.jpg'/></a>

	<a class='highslide' href='images/_Slideshow/_community/bhaktivedanta/manor.jpg'
			[hilight]onclick="return hs.expand(this, inPageOptions2)"[/hilight]>
<img src='images/_Slideshow/_community/bhaktivedanta/manor.jpg'/></a>	
        
     <a class='highslide' href='images/_Slideshow/_community/bhaktivedanta/bench.jpg'
			[hilight]onclick="return hs.expand(this, inPageOptions2)"[/hilight]>
<img src='images/_Slideshow/_main/geshe.jpg'/></a>	
            
     <a class='highslide' href='images/_Slideshow/_community/bhaktivedanta/statuettes.jpg'
			[hilight]onclick="return hs.expand(this, inPageOptions2)"[/hilight]>

<img src='images/_Slideshow/_main/golden_buddha.jpg'/></a>
        
     <a class='highslide' href='images/_Slideshow/_community/bhaktivedanta/milk.jpg'
			[hilight]onclick="return hs.expand(this, inPageOptions2)"[/hilight]>
<img src='images/_Slideshow/_main/hijab.jpg'/></a>

</div>

</div>
<!-- 
	End gallery 2
-->

<div class="contenttext">
<h3>Information:<br/>&nbsp;</h3>
<table width="600" border="0" cellspacing="0" cellpadding="2">
  <tr>
  	<td><p>Name:</p></td>

    <td><p><strong>Bhaktivedanta Manor</strong></p></td>
  </tr>
  <tr>
    <td valign="top"><p>Address:</p></td>
    <td valign="top"><p>Hilfield Lane, Aldenham, Watford, Herts, WD25 8EZ</p><br /></td>
  </tr>
  <tr>

    <td valign="top"><p>Website:</p></td>
    <td valign="top"><p>www.ies.iskcon.com</p><br /></td>
  </tr>
  <tr>
    <td valign="top"><p>Contact:</p></td>
    <td valign="top"><p><strong>Indriyesha Das</strong></p>
      <p>Email: [email protected]</p>

<p>Phone: 01923 859578 </p>
<p>Fax: 01923 851005</p><br /></td>
  </tr>
  <tr>
    <td valign="top"><p>Affiliation/tradition:</p></td>
    <td valign="top"><p><strong>Gaudiya Vaishnava </strong><br />
      (International Society for Krishna Consciousness)</p><br /></td>

  </tr>
  <tr>
    <td valign="top"><p>Purpose of community:</p></td>
    <td valign="top"><p>To systematically propagate spiritual knowledge to society at large and to educate all peoples in the techniques of the spiritual life in order to check the intolerance of values in life and to achieve real unity and peace in the world.</p><br /></td>
  </tr>
  <tr>
    <td valign="top"><p>Facilities:</p></td>

    <td valign="top"><p>Limited. The community can normally accommodate up to 4 students of each gender to stay for a week. Are very used to day visits from schools and universities.</p><br /></td>
  </tr>
  <tr>
    <td valign="top"><p>Access:</p></td>
    <td valign="top"><p>Disabled access fine for day visits. However, there are no lifts to the first floor in the main building or adapted guest facilities for staying.</p><br /></td>
  </tr>
  <tr>

    <td valign="top"><p>Requirements:</p></td>
    <td valign="top"><p>No alcohol or other intoxicants. Vegetarian diet while visiting. Appropriate behaviour, modest and respectful.</p><br /></td>
  </tr>
  <tr>
    <td valign="top"><p>Practical tips:</p></td>
    <td valign="top"><p>Shoes that are easy to slip on and off are useful.</p><br /></td>
  </tr>

  <tr>
    <td valign="top"><p>Suitability: </p></td>
    <td valign="top"><p>Primary schools/secondary schools/university students</p><br /></td>
  </tr>
  <tr>
    <td valign="top"><p>Further reading:</p></td>
    <td valign="top"><p><strong>Krishna Consciousness in the West</strong></p>

      <p>Bromley, D.G. (1989) Cranbury, NJ: Associated University Press.</p>
      <p>&nbsp;</p>
      <p><strong>The Hare Krishna Movement: Forty Years of Chant and Change.</strong> </p>
      <p>Dwyer, G. & Cole, R.J. eds. (2007) London, New York & Melbourne: I.B. Tauris.</p>
      <p>&nbsp;</p>

      <p><strong>My Sweet Lord: The Hare Krishna Movement. </strong></p>
      <p>Knott, K. (1986) Wellingborough: Aquarian Press.</p>
      <p>&nbsp;</p>
      <p><strong>Hare Krishna Transformed.</strong></p>
      <p>Rochford, E.B. (2007) New York: New York University Press.</p><br /></td>
  </tr>
  <tr>

    <td valign="top"><p>Public liability insurance:</p></td>
    <td valign="top"><p>Yes</p></td>
  </tr>
</table>
<p>&nbsp;</p>
<!-- end .contenttext --></div>
<!-- end #profile2 --></div>

<!-- end #profiles --></div>
<!-- end .content --></div>
  <div class="footer">

  <div class="logobox"><a href="http://www.bathspa.ac.uk/" target="_blank"><img src="images/bsu_logo.jpg"/></a><a href="http://www.prs.heacademy.ac.uk/index.html" target="_blank"><img src="images/scprs_logo.jpg"/></a></div>  
  <p><a href="index.html">Home</a> | <a href="About.html">About Us</a> | <a href="research.html">Research</a> | <a href="resources.html">Resources</a> | <a href="links.html">Links</a> | <a href="contact.html">Contact Us</a></p>

   	<p><br/><a href="contact.html#disclaimer">Disclaimer</a> | ┬® Copyright Bath Spa University 2010</p><div class="clearfloat"></div>
    <!-- end .footer --></div>
<!-- end .container --></div>
<!-- end .wrapper --></div>

</body>
</html>

gavinwilshen · Fri Feb 18, 2011 12:14 pm

Hilde,

Thank you so much for your generous help.

Your contribution and your support to developers using Highslide is unique and very much appreciated.

Kind Regards,
Gavin, Bristol UK

gavinwilshen · Fri Feb 25, 2011 4:39 pm

Hi again,

After amending my code as suggested the gallery's position no longer changes and I have tried to follow your advice closely but now I am now having a new issue. At present the 2nd and 3rd galleries (which are hidden on separate panels) will not appear at all when you click on the respective links.

These links are now housed in the sidebar, the idea being that when you click a profile name from the list, the respective panel appears with a new gallery and profile information. I know the show/hide script is working because it changes the profile information but not the gallery? Please see: http://gavinwilshen.com/community.html

I know this is probably above and beyond your remit but any advice or help you can give me would be greatly received.

Many, many thanks,
Gavin

RoadRash · Mon Feb 28, 2011 12:41 am

Highslide isnÔÇÖt really optimized for this type of use since the galleries floats on top of the page (and on top of the panels), but you can try to replace this part in the head section:

Code: Select all

hs.graphicsDir = 'highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
hs.expandDuration = 0;
hs.allowSimultaneousLoading = true; // Necessary for loading both galleries

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 3500,
	repeat: true,
	useControls: false
});

// Options for the in-page items for gallery 1
var inPageOptions = {
	slideshowGroup: 'group1', // Each slideshow needs its own slideshowGroup to stay separated
	outlineType: null,
	allowSizeReduction: false,
	wrapperClassName: 'in-page controls-in-heading',
	useBox: true,
	width: 600,
	height: 400,
	targetX: 'gallery-area 0px',
	targetY: 'gallery-area 0px',
	//captionEval: 'this.thumb.alt',
	//numberPosition: 'caption',
	autoplay: true
};

// Options for the in-page items for the second gallery
var inPageOptions2 = {
   slideshowGroup: 'group2', // Each slideshow needs its own slideshowGroup to stay separated
   outlineType: null,
   allowSizeReduction: false,
   wrapperClassName: 'in-page controls-in-heading',
   useBox: true,
   width: 600,
   height: 400,
   targetX: 'gallery-area 0',
   targetY: 'gallery-area 0',
   //captionEval: 'this.thumb.alt',
   //numberPosition: 'caption',
   autoplay: true
};

// Options for the in-page items for the third gallery
var inPageOptions3 = {
   slideshowGroup: 'group3', // Each slideshow needs its own slideshowGroup to stay separated
   outlineType: null,
   allowSizeReduction: false,
   wrapperClassName: 'in-page controls-in-heading',
   useBox: true,
   width: 600,
   height: 400,
   targetX: 'gallery-area 0',
   targetY: 'gallery-area 0',
   //captionEval: 'this.thumb.alt',
   //numberPosition: 'caption',
   autoplay: true
};

// Open the first thumb on page load - note that the id for the first anchor for both galleries are added
hs.addEventListener(window, 'load', function() {
   document.getElementById('thumb1').onclick();
   document.getElementById('thumb2').onclick();
   document.getElementById('thumb3').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, false);
			exp.justify(y, false);

			// set new left and top to wrapper and outline
			exp.moveTo(x.pos, y.pos);
		}
	}
});

With this:

Code: Select all

hs.graphicsDir = 'highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.restoreCursor = null;
hs.lang.restoreTitle = 'Click for next image';
hs.expandDuration = 0;
hs.restoreDuration = 0;
hs.allowMultipleInstances = false;

// Add the slideshow providing the controlbar and the thumbstrip
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 3500,
	repeat: true,
	useControls: false
});

// Options for the in-page items for gallery 1
var inPageOptions = {
	slideshowGroup: 'group1', // Each slideshow needs its own slideshowGroup to stay separated
	outlineType: null,
	allowSizeReduction: false,
	wrapperClassName: 'in-page controls-in-heading',
	useBox: true,
	width: 600,
	height: 400,
	targetX: 'gallery-area 0',
	targetY: 'gallery-area 0',
	//captionEval: 'this.thumb.alt',
	//numberPosition: 'caption',
	autoplay: true
};

// Options for the in-page items for the second gallery
var inPageOptions2 = {
   slideshowGroup: 'group2', // Each slideshow needs its own slideshowGroup to stay separated
   outlineType: null,
   allowSizeReduction: false,
   wrapperClassName: 'in-page controls-in-heading',
   useBox: true,
   width: 600,
   height: 400,
   targetX: 'gallery-area 0',
   targetY: 'gallery-area 0',
   //captionEval: 'this.thumb.alt',
   //numberPosition: 'caption',
   autoplay: true
};

// Options for the in-page items for the third gallery
var inPageOptions3 = {
   slideshowGroup: 'group3', // Each slideshow needs its own slideshowGroup to stay separated
   outlineType: null,
   allowSizeReduction: false,
   wrapperClassName: 'in-page controls-in-heading',
   useBox: true,
   width: 600,
   height: 400,
   targetX: 'gallery-area 0',
   targetY: 'gallery-area 0',
   //captionEval: 'this.thumb.alt',
   //numberPosition: 'caption',
   autoplay: true
};

// Open the first thumb on page load - note that the id for the first anchor for both galleries are added
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();
}

// Prevent to close the galleries from ESC key
hs.onKeyDown = function (sender, e) {
	if( e.keyCode == 27 ) 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, false);
			exp.justify(y, false);

			// set new left and top to wrapper and outline
			exp.moveTo(x.pos, y.pos);
		}
	}
});

And this part in the body section:

Code: Select all

<ul class="nav">
      
      <li><a href="#" onclick="showhide('profile1'); return(false);"><div class="thumbnail"><img src="images/_Slideshow/_community/bhaktivedanta/thumb.jpg"></div>
      <div class="thumbtext">
      <h4>Bhaktivedanta Manor</h4><br/>

      <p><strong>International Society for Krishna Conciousness</strong></p><p>Watford, Herts UK</p><p>www.ies.iskcon.com</p></div>
      <div class="clearfloat"></div></a></li>
      
      <li><a href="#" onclick="showhide('profile2'); return(false);"><div class="thumbnail"><img src="images/_Slideshow/_community/cmng/thumb.jpg"></div>
      <div class="thumbtext">
        <h4>Community of the Many Names of God</h4><br/>
      <p><strong>Skandavale</strong></p><p>Camarthen UK</p><p>www.skandavale.org</p></div>

      <div class="clearfloat"></div></a></li>
      
      <li><a href="#" onclick="showhide('profile3'); return(false);"><div class="thumbnail"><img src="images/_Slideshow/_community/dharmavajra/thumb.jpg"></div>
      <div class="thumbtext">
        <h4>Dharmavajra</h4><h4>Buddhist Centre</h4><br/>
      <p>Swansea UK</p><p>www.meditationinwales.org</p></div>
      <div class="clearfloat"></div></a></li>
      
      <li><a href="#"><div class="thumbnail"><img src="images/3.jpg"></div>

      <div class="thumbtext">
        <h4>Retreat of the Week<br/></h4>
      <p><br />Our reviews of the best study destinations on offer. Read More...</p></div>
      <div class="clearfloat"></div></a></li>
      
      <li><a href="#"><div class="thumbnail"><img src="images/tolerance.jpg"></div>
      <div class="thumbtext">
        <h4>International Day For Tolerance Event<br/></h4>

      <p><br />
      UNESCO events happening around the UK. Read More...</p></div>
      <div class="clearfloat"></div></a></li>
      
    </ul>

With this:

Code: Select all

<ul class="nav">
      
      <li><a href="javascript:;" onclick="showhide('profile1'); [hilight]document.getElementById('thumb1').onclick();[/hilight] return(false);"><div class="thumbnail"><img src="images/_Slideshow/_community/bhaktivedanta/thumb.jpg"></div>
      <div class="thumbtext">
      <h4>Bhaktivedanta Manor</h4><br/>

      <p><strong>International Society for Krishna Conciousness</strong></p><p>Watford, Herts UK</p><p>www.ies.iskcon.com</p></div>
      <div class="clearfloat"></div></a></li>
      
      <li><a href="javascript:;" onclick="showhide('profile2'); [hilight]document.getElementById('thumb2').onclick();[/hilight] return(false);"><div class="thumbnail"><img src="images/_Slideshow/_community/cmng/thumb.jpg"></div>
      <div class="thumbtext">
        <h4>Community of the Many Names of God</h4><br/>
      <p><strong>Skandavale</strong></p><p>Camarthen UK</p><p>www.skandavale.org</p></div>

      <div class="clearfloat"></div></a></li>
      
      <li><a href="javascript:;" onclick="showhide('profile3'); [hilight]document.getElementById('thumb3').onclick();[/hilight] return(false);"><div class="thumbnail"><img src="images/_Slideshow/_community/dharmavajra/thumb.jpg"></div>
      <div class="thumbtext">
        <h4>Dharmavajra</h4><h4>Buddhist Centre</h4><br/>
      <p>Swansea UK</p><p>www.meditationinwales.org</p></div>
      <div class="clearfloat"></div></a></li>
      
      <li><a href="#"><div class="thumbnail"><img src="images/3.jpg"></div>

      <div class="thumbtext">
        <h4>Retreat of the Week<br/></h4>
      <p><br />Our reviews of the best study destinations on offer. Read More...</p></div>
      <div class="clearfloat"></div></a></li>
      
      <li><a href="#"><div class="thumbnail"><img src="images/tolerance.jpg"></div>
      <div class="thumbtext">
        <h4>International Day For Tolerance Event<br/></h4>

      <p><br />
      UNESCO events happening around the UK. Read More...</p></div>
      <div class="clearfloat"></div></a></li>
      
    </ul>

If youÔÇÖre not satisfied with the result, the jQuery Cycle plugin will probably do a better job with this than Highslide: http://jquery.malsup.com/cycle/ (see the fade effect)

gavinwilshen · Tue Mar 08, 2011 10:39 pm

That seems to work fine! Thank you again for your generosity. I will definitely credit highslide on the site in order to try and repay my debt to you. Regards and keep up the fantastic work, Gavin.

Images jumping out of div!

Images jumping out of div!

Re: Images jumping out of div!

Re: Images jumping out of div!

Re: Images jumping out of div!

Re: Images jumping out of div!

Re: Images jumping out of div!