Highslide JS API Reference

Close Move
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.
Resize

Object: hs

Variables

Functions

Events

Object: hs.Expander

Variables

Functions

Events



hs.targetX

Positions the expanded image or HTML content exactly above a given element on your page.
By using the hs.targetX and hs.targetY properties you gain full control on the positioning of the expanded content. The target value is the id of some element in the document, and you can place this element anywhere on the page using regular HTML/CSS positioning. Then, by setting hs.targetX = 'my-element' and hs.targetY = 'my-element' the expander is positioned exactly above it. By setting for example hs.targetX = 'my-content-element' and hs.targetY = null you place the expander above the content area and keep the left menu free. The target settings can be expanded by a pixel value. hs.targetX = 'my-element 20px' means the expander is placed 20px to the right of the target, and hs.targetX = 'my-element -20px' places it to the left. These properties can also be applied to each single expander in the second argument of hs.expand. These properties override hs.align and hs.anchor.

Details

Requires positioning
Type string
Default value null
Overrideable inline Yes

Example

General setting to all expanders

1) In these examples, 'my-target' is the div containing the main text above.

<div id="my-target">
   [...]
</div>

2) Put this in the head section of your page. This affects all expanders on your page.

<script type="text/javascript">
   hs.targetX = 'my-target 20px'; // 20px to the right of the target
   hs.targetY = null; // follow the scrolling
</script>

The effect:

Specifically setting it to a single expander

<a class="highslide" href="full1.jpg" onclick="return hs.expand(this, 
      { targetX: 'my-target 20px', targetY: null })">
   <img src="../samples/thumb1.jpg" alt=""/>
</a>
targetX = 'my-target'
targetY = 'my-target'
targetX = 'my-target -200px'
targetY = 'my-target 200px'

See also

New, Edit