Highslide for popup HTML

[Martin_K]

Got it working, decided to go for highslide-full.packed.js in the end, as I suddenly decided an iframe would be better.

Code: Select all

<script type="text/javascript" src="{ROOT_PATH}highslide/highslide-full.packed.js"></script>
<link href="{ROOT_PATH}highslide/highslide.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="{ROOT_PATH}highslide/highslide-ie6.css" />
<![endif]-->

<script type="text/javascript">
	hs.graphicsDir = '{ROOT_PATH}highslide/graphics/';
	hs.outlineType = 'rounded-white';
	hs.wrapperClassName = 'draggable-header';
	hs.creditsPosition = 'bottom right';
</script>

<script type="text/javascript">
// <![CDATA[
hs.graphicsDir = '{ROOT_PATH}highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.fadeInOut = true;
hs.dimmingOpacity = 0.75;

// Add the controlbar
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		opacity: 0.75,
		position: 'bottom center',
		hideOnMouseOut: true
	}
});
// ]]>
</script>

Not sure what <![CDATA[ means and whether the script I inserted will 'interfere' with Stoker's immediately below it.

If you want to change the width of an individual iframe then you need to do something like this:

Code: Select all

<li> &bull; <a href="../twx/tiki-print.php?page=Sign%20Up%20Agreement" onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: '1000' } )"> Rules </a>
</li>

not sure how to make it go to full width.

[Martin_K]

If you use the ajax jquery for highslide you can specify a specific id to fetch: http://highslide.com/examples/ajax.html

[Martin_K]

I decided to switch to Pretty Photo. It is easy to understand than highslide, though has fewer options. I prefer its behaviour in that it doesn't scroll with the page beneath when you reach the bottom of the container.