It is currently Sun Nov 23, 2014 7:03 pm Advanced search

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

Frequently asked questions.

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

Postby torstein.honsi » Tue Jun 03, 2008 9: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>
User avatar
torstein.honsi
Site Admin
 
Posts: 9201
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway

Popping up an item by specific URL

Postby torstein.honsi » Tue Jun 30, 2009 9: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
User avatar
torstein.honsi
Site Admin
 
Posts: 9201
Joined: Thu Nov 09, 2006 1:22 pm
Location: Vik i Sogn, Norway


Return to Highslide FAQ

Who is online

Users browsing this forum: No registered users and 1 guest