Highslide JS Base Fiddle - RoadRash

HTML

<script src="http://highslide.com/highslide/highslide-full.js"></script>
<link rel="stylesheet" href="http://highslide.com/highslide/highslide.css">
<div>
    <a onclick="return hs.htmlExpand(this, { objectType: 'iframe', headingText: 'This is the heading text...' } )" href="http://www.facebook.com" title="This is the caption...">
        Content in iframe
    </a>
</div>

CSS

.highslide-header {
    /* margin-bottom must be same as hs.captionOverlay.offsetY  */
    margin-bottom: 25px;
}

.highslide-caption {
    border: 5px solid red;
}
.highslide-header {
    /* margin-bottom must be same as hs.captionOverlay.offsetY  */
    margin-bottom: 25px;
}

JavaScript

// Place the highslide-caption below the highslide-header div

hs.graphicsDir = 'http://highslide.com/highslide/graphics/';
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'draggable-header'; 
hs.showCredits = false;

// settings for the caption
hs.captionEval = 'this.a.title';
hs.captionOverlay.position = 'top';
hs.captionOverlay.width = '100%';
// offsetY must be same as margin-bottom for .highslide-header in the CSS
hs.captionOverlay.offsetY = 25;