Multiple types of Highslide galleries
using Highslide Editor code with NextGEN gallery

Posted on February 27, 2010 by RoadRash

How to use the Highslide Editor to create multiple types of Highslide galleries with NextGEN gallery.

Gallery id set_5

Gallery id set_4


Download and install the NextGEN Gallery plugin.

Go to Gallery => Options => Effects tab. Choose Highslide under JavaScript Thumbnail effect and save the changes.

Create two new galleries in the NextGEN gallery and upload your images. Remember the id of the galleries – we need to use them in the Highslide code later.

In the WordPress admin panel – go to Appearance => Editor => Open header.php and add this right before the closing head tag </head>

<script type="text/javascript" src="http://www.yourdomain.com/path-to/wp-content/plugins/highslide/highslide-full.js"></script>
<script type="text/javascript" src="http://www.yourdomain.com/path-to/wp-content/plugins/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/path-to/wp-content/plugins/highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="http://www.yourdomain.com/path-to/wp-content/plugins/highslide/highslide-ie6.css" />
<![endif]-->

Replace http://www.yourdomain.com/path-to/ with your own domain/path.

The first gallery – set_5

Go to the Highslide Editor and create your first gallery. THIS is the setup for the first gallery in this example.
You don’t need to upload your own image since you must do that in the NextGEN gallery.

Click the Publish button and download the zip archive to your computer. Unzip the folder and open the highslide.config.js file (inside the highslide folder) in a text editor (f.ex Notepad). This is the code from the highslide.config.js:

hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'custom';
hs.fadeInOut = true;
hs.align = 'center';
hs.captionEval = 'this.thumb.alt';

// Add the slideshow controller
hs.addSlideshow({
	slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: false,
	overlayOptions: {
		className: 'controls-in-heading',
		opacity: '0.75',
		position: 'top right',
		offsetX: '1',
		offsetY: '-22',
		hideOnMouseOut: false
	}
});

// gallery config object
var config1 = {
	slideshowGroup: 'group1',
	numberPosition: 'heading',
	transitions: ['expand', 'crossfade']
};

Change the hs.graphicsDir line to this:

hs.graphicsDir = 'http://www.yourdomain.com/path-to/wp-content/plugins/highslide/graphics/';

Replace http://www.yourdomain.com/path-to/ with your own domain/path.

Move this two lines to the bottom of the file – we will use them later:

hs.outlineType = 'custom';
hs.captionEval = 'this.thumb.alt';

Move this line near the bottom to right below the hs.graphicsDir line:

transitions: ['expand', 'crossfade']

Add hs. in front, change : to = and add a semi colon at the end like this:

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

You should now have this at the top of your file:

hs.graphicsDir = 'http://www.yourdomain.com/path-to/wp-content/plugins/highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.align = 'center';

The code above is common for all galleries.

Replace ‘group1′ in the slideshowGroup line of the addSlideshow part of the code with the id of the gallery you want to use. The id of my gallery is 5, so I need to replace it with set_5:

// Add the slideshow controller
hs.addSlideshow({
	slideshowGroup: 'set_5',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: false,
	overlayOptions: {
		className: 'controls-in-heading',
		opacity: '0.75',
		position: 'top right',
		offsetX: '1',
		offsetY: '-22',
		hideOnMouseOut: false
	}
});

Now we need to add some new code to the highslide.config.js file. Add this right after the addSlideshow part:

/*
 * Read the given slideshowGroup and apply other config options. This is
 * only an adaptation to the NextGenGallery plugin, it should not be done this
 * way if you have control over the onclick.
 */
hs.Expander.prototype.onInit = function() {
	var groupConfig = config[this.slideshowGroup];
	// apply it to this expander
	hs.extend(this, groupConfig);
};

At the bottom of your file you should now have this remaning code:

// gallery config object
var config1 = {
	slideshowGroup: 'group1',
	numberPosition: 'heading',
};
hs.outlineType = 'custom';
hs.captionEval = 'this.thumb.alt';

Add this code above it:

// configuration hash
var config = {

And change this:

var config1 = {

to this (now we are using the gallery’s id again):

'set_5': {

Remove the slideshowGroup line, and make the two remaining lines look like this:

outlineType: 'custom',
captionEval: 'this.thumb.alt',

Move the two lines above to right below the numberPosition line.

We also need to add a wrapperClass for the CSS specific for this gallery. Add this line after the captionEval line:

wrapperClassName: 'set_5' }

Notice the curly bracket at the end of the last line!!!

And since all outline graphics from the Edior are named custom, we need to rename them. Find the custom.png file inside the outlines folder (highslide/graphics/outlines) and rename it to custom-set_5.png. (Again we are using the gallery’s id.)
Then rename outlineType: ‘custom’ to outlineType: ‘custom-set_5′.

The last part of your file should now look like this:

// configuration hash
var config = {
        'set_5': {
                numberPosition: 'heading',
                outlineType: 'custom-set_5',
                captionEval: 'this.thumb.alt',
                wrapperClassName: 'set_5' }
        };

Now the highslide.config.js file should look like this:

hs.graphicsDir = 'http://www.yourdomain.com/path-to/wp-content/plugins/highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.align = 'center';

// Add the slideshow controller
hs.addSlideshow({
        slideshowGroup: 'set_5',
        interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: false,
	overlayOptions: {
		className: 'controls-in-heading',
		opacity: '0.75',
		position: 'top right',
		offsetX: '1',
		offsetY: '-22',
		hideOnMouseOut: false
	}
});
var config = {
        'set_5': {
                numberPosition: 'heading',
                outlineType: 'custom-set_5',
                captionEval: 'this.thumb.alt',
                wrapperClassName: 'set_5'}
        };

Then we need to take care of the gallery specific CSS. At the bottom of the highslide.css file you will find this:

/*****************************************************************************/
/* The following styles are added by the Highslide Editor                    */
/*****************************************************************************/
.highslide-wrapper, .highslide-outline {
	background: #FFFFFF;
}
.highslide img {
	border: 1px solid #D0D0D0;
}
.highslide:hover img {
	border-color: #A0A0A0;
}
.highslide-active-anchor img {
	visibility: visible;
	border-color: #808080 !important;
}
.highslide-image {
	border: 2px solid #FFFFFF;
}
.highslide-heading {
	display: none;
	margin: 0;
	color: #666666;
	font-weight: bold;
	padding: 2px;
	cursor: move;
}
.highslide-loading {
	color: black;
	border: 1px solid black;
	background-color: white;
	background-image: url(graphics/loader.white.gif);
}

.highslide-controls {
	position: static !important;
	margin: 0;
	width: 100px !important;
}
.highslide-controls .highslide-move {
	display: none;
}
.highslide-gallery ul li {
	width: 106px;
	height: 106px;
	border: 1px solid #D0D0D0;
	background: #EDEDED;
	margin: 2px;
}

We need to turn this into the wrapperClassName we added to the configuration object in the highslide.config.js file. Add .set_5 in front of each of the styles:

/*****************************************************************************/
/* The following styles are added by the Highslide Editor                    */
/*****************************************************************************/
.set_5 .highslide-wrapper, .highslide-outline {
	background: #FFFFFF;
}
.set_5 .highslide img {
        border: 1px solid #D0D0D0;
}
.set_5 .highslide:hover img {
        border-color: #A0A0A0;
}
.set_5 .highslide-active-anchor img {
        visibility: visible;
        border-color: #808080 !important;
}
.set_5 .highslide-image {
        border: 2px solid #FFFFFF;
}
.set_5 .highslide-heading {
        display: none;
        margin: 0;
        color: #666666;
        font-weight: bold;
        padding: 2px;
        cursor: move;
}
.set_5 .highslide-loading {
        color: black;
        border: 1px solid black;
        background-color: white;
        background-image: url(graphics/loader.white.gif);
}
.set_5 .highslide-controls {
        position: static !important;
        margin: 0;
        width: 100px !important;
}
.set_5 .highslide-controls .highslide-move {
        display: none;
}
.set_5 .highslide-gallery ul li {
        width: 106px;
        height: 106px;
        border: 1px solid #D0D0D0;
        background: #EDEDED;
        margin: 2px;
}

Save the highslide.config.js file and the highslide.css file.

The second gallery – set_4

Go to the Highslide Editor and create your first gallery. THIS is the setup for the second gallery in this example.
You don’t need to upload your own image since you must do that in the NextGEN gallery.

Click the Publish button and download the zip archive to your computer. Unzip the folder and open the highslide.config.js file (inside the highslide folder) in a text editor (f.ex Notepad). This is the code from the highslide.config.js:

hs.graphicsDir = 'highslide/graphics/';
hs.outlineType = 'custom';
hs.dimmingOpacity = 0.75;
hs.fadeInOut = true;
hs.align = 'center';
hs.marginBottom = 105;
hs.useBox = true;
hs.width = 600;
hs.height = 401;
hs.captionEval = 'this.thumb.title';
hs.captionOverlay.position = 'leftpanel';
hs.headingEval = 'this.a.title';
hs.registerOverlay({
	html: '<div onclick="return hs.close(this)" title="Close"></div>',
	position: 'top right',
	useOnHtml: true,
	fade: 2 // fading the semi-transparent overlay looks bad in IE
});

// Add the slideshow controller
hs.addSlideshow({
	slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: false,
	overlayOptions: {
		className: 'text-controls',
		opacity: '1',
		position: 'bottom center',
		offsetX: '0',
		offsetY: '-60',
		relativeTo: 'viewport',
		hideOnMouseOut: false
	},
	thumbstrip: {
		mode: 'horizontal',
		position: 'bottom center',
		relativeTo: 'viewport'
	}

});

// gallery config object
var config1 = {
	slideshowGroup: 'group1',
	numberPosition: 'caption',
	transitions: ['expand', 'crossfade']
};

First we can remove the four lines we have at the top of the other highslide.config.js file – these three from the top of the new config file:

hs.graphicsDir = 'highslide/graphics/';
hs.fadeInOut = true;
hs.align = 'center';

And this from the bottom:

transitions: ['expand', 'crossfade']

Take this code:

hs.registerOverlay({
	html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
	position: 'top right',
	useOnHtml: true,
	fade: 2 // fading the semi-transparent overlay looks bad in IE
});

Add slideshowGroup: ‘set_4′, after the useOnHtml line, and paste the whole code into the old config file – right after the hs.align line:

hs.registerOverlay({
	html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
	position: 'top right',
	useOnHtml: true,
        slideshowGroup: 'set_4',
	fade: 2 // fading the semi-transparent overlay looks bad in IE
});

Copy the code for the controlbar and thumbstrip (addSlidshow) and change slideshowGroup to set_4, and paste it into the config file:

// Add the slideshow controller
hs.addSlideshow({
	slideshowGroup: 'set_4',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: false,
	overlayOptions: {
		className: 'text-controls',
		opacity: '1',
		position: 'bottom center',
		offsetX: '0',
		offsetY: '-60',
		relativeTo: 'viewport',
		hideOnMouseOut: false
	},
	thumbstrip: {
		mode: 'horizontal',
		position: 'bottom center',
		relativeTo: 'viewport'
	}
});

Then we need to build a new configuration object for the second gallery where we can put in all the remaining code – except for hs.marginBottom. Remember to change name for the custom outline graphic as we did for the first gallery, and change the name of the outlineType in the code below.
The new configurasjons object should look like this:

        'set_4': {
                numberPosition: 'caption',
                outlineType: 'custom-set_4',
		dimmingOpacity: 0.75,
		useBox: true,
		width: 600,
		height: 401,
                captionEval: 'this.a.title',
		captionOverlay: { position: 'leftpanel' },
		headingEval: 'this.thumb.alt',
                wrapperClassName: 'set_4' }

Notice how we need to code the captionOverlay position! We also added a wrapperClassName for specific CSS for this gallery.

Add a comma after the curly bracket at the end of the wrapperClassName: ‘set_5′ line in the old highslide.config.js file and paste in the configuration object for the second gallery.

Now we have to deal with the hs.marginBottom setting for this gallery. Find this code:

hs.Expander.prototype.onInit = function() {
	var groupConfig = config[this.slideshowGroup];
	// apply it to this expander
	hs.extend(this, groupConfig);
};

And add this right after the hs.extend line:

if (this.slideshowGroup == 'set_4')hs.marginBottom = 105;

It should now look like this:

hs.Expander.prototype.onInit = function() {
	var groupConfig = config[this.slideshowGroup];
	// apply it to this expander
	hs.extend(this, groupConfig);
	if (this.slideshowGroup == 'set_4')hs.marginBottom = 105;
};

The highslide.config.js file should now look like this:

hs.graphicsDir = 'http://www.yourdomain.com/path-to/wp-content/plugins/highslide/graphics/';
hs.transitions = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.align = 'center';

hs.registerOverlay({
	html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"><div>',
	position: 'top right',
	useOnHtml: true,
        slideshowGroup: 'set_4',
	fade: 2 // fading the semi-transparent overlay looks bad in IE
});

// Add the slideshow controller
hs.addSlideshow({
        slideshowGroup: 'set_5',
        interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: false,
	overlayOptions: {
		className: 'controls-in-heading',
		opacity: '0.75',
		position: 'top right',
		offsetX: '1',
		offsetY: '-22',
		hideOnMouseOut: false
	}
});

// Add the slideshow controller
hs.addSlideshow({
	slideshowGroup: 'set_4',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: false,
	overlayOptions: {
		className: 'text-controls',
		opacity: '1',
		position: 'bottom center',
		offsetX: '0',
		offsetY: '-60',
		relativeTo: 'viewport',
		hideOnMouseOut: false
	},
	thumbstrip: {
		mode: 'horizontal',
		position: 'bottom center',
		relativeTo: 'viewport'
	}
});

hs.Expander.prototype.onInit = function() {
	var groupConfig = config[this.slideshowGroup];
	// apply it to this expander
	hs.extend(this, groupConfig);
	if (this.slideshowGroup == 'set_4')hs.marginBottom = 105;
};

var config = {
        'set_5': {
                numberPosition: 'heading',
                outlineType: 'custom-set_5',
                captionEval: 'this.thumb.alt',
                wrapperClassName: 'set_5'}
        'set_4': {
                numberPosition: 'caption',
                outlineType: 'custom-set_4',
		dimmingOpacity: 0.75,
		useBox: true,
		width: 600,
		height: 401,
                captionEval: 'this.a.title',
		captionOverlay: { position: 'leftpanel' },
		headingEval: 'this.thumb.alt',
                wrapperClassName: 'set_4' }
        };

Copy the CSS from the bottom of the highslide.css file for this gallery, add the wrapperClassName and paste it into the old highslide.css file.
NB! We need to do one change in the CSS. Instead of using:

.set_4 .highslide-wrapper, .highslide-outline {
	background: #85AA77;
}

we need to use:

.set_4 {
	background: #85AA77;
}

The CSS for the secon gallery should now look like this:

.set_4 {
	background: #85AA77;
}
.set_4 .highslide img {
	border: 1px solid #D0D0D0;
}
.set_4 .highslide:hover img {
	border-color: #A0A0A0;
}
.set_4 .highslide-active-anchor img {
	visibility: visible;
	border-color: #808080 !important;
}
.set_4 .highslide-dimming {
	background: #000000;
}
.set_4 .highslide-image {
	border: 1px solid #000000;
}
.set_4 .highslide-heading {
	display: none;
	margin: 0;
	padding:2px;
	font-weight:bold;
	cursor: move;
}
.set_4 .highslide-number {
	color: #666666;
	font-style: italic;
	font-size: 10pt !important;
}
.set_4 .highslide-loading {
	color: black;
	border: 1px solid black;
	background-color: white;
	background-image: url(graphics/loader.white.gif);
}
.set_4 .highslide-controls {
	position: static !important;
	margin-bottom: 0;
}
.set_4 .highslide-controls .highslide-move {
	display: none;
}
.set_4 .highslide-controls .highslide-full-expand {
	display: none;
}
.set_4 .highslide-controls .highslide-close {
	display: none;
}
.set_4 .highslide-gallery ul li {
	width: 106px;
	height: 106px;
	border: 1px solid #D0D0D0;
	background: #EDEDED;
	margin: 2px;
}

Save the highslide.config.js file and the highslide.css file. Upload the highslide folder to the plugins folder. Add your galleries to your post and publish.

This entry was posted in HowTo - multiple types of galleries. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>