Code: Select all
<!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</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-with-html.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 = 'rounded-white';
hs.wrapperClassName = 'draggable-header';
hs.dimmingOpacity = 0.75;
</script>
<style type="text/css">
.highslide-dimming {
background: black;
}
</style>
</head>
<body>
<div>
<!--
3) This is how you define the link opening the iframe popup.
-->
<a href="http://link.brightcove.com/services/player/bcpid388229865001?bctid=359356609001"
onclick="return hs.htmlExpand(this, {
contentId: 'my-content',
objectType: 'iframe',
objectWidth: 700,
objectHeight: 900} )"
class="highslide">
Content in iframe
</a>
</div>
</body>
</html>
Code: Select all
<script type="text/javascript" src="../highslide/highslide-with-html.js"></script>
Code: Select all
<script type="text/javascript" src="../highslide/[hilight]highslide-full.js[/hilight]"></script>
Code: Select all
hs.align = 'center';
hs.dimmingOpacity = 0.7;
That did it! Thanks for the help!EarlyOut wrote:You haven't told it to use any dimming, or to center the expanded image:
Code: Select all
hs.align = 'center'; hs.dimmingOpacity = 0.7;