WordPress HighSlide JS Plugin

Highslide JS is a brilliant thumbnail viewer written in javascript. WP-Highslide is a wordpress plugin that allows you to easily use Highslide by automatically inserting the necessary javascript into your posts or pages. The plugin makes uses of a wordpress quicktag to make the insertion process painless.

Also, for users looking to customize highslide, this plugin gives you the flexibility of editing the javascript object settings, setting global options through the options page, or overriding the global options for indivdiual images, all without having dig through the plugin code. [See FAQ for more info]


Corpse Bride Wedding Cake New Jersey
Previous Next Close
Corpse Bride Wedding Cake
Topsy Turvy
Previous Next Close
Topsy Turvy Cake NJ
Wedding Cake
Previous Next Close
Wedding Cake from www.pinkcakebox.com
Billiard Cupcakes
Previous Next Close
Billiard Cupcakes from www.pinkcakebox.com

Other Examples

See the plug-in in action at our wedding cake gallery, novelty cake gallery or Gourmet Cupcake Gallery or Gourmet Cookie Gallery

Check out Sébastien use of this plugin on his photo blog.

Larry Hnetka gives a review and demonstration of the highslide plugin on his blog.

Some cool graphic design work by Doug Nelson

has put together a short video of some of highslides features.


THIS PLUGIN REQUIRES Highslide JS from Torstein Hons which is YOU MUST DOWNLOAD SEPARATELY. If you are running a COMMERCIAL site you must pay for Highslide JS. Current version of plugin has been tested with Highslide 3.3.3

Note, as of version 1.23, WP-Highslide is compatible with all 2.X versions up to 2.6.2.

  1. Unzip contents of zip file to your plugins folder, usually ‘wp-content/plugins/’. It should create a highslide folder underneath the plugins folder.
  2. Download Highslide JS and copy highslide.js to
    the new highslide folder created under your plugins folder.
  3. Activate the plugin in wordpress under plugins. Look for WP-Highslide.
  4. Check ‘WP-Highslide’ under options to customize the javascript for highslide
  5. Check Highslide JS site for further customization options

Note: You download Highslide JS script in order for this plug-in to properly work.


Current version of WordPress HighSlide JS plug-in is 1.28

Change Log


  • Initial Release from Beta


  • Fixed highslide folder structure so that outlines are properly shown.
  • Fixed CSS issue in Firefox
  • Adjusted CSS to properly center caption and right justify close button.


  • Fixed css issue with caption. Thanks to Russ Anema for the fix


  • Adding global settings options to display caption box, close link and next previous links. Also added ability to override global settings using the <highslide> tag.


  • Fixed thumbid generation to ensure compatibility with RSS readers. Thanks to Sébastien for pointing out an issue with the thumbid generation


  • Fixed CSS issue in IE6. CSS was generating a 404 on cursor download because of a CSS parsing issue.


  • This version is compatible with wordpress 2.1. Fixed issue with quicktags not appearing in editor.


  • This version no longer includes highslide.js as part of the zip file download. This component must be downloaded separately. This was done to ensure users get the latest version of highslide.

1.25 – August 14, 2007

  • Folder structure updated to match new folder structure of latest version of highslide. Also removed windows.onload for preloading images. That is not taken care of internally by highslide.js

1.26 – Sept 20, 2007

  • Fixed issue with javascript close button not working correctly

1.27 – Oct 2, 2007

  • Removed extra } from javascript. Thanks to Max for catching this.

1.28 – Dec 19, 2007

  • Upgraded CSS so it’s compatible with latest version of Highslide 3.3.3. Fullexpand.gif has changed in this version.

Frequently Asked Questions

= Where is my highslide quicktag? =
Unfortunately quicktags do not show up in Visual Rich Editor mode. You have a few alternatives. If you are using WordPress 2.1, simply switch over to code view and the Highslide quicktag will be available. If you are using WordPress 2.0.x then you can disable Visual Rich Editor mode or
you can create the tag yourself by using the special <highslide> tag. This tag takes 4 attributes:

This is should be the path to the image you want displayed when the user clicks on the thumbnail

This should be the path to the THUMBNAIL image you want displayed initially.

This is the copy that will appear in the ALT tag description. Filling this in is good practice for search engines.

The caption displayed directly under the large image when the user clicks on the thumbnail

Example Code

<highslide image="/path/to/myimage.jpg" thumbnail="/path/to/thumbnail.jpg" altdesc="" captiontext="" />

Future versions we’ll look to embed a button in the visual rich editor similar to how Viper’s Video Quicktags did.

= Do I have to pay for Highslide JS? =

Highslide JS is licensed under a Creative Commons Attribution-NonCommercial 2.5 License. If you are a non-commercial site the script is free. It costs $30 for each commercial domain

= How can I tell if it’s working? =

Try creating a test post and check to see if the HIGHSLIDE quicktag is available. Click on the tag and follow the prompts to insert your first image.

= When using the HIGHSLIDE quicktag what do all the prompts mean? =

The quicktag will prompt you for the following information:

Prompt 1: Enter path to large Image
This is should be the path to the image you want displayed when the user clicks on the thumbnail

Example: /images/mylargeimage.jpg

Prompt 2: Enter path to thumbnail image
This should be the path to the THUMBNAIL image you want displayed initially.

Example: /images/mythumbnailimage.jpg

Prompt 3: Enter the Alternate Description of the image
This is the copy that will appear in the ALT tag description. Filling this in is good practice for search engines.

Prompt 4: Enter the Caption for the image
The caption displayed directly under the large image when the user clicks on the thumbnail

= When I look at the generated code it is surrounded by a <p> tag. How can I remove that <p> tag? =

This is a “feature” of wordpress. Here is the generated HTML required for highslide. Notice the <p> tags that surround it:

<p><a href="http://www.pinkcakebox.com/images/cake200.jpg" class="highslide"  onclick="return hs.expand(this)">

To remove the <p> tag open your default-filters.php and comment out the following line:

add_filter(‘the_content’, ‘wpautop’);

Alternatively there are plugins you can use to disable this feature.

= What version of Highslide JS does this plugin support? =

As of August 14th this plugin works has been tested with version 3.2.3

= Can I still customize Highslide JS using your plugin? =
The plugin was designed to give a high level of flexibility in customizing Highslide. In the WP-HIGHSLIDE options page there are global settings that allow you to toggle off/on the highslide caption box, close link, or next/previous links:

Additionally, you can override the global settings for individual images by using override flags in the <highslide> tag. For example, to override the Show Caption Box:

<highslide image="http://www.pinkcakebox.com/images/cake205.jpg" thumbnail="http://www.pinkcakebox.com/images/cake205-circle.jpg" altdesc="" captiontext="null" show_caption="y"  />

Tags that are available

Flag Usage Description
show_caption show_caption=”y”
Toggle on/off Highslide Caption
show_close show_close=”y”
Toggle on/off Highslide Close Link
show_prv_next show_prv_next=”y”
Toggle on/off Highslide Next/Previous Links


Russ – tester
Torstein Honsi – highslide js creator
Roel Meurders – FLV code that I used as a basis for highlslide


If you use this script and find it worthwhile please link back to our main site. While we enjoy releasing scripts to the general community, we also look to benefit by drawing more traffic to our sites. Feel free to link back however you want – here is a guideline:

J J. Heap & Son – Manufacturers and distributors of a wide variety of labor saving devices and factory automation technologies including dye sublimation equipment, Heat transfer machines, Fusing Machines, So-Fast Cutting Equipment, Material Handling Equipment and an inventory of rebuilt machines.

Pink Cake Box – Our New Jersey Wedding Cake Shop that specializes in custom made wedding cakes, novelty cakes, cupcakes, wedding cupcake stands and specialty cookies.