All Highslide JS (by Torstein Hønsi) related WordPress plugins are focused on displaying images. In this article I’ll cover implementation of html popups in posts and pages.
First of all download, install, and activate HighSlide4WP plugin. There is no word in its description about html popups but when you look into contents of this plugin, you’ll find that it uses highslide-with-html.packed.js file. Bingo! Our framework is ready. We have not only thumbnails viewer but html popups as well. Below are two examples:
| Thumbnail Viewer | HTML Popup |
|---|---|
 CD Cover |
To see HighSlide popup window click here.
<div>
<div id="highslide-fancy-title">My Popup Implementation</div>
<p style="text-align: justify;">
I've created a new folder /wp-content/help to store popup files (I use .php files). The file you are reading now is /wp-content/help/help2.php. Below is code of example 2:
</p>
<blockquote>
<a onclick="return hs.htmlExpand(this, { objectType: 'ajax', align: 'center' } )" href="/wp-content/help/help2.php">here</a>
</blockquote>
<p>It's easy, isn't it?</p>
</div>
|
Explanation of Thumbnail Viewer example is beyond scope of this article (refer to Highslide4WP documentation). Implementation of second example is documented in the popup itself.
That’s all, folks.
After following instructions above you’ve probably noticed that you don’t have all features of Highslide JS available. How to get it all will be explained in HTML popups in Highslide4WP – 2.
