torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

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

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:
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Popping up an item by specific URL

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
Torstein Hønsi
CTO, Founder
Highsoft

Return to “Highslide FAQ”