Custom border images in the Highslide Editor

Highslide is a Javascript library used for creating "lightboxes", or Javascript-based popups, for your website. The Highslide website has an editor that you can use to customize the look and feel of your lightbox. It's actually pretty powerful, allowing you to customize everything from the popup animation to the font size of the image caption. Once you've customized the lightbox to your liking, you can view the HTML, CSS, and Javascript code required to make it work on your own website.

However, if your lightbox has the "graphic outline" setting enabled (this setting can be accessed by clicking the "Border and outline" button on the "Style" tab), then the hs.outlineType configuration variable in the Javascript code will be set to custom.

The "custom" outline type will not work with your own website.

This is not an outline type that comes with the Highslide installation, so if you try using this on your own website, it won't work. What the Highslide Editor does behind the scenes, is make an AJAX call to a custom.php script, which dynamically generates a border image based on the settings you've defined in the editor. As far as I can tell, the editor doesn't provide a way for you to download this image, so you have to get the URL to the custom.php script yourself, and download the image that way. Here's how to do that using Chrome:

1. Click the Wrench button, then go to "Tools > Developer Tools". This opens a window that shows additional information about the current browser tab.

   
   Opening the "Developer Tools" window in Chrome

2. Click the "Network" button at the top of the screen. This screen displays all HTTP requests that the browser tab makes, including the images that it downloads and the AJAX requests that it makes. When you first open this screen, it will be blank. But if you refresh the Highslide Editor webpage, the Network screen will flood with all the requests the browser has to make in order to load the page.

   
   The "Network" screen shows all the HTTP requests that were made.

3. Now, click the sample image in the Highslide Editor so that it expands into a popup. This causes the browser to make an AJAX request to the custom.php script (for some reason, it makes the same request twice).

   
   An AJAX request to the custom.php script is made when the sample image is clicked.

4. Right-click on the custom.php request in the Network screen and select "Open Link In New Tab". This will open the border image in a new browser tab, allowing you to save it to your local Highslide installation.

   
   Load the image in a new tab.

5. Finally, save the border image to the "graphics/outlines" folder of your Highslide installation. Whatever name you give the file (minus the file extension) will be what you'll use in the hs.outlineType setting. For example:

   //uses the "graphics/outlines/rounded-corners.png" file
   hs.outlineType = 'rounded-corners';