User avatar
torstein.honsi
Site Admin
Posts: 9210
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

Tue Jun 03, 2008 7:51 am

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:

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

Popping up an item by specific URL

Tue Jun 30, 2009 7:30 am

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 Solutions

Return to “Highslide FAQ”