Hi JB,
You have put all of the highslide code in the same place. Some of it should be between the head tags and some of it between the body tags. After clicking the Publish button in the Highslide Editor you get a window with 3 steps. Step 2 tells what to put between the head tags, and step 3 tells what to put between the body tags.
I just downloaded Freeway 5, and there are functions for putting code between the head tags and between the body tags.
Go to Page => HTML Markup ÔÇô you will see this window where you can choose where to put your code:
- screenshot_07.jpg (100.46 KiB) Viewed 7338 times
This is what you got from the Highslide editor:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Highslide JS - Custom Example</title>
<script type="text/javascript" src="highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
</head>
<body>
<h3>Gallery</h3>
<div class="highslide-gallery">
<ul>
<li>
<a href="highslide/images/large/graduateschoolofbusiness1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/graduateschoolofbusiness1.jpg" alt=""/>
</a>
<span class="highslide-caption">For Walton College/Graduate School of Business</span>
</li>
<li>
<a href="highslide/images/large/budgetext1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/budgetext1.jpg" alt=""/>
</a>
<span class="highslide-caption">For Budgetext Corporation</span>
</li>
<li>
<a href="highslide/images/large/lily1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/lily1.jpg" alt=""/>
</a>
<span class="highslide-caption">Lily, daughter of Tony and Heather</span>
</li>
<li>
<a href="highslide/images/large/sasha12.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/sasha12.jpg" alt=""/>
</a>
<span class="highslide-caption">Sasha's first day of Kindergarten</span>
</li>
<li>
<a href="highslide/images/large/budgetext3.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/budgetext3.jpg" alt=""/>
</a>
<span class="highslide-caption">For Budgetext Corporation</span>
</li>
<li>
<a href="highslide/images/large/lightening1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/lightening1.jpg" alt=""/>
</a>
<span class="highslide-caption">Light show in Kansas City</span>
</li>
<li>
<a href="highslide/images/large/waltonartscenter1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/waltonartscenter1.jpg" alt=""/>
</a>
<span class="highslide-caption">Walton Arts Center guidebook cover</span>
</li>
<li>
<a href="highslide/images/large/countrycreek1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/countrycreek1.jpg" alt=""/>
</a>
<span class="highslide-caption">For Counrty Creek Farms</span>
</li>
<li>
<a href="highslide/images/large/skinks1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/skinks1.jpg" alt=""/>
</a>
<span class="highslide-caption">A design I made with several images of lizards we hatched</span>
</li>
<li>
<a href="highslide/images/large/fishingspider1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/fishingspider1.jpg" alt=""/>
</a>
<span class="highslide-caption">Dark Fishing spider</span>
</li>
<li>
<a href="highslide/images/large/spinedmicrathena1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/spinedmicrathena1.jpg" alt=""/>
</a>
<span class="highslide-caption">Spined micrathena</span>
</li>
<li>
<a href="highslide/images/large/supercell1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/supercell1.jpg" alt=""/>
</a>
<span class="highslide-caption">Missouri Super-cell</span>
</li>
<li>
<a href="highslide/images/large/washingtonregional2.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/washingtonregional2.jpg" alt=""/>
</a>
<span class="highslide-caption">For Washington Regional</span>
</li>
<li>
<a href="highslide/images/large/washingtonregional1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/washingtonregional1.jpg" alt=""/>
</a>
<span class="highslide-caption">For Washington Regional</span>
</li>
<li>
<a href="highslide/images/large/brownrecluse1.jpg" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="highslide/images/thumbs/brownrecluse1.jpg" alt=""/>
</a>
<span class="highslide-caption">Brown Recluse</span>
</li>
</ul>
<div style="clear:both"></div></div>
</body>
</html>
The code marked red should be inserted before the closing head tag ÔÇô choose ÔÇÿInsert: Before </head>ÔÇÖ in the Markup window.
The code marked green should be inserted after the opening body tag ÔÇô choose ÔÇÿInsert: After <body>ÔÇÖ.
The code in black should not be inserted anywhere.
And now we need to add the new dimmer logic:
Go to Page => HTML Markup and choose ÔÇÿInsert: Before </head>ÔÇÖ. You will now see the already inserted highslide stuff.
Paste this code below the existing code:
Code: Select all
<script type="text/javascript">
/*
FIXED DIMMER MOD
Todo in highslide.js:
* Remove all calls to setDimmerSize
* Combine creating style element with existing code
*/
hs.dim = function(exp) {
function fix(prop) {
return 'expression( ( ( ignoreMe = document.documentElement.'+ prop +
' ? document.documentElement.'+ prop +' : document.body.'+ prop +' ) ) + \'px\' );';
}
if (!hs.dimmer) {
var sel = '.highslide-dimming',
dec = (hs.ieLt7 || (hs.ie && document.compatMode == 'BackCompat')) ?
'position: absolute; '+
'left:'+ fix('scrollLeft') +
'top:'+ fix('scrollTop') +
'width:'+ fix('clientWidth') +
'height:'+ fix('clientHeight') :
'position: fixed; width: 100%; height: 100%; left: 0; top: 0';
var style = hs.createElement('style', { type: 'text/css' }, null,
document.getElementsByTagName('HEAD')[0]);
if (!hs.ie) {
style.appendChild(document.createTextNode(sel + " {" + dec + "}"));
} else {
var last = document.styleSheets[document.styleSheets.length - 1];
if (typeof(last.addRule) == "object") last.addRule(sel, dec);
}
hs.dimmer = hs.createElement ('div',
{
className: 'highslide-dimming',
owner: '',
onclick: function() {
/**/
hs.close();
}
}, {
visibility: 'visible',
opacity: 0
}, hs.container, true);
}
hs.dimmer.style.display = '';
hs.dimmer.owner += '|'+ exp.key;
if (hs.geckoMac && hs.dimmingGeckoFix)
hs.setStyles(hs.dimmer, {
background: 'url('+ hs.graphicsDir + 'geckodimmer.png)',
opacity: 1
});
else
hs.animate(hs.dimmer, { opacity: exp.dimmingOpacity }, hs.dimmingDuration);
}
hs.undim = function(key) {
if (!hs.dimmer) return;
if (typeof key != 'undefined') hs.dimmer.owner = hs.dimmer.owner.replace('|'+ key, '');
if (
(typeof key != 'undefined' && hs.dimmer.owner != '')
|| (hs.upcoming && hs.getParam(hs.upcoming, 'dimmingOpacity'))
) return;
if (hs.geckoMac && hs.dimmingGeckoFix) hs.dimmer.style.display = 'none';
else hs.animate(hs.dimmer, { opacity: 0 }, hs.dimmingDuration, null, function() {
hs.dimmer.style.display = 'none';
});
}
hs.setDimmerSize = function() {};
</script>
I just tested this step-by-step in Freeway, so it should work. (You need to remove all highslide stuff in your page before you start all over.)