How can I make the image or HTML content pop up on page load

[torstein.honsi]

The easiest way to have your content pop up on page load is to run hs.expand or hs.htmlExpand directly with the image or file path defined through hs.src.

Code: Select all

<script type="text/javascript">
hs.addEventListener(window, "load", function() {
	hs.expand(null, {
		src: 'image.jpg'
	});
});
</script>

Running hs.expand like this without an anchor works in Highslide since version 4.0.7.


A second method - if you want to open an existing anchor - is to assign an id to it then virtually click it.

1) Define the opening anchor like you normally would, and assign an id to it.

Image expander:

Code: Select all

<a id="autoload" href="img.jpg" onclick="return hs.expand(this)">

Alternatively, a HTML expander:

Code: Select all

<a id="autoload" href="page.htm" onclick="return htmlExpand(this, { objectType: AJAX })">

2) In the head section of your page, or in a separate JavaScript file, define an event handler for the page onload event. This code must be placed after the <script> tag where the highslide.js file is included. Highslide has a built-in function called addEventListener that you should use to prevent crashes with other onload handlers.

Code: Select all

<script type="text/javascript">
hs.addEventListener(window, "load", function() {
	// click the element virtually:
	document.getElementById("autoload").onclick();
});
</script>

Demos:

• automatically open an image after page load
• open an existing image anchor after page load
• automatically open HTLM content after page load
• automatically open HTML content from a hidden div
• automatically open a link to a HTML page

[torstein.honsi]

In galleries, you may want to be able to have a specific URL for each single image. First, apply id's to all the thumbnails:

Code: Select all

<a id="thumb1" href="../images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="../images/gallery1.thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" />
</a>

<a id="thumb2" href="../images/gallery2.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="../images/gallery2.thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" /></a>

<a id="thumb3" href="../images/gallery3.jpg" class="highslide" onclick="return hs.expand(this)">
	<img src="../images/gallery3.thumb.jpg" alt="Highslide JS"
		title="Click to enlarge" /></a>

Next, add this code to a script block in the head of your page, or to a separate .js file:

Code: Select all

// Open a specific thumbnail based on querystring input.
hs.addEventListener(window, "load", function() {
	// get the value of the autoload parameter
	var autoload = /[?&]autoload=([^&#]*)/.exec(window.location.href);
	// virtually click the anchor
	if (autoload) document.getElementById(autoload[1]).onclick();
});

Now each image has a specific URL in the form of http://www.domain.com/page.html?autoload=thumb1.

See this code live at

• www.highslide.com/studies/querystring.h ... oad=thumb1
• www.highslide.com/studies/querystring.h ... oad=thumb2
• www.highslide.com/studies/querystring.h ... oad=thumb3