How to use Highslide JS with WordPress. Highslide JS is a better LightBox. Which can be used for example to achieve the well known image-zoom effect and a lot of other things.
Intro to this FAQ
There are many other scripts like this one: LightBox, FancyBox, FancyZoom, ... LightBox is the most known one but that doesn’t always mean best. I found something that’s even better and easier to use: Highslide JS.
If you don’t know what LightBox and Highslide are have a look at the Examples you find on the Demo pages of this FAQ.
Important notes: If you want to use Highslide for a personal website, a school site, your family's photo album or a non-profit organisation you don't need the author's permission, just go on and use Highslide. It’s free.
If you want to use Highslide for a commercial website, you need to get the author's permission by filling in the domain name in the "Buy now" page on the highslide.com website and paying the fee of 29$ for a single site or 179$ for unlimited sites.
Instructions on using Highslide JS (visual Highslide Editor)
There are a lot of different styles to be found on the Highslide JS website so here I will teach you a general way for you to be able to add any style you want to your website.
1. Go to http://highslide.com/editor/ and on the left side you will always find the options, on the right side the preview for the options you specify.
2. Choose the type of gallery you would like to use from Examples menu. I will use "Gallery: Mini gallery" for the example here.
3. Click on Gallery, Image manager, Select files to upload and choose the files you what to use for the Highslide gallery. Upload now!
￼￼4. Define the size of the thumbnail and large image option. Update uploaded images. By double-clicking add a caption displaying under the images you can enter a caption for each image. Drag&drop to change the order the images display in.
5. Once you're done click OK. You will always be able to change the caption or add more images later on by editing the code you will get at the end.
6. You can set various options for the controls, the numbers, whether you want a thumbstrip or not and for the behavior (settings of the slideshow, wether you what the slideshow to play automatically or not etc).
￼7. Don't mind about the HTML tab unless you what to open a window displaying HTML content and proceed to Style.
Click Thumbnail border if you'd like to change the settings. Under Popup styles, Background you can define the color of the caption-background. By clicking on Border and outline you can define the color of the border surrounding the image when it pops up. You can set the width of the Image CSS border to 0 if you want for you to only define the color of the Graphic outline and its width. You can even define the corner radius. As always the colors just type in the color's six digit code. ￼See this for help.
Under Dimming options you can define what color the page should turn to when the image pops up, the opacity (0.00-1.00 the higher the less readable the content of the page in the background). Fading duration, how long it should take for the page to be dimmed.
￼8. Go to Behavior. Popup size and alignment, I think Center is best. I wouldn't allow multiple popups at the same time (uncheck). I would enable block right-click (check)
9. Go to Overlay. Under Caption you can define the source of the caption. I would recommend Subsequent div since it allows you to enter basic HTML codes such as a link code if you'd like to add a link to the caption of a picture or to format/style the text in the caption (perhaps with a
10. Once you're done configuring your highslide presentation hit Publish.
If you're using Highslide on a Non-commercial website it is free of charge. If you're using Highslide yon a Commercial website you have to pay 29$. A commercial website is any business related website or any website with the purpose of generating money (Non-profit excluded). I really urge you to respect these terms.
Once you agreed to the terms you will see a window popping up.
In Step 1 click on Download a zip archive and you will get a folder named highslide-custom
Copy the codes you find in Step 2 and in Step 3 into a text editor (if you couldn't copy the codes here don't worry, you will find them in the folder you downloaded at step 1, just open the highslide-custom-example.html file in TextWrangler).
11. Open the highslide.config.js file you find in the highslide folder inside the highslide-custom folder in TextWrangler and towards the top where it says
hs.graphicsDir = 'highslide/graphics/';
add a slash / at the beginning of the path
hs.graphicsDir = '/highslide/graphics/';
Once you added the slash upload the entire highslide folder you find in the highslide-custom folder to the root of your server/website (What is the root of a server/website?)
12. Now we need to make some minor changes to the code you got from Highslide.
In the first part of the code
<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />
Add a slash / in front of each path to make them absolute paths like this
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />
Same for each image code in the second part of the code (two slashes to be added per image)
<a id="thumb1" href="/highslide/images/large/IMG_0662.JPG" class="highslide"
onclick="return hs.expand(this, config1 )">
<img src="/highslide/images/thumbs/IMG_0662.JPG" alt=""/>
<span class="highslide-caption">Ireland 2011</span>
13. Once you turned all the paths into absolute paths by adding a slash in front of them.
Copy the first and the second part and paste it into the page where you want the Highslide gallery to appear.
14. Publish the page and visit it to see if everything works.