Highslide gallery

1. Download and prepare the Highslide files necessary for the gallery

image 1
image 1

Go to the Highslide Editor and create the look and feel you want for your gallery. You can create a custom setup, or you can use one of the predefined setups in the General tab. I’m using ‘Gallery: Horizontal thumbstrip, white style’.

[ see image 1 ]

Note: You don’t need to upload your own images in the Editor since we are going to use the WordPress Media Library to add the images.


image 2
image 2

There is one limitation: You can’t use galleries with one visible thumbnail like in ‘Gallery: Minigallery’ and ‘Gallery: Box with thumbstrip above image’. If you want to create a gallery with the same look as the two I mentioned, you need to go to the Gallery tab => Behaviour => Advanced button and set Visible thumbnails to All thumbs before you downloads the Highslide settings.

[ see image 2 ]


image 3
image 3

Important: If you want to use caption or heading for your images, you need to go to Overlays => Caption or Heading => choose Thumbnail’s alt

[ see image 3 ]


image 4
image 4

Click the Publish button when you are satisfied with your gallery.

[ see image 4 ]


image 5
image 5

Accept the license conditions in the popup.

Note: Highslide is free for non-commercial sites but if your site is commercial, you need to buy a Highslide license.

Download the provided zip archive in Step 1 and save it somewhere in your computer.

[ see image 5 ]


image 6
image 6

Unzip, open the highslide folder inside the highslide-custom folder and delete the sample-images folder and the sample-includes folder. (If you uploaded your own images to the Editor, you can also delete the images folder.)

[ see image 6 ]


image 7
image 7

Open highslide.config.js in a text editor. (e.g. Notepad – do NOT use Word or similar!)

You should see something similar to this. (The content of the file depends of the gallery setup.)

[ see image 7 ]


Find this line at the top:

hs.graphicsDir = 'highslide/graphics/';

Change the path to this if your WordPress installation is in the root of your web site:

hs.graphicsDir = 'http://www.your-domain.com/highslide/graphics/';

If WordPress isn’t installed in the root of your web site, you need to change the path to something like this:

hs.graphicsDir = 'http://www.your-domain.com/some-folder/highslide/graphics/';
image 8
image 8

Important: Replace your-domain.com with your own domain.

[ see image 8 ]


Find this line:

slideshowGroup: 'group1',

Replace it with:

slideshowGroup: (function() {
    var groups = [];
    jQuery('.gallery').each(function(i, $item) {
        groups.push($item.id);
    });
    return groups;
})(),
image 9
image 9

[ see image 9 ]


Delete these three lines near the bottom of highslide.config.js:

// gallery config object
var config1 = {
    slideshowGroup: 'group1',

Delete this line at the bottom:

};                                                            .
image 10
image 10

[ see image 10 ]


My example now has two remaining lines at the bottom:

numberPosition: 'caption',
transitions: ['expand', 'crossfade']

Add hs. in front of each line.
Replace the : with =
Replace , at the end with ;
Add ; at the end even if there are no ,

It now looks like this:

hs.numberPosition = 'caption';
hs.transitions = ['expand', 'crossfade'];

(Do the same even if you have other settings than numberPosition and transitions)

image 11
image 11

[ see image 11 ]


Add this right above the hs.graphicsDir at the top of the file:

jQuery(document).ready(function() {

And add this at the bottom of the file:

// for gallery
jQuery('.gallery-item a').addClass('highslide').each(function() {
    this.onclick = function() {
        return hs.expand(this, {
            slideshowGroup: this.parentNode.parentNode.parentNode.id
        });
    };
});

// For single images
hs.onSetClickEvent = function(sender, e) {
    e.element.onclick = function() {
        return hs.expand(this, singleConfig);
    }
    return false;
};

var singleConfig = {
    slideshowGroup: 'single-image',
    outlineType: 'drop-shadow',
    wrapperClassName: 'borderless',
    numberPosition: null,
    dimmingOpacity: 0
};

hs.registerOverlay({
    slideshowGroup: 'single-image',
    html: ' <div onclick="return hs.close(this)" title="Close"></div>',
    position: 'top right',
    fade: 2
});

});

My highslide.config.js file now looks like this:

image 12
image 12

[ see image 12 ]


image 13
image 13

Upload the highslide folder to the root of your web site (or to the root of your WordPress installation if you don’t have WordPress in the root of your web site).

Go to WordPress Dashboard => Appearance => Editor.
Click Header (header.php) in the right column.

[ see image 13 ]


Find the closing head tag </head> and past this right above it:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.your-domain.com/highslide/highslide-full.packed.js"></script>
<script type="text/javascript" src="http://www.your-domain.com/highslide/highslide.config.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.your-domain.com/highslide/highslide.css" />
<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="http://www.your-domain.com/highslide/highslide-ie6.css" />
<![endif]-->
image 14
image 14

Important:
Replace www.your-domain.com with your own domain.

IMPORTANT! Remove the first script tag (the line containing the link to jquery.min.js) if you already has jQuery included in the theme you are using. Most WordPress themes have jQuery included!

[ see image 14 ]


2. Upload images for the gallery in WordPress

image 15
image 15

Create the post/page where you want to have your gallery.
Place the mouse marker where you want your gallery to appear and click the Add Media button above the text field.

[ see image 15 ]


image 16
image 16

Select the images you want to use if you already have uploaded your images to the Media Library.

Otherwise: Click Upload Files and upload the images you want to use for the gallery. Click each image and add Caption (caption for the thumbnail) and Alt Text (caption for the enlarged image) under Attachment Details.
Chose Link To: Media File under Attachment Display Settings. 

[ see image 16 ]


image 17
image 17

Click Create Gallery in the left menu, select the images you want to use (if they’re not already selected), and click Create a new gallery in bottom right corner.

[ see image 17 ]


image 18
image 18

The gallery with thumbnails is now inserted  in your post/page.

Click Update to save, and open your post/page to see the gallery.

[ see image 18 ]


Repeat from #2 to add more galleries to the same page, or to a new page/post.

You can see my gallery HERE

You can see examples of gallery in posts here, and in the front page you can see that the galleries in the posts acts like three different galleries. This post has a single image in addition to the gallery, and this page has multiple galleries.