RoadRash' Highslide Test Blog

Manually added in-page gallery (without NextGEN)

RoadRash — Fri, 23 Jul 2010 22:46:38 +0000

Go to Dashbord => Appearance => Editor. Open header.php in the right column.

Add this in header.php right above the closing head tag :

Add the HTML necessary for the gallery. This is what I have used – replace the images with your own.

Manually added Highslide HTML popups

RoadRash — Tue, 11 May 2010 16:07:03 +0000

You can easily use Highslide HTML popups when you already have installed Highslide in your WordPress blog. See examples below.

Using objectType: ‘iframe’

Click this link to open Highslide homepage in a Highslide popup

This is the code added to the post in HTML view:

Click this link to open Highslide homepage in a Highslide popup

Barebones sample at Highslide:
http://highslide.com/examples/iframe.html

Using highslide-maincontent div

Click this link to open HTML content from a div within the same page

Lorem ipsum

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.

This is the code added to the post in HTML view:

Click this link to open HTML content from a div within the same page

Lorem ipsum
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl. Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat velit et justo. Donec mollis, mi at tincidunt vehicula, nisl mi luctus risus, quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna. Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy pretium tellus.

Barebones sample at Highslide:
http://highslide.com/examples/inline.html

Using objectType: ‘swf’ for opening flash content

Opening swf files require including this line in your header.php file (WordPress admin panel – go to Appearance => Editor => Open header.php):

Click this link to open flash content

This is the code added to the post in HTML view:

 Click this link to open flash content

Barebones sample at Highslide:
http://highslide.com/examples/flash.html

Opening flv file using JW flv player in a Highslide popup

Click the thumb above to open the video
Player used in this example: JW flv player

This is the code added to the post in HTML view:

Barebones sample page:
http://www.roadrash.no/hs-support/example-jw-flv-player.html

Single type of Highslide gallery using Highslide Editor code with NextGEN gallery

RoadRash — Sat, 27 Feb 2010 13:17:12 +0000

How to use the Highslide Editor to create single type of Highslide gallery with NextGEN gallery.

Gallery: Basic white

Download and install the NextGEN Gallery plugin.

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

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

Go to the Highslide Editor and create your gallery. I’ve used the pre-defined Gallery: Basic white 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 file used in the example in this page:

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

// Add the slideshow controller
hs.addSlideshow({
	slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		opacity: '0.75',
		position: 'bottom center',
		offsetX: '0',
		offsetY: '-15',
		hideOnMouseOut: true
	}
});

// gallery config object
var config1 = {
	slideshowGroup: 'group1',
	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.

If you want all the galleries in your WordPress installation to have the same look, you can comment out the slideshowGroup in the addSlideshow part of the code by adding a double slash in front of the line:

// Add the slideshow controller
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		opacity: '0.75',
		position: 'bottom center',
		offsetX: '0',
		offsetY: '-15',
		hideOnMouseOut: true
	}
});

(See THIS POST if you want to use different galleries.)

Remove this part at the bottom of the file:

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

Add this line right below the hs.graphicsDir line:

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

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

hs.graphicsDir = 'http://www.yourdomain.com/path-to/wp-content/plugins/highslide/graphics/';
hs.outlineType = 'custom';
hs.transition = ['expand', 'crossfade'];
hs.fadeInOut = true;
hs.align = 'center';
hs.captionEval = 'this.a.title';

// Add the slideshow controller
hs.addSlideshow({
	//slideshowGroup: 'group1',
	interval: 5000,
	repeat: false,
	useControls: true,
	fixedControls: 'fit',
	overlayOptions: {
		opacity: '0.75',
		position: 'bottom center',
		offsetX: '0',
		offsetY: '-15',
		hideOnMouseOut: true
	}
});

Save the highslide.config.js file. Upload the highslide folder to the plugins folder.

Create your NextGEN gallery.

Go to Gallery => Options => Effects tab. Choose Highslide under JavaScript Thumbnail effect and save the changes. Add the gallery to your post and publish it.

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

RoadRash — Sat, 27 Feb 2010 13:16:54 +0000

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

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.

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.

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: '',
	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: '',
	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: '',
	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: '',
	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.