Live and Relax

Update on September 11:
Figured out how the highslide could also be used to display html content.  With the following bit of html code, the EXIF data of an image could be displayed:

<a class=”highslide”  href=”http://ghorse.org/wordpress/wp-content/plugins/nextgen-gallery/admin/showmeta.php?id=340″ onclick=”return hs.htmlExpand(this, {objectType: ‘iframe’, wrapperClassName: ‘exif’, contentID : ‘my-content’} )” >Click here to view EXIF data.</a>

The only problem is that the popup window could only be closed by click on outside the windows so the hs.onDimmerClick is removed.

hs.onDimmerClick = function() {
return hs.next();
}

The thickbox.js could be remove from the header.php now.

<script type=”text/javascript”> var tb_pathToImage = “http://ghorse.org/wordpress/wp-content/plugins/nextgen-gallery/thickbox/loadingAnimationv3.gif”;</script>
<style type=”text/css” media=”screen”>@import “http://ghorse.org/wordpress/wp-content/plugins/nextgen-gallery/thickbox/thickbox.css”;</style>
<script type=’text/javascript’ src=’http://ghorse.org/wordpress/wp-includes/js/jquery/jquery.js?ver=1.2.6′></script>
<script type=’text/javascript’ src=’http://ghorse.org/wordpress/wp-content/plugins/nextgen-gallery/thickbox/thickbox-pack.js?ver=3.1.1′></script>

Update on September 10:
Added this bit of code on the header.php file.  The hs.onDimmerClick is the event when mouse click at outside the image display popup window.  The default response is close the high slide popup window.  The code modified this reponse to display the next image in the slideshow.  This should give user a nice way to navigate thru a slide show without the overlay control bar interfering with image viewing.
hs.onDimmerClick = function() {
return hs.next();
}

This installation notes outline what is needed for the highslide 4.03 to work with the nextgen gallery in wordpress.  This installation have been done following the instructions from the following source with update and changes find during the process:

Instruction for nextgen gallery:

travel-junkie.com/geeky-stuff/highslide-and-nextgen-gallery/

Highslide home:

vikjavev.no/highslide/

First of all, go to the Highslide homepage and get the latest stable release of the full version and unzip that. Don’t worry about all the different folders in there. You just need the ‘highslide’-folder. We need to modify the header.php so make a backup of this file first.

After that open your editor, name the file highslide.css, put following code into it, fill in the WP plugin path and save it into the ‘highslide’-folder:

.highslide{
cursor:url(http://ghorse.org/wordpress/wp-content/plugins/highslide/graphics/zoomin.cur), pointer;
outline:none;
}

.highslide-caption{
display:none;
border:2px solid white;
border-top:none;
font-size:10pt;
padding:5px;
background-color:white;
}

.highslide-dimming {
background-color: black;
}

.highslide-loading{
display:block;
padding:2px;
border:#000;
background-color:#fff;
/*you might have to adjust the width and the height to suit your loading image,
or if you want text, then edit the option in highslide.js and adjust the css here*/
width:16px;
height:16px;
background-image: url(http://ghorse.org/wordpress/wp-content/plugins/highslide/graphics/loader.gif);
background-repeat:no-repeat;
background-position:2px 2px;
}

.highslide-move{
cursor:move;
}

.highslide-overlay{
display:none;
}

/* Controls. See http://www.google.com/search?q=css+sprites */
.highslide-controls {
width: 195px;
height: 40px;
background: url(http://ghorse.org/wordpress/wp-content/plugins/highslide/graphics/controlbar-black-border.gif) 0 -90px no-repeat;
margin-right: 15px;
margin-bottom: 10px;
margin-top: 20px;
}
.highslide-controls ul {
position: relative;
left: 15px;
height: 40px;
list-style: none;
margin: 0;
padding: 0;
background: url(http://ghorse.org/wordpress/wp-content/plugins/highslide/graphics/controlbar-black-border.gif) right -90px no-repeat;
}
.highslide-controls li {
float: left;
padding: 5px 0;
}
.highslide-controls a {
background: url(http://ghorse.org/wordpress/wp-content/plugins/highslide/graphics/controlbar-black-border.gif);
display: block;
float: left;
height: 30px;
width: 30px;
outline: none;
}
.highslide-controls a.disabled {
cursor: default;
}
.highslide-controls a span {
/* hide the text for these graphic buttons */
display: none;
}

/* The CSS sprites for the controlbar */
.highslide-controls .highslide-previous a {
background-position: 0 0;
}
.highslide-controls .highslide-previous a:hover {
background-position: 0 -30px;
}
.highslide-controls .highslide-previous a.disabled {
background-position: 0 -60px !important;
}
.highslide-controls .highslide-play a {
background-position: -30px 0;
}
.highslide-controls .highslide-play a:hover {
background-position: -30px -30px;
}
.highslide-controls .highslide-play a.disabled {
background-position: -30px -60px !important;
}
.highslide-controls .highslide-pause a {
background-position: -60px 0;
}
.highslide-controls .highslide-pause a:hover {
background-position: -60px -30px;
}
.highslide-controls .highslide-next a {
background-position: -90px 0;
}
.highslide-controls .highslide-next a:hover {
background-position: -90px -30px;
}
.highslide-controls .highslide-next a.disabled {
background-position: -90px -60px !important;
}
.highslide-controls .highslide-move a {
background-position: -120px 0;
}
.highslide-controls .highslide-move a:hover {
background-position: -120px -30px;
}
.highslide-controls .highslide-full-expand a {
background-position: -150px 0;
}
.highslide-controls .highslide-full-expand a:hover {
background-position: -150px -30px;
}
.highslide-controls .highslide-full-expand a.disabled {
background-position: -150px -60px !important;
}
.highslide-controls .highslide-close a {
background-position: -180px 0;
}
.highslide-controls .highslide-close a:hover {
background-position: -180px -30px;
}

/*DO NOT DELETE THIS, YOU WILL REGRET IT…*/
.highslide-display-block{
display:block;
}

.highslide-display-none{
display:none;
}

Adjusting the files

highslide-full.js

I have choosen to use the highslide-full.js so that the slideshow, cross fade and dimming background effect is readily available.  The only thing you have to do here is adjust the options at the top of the file. That is basically up to you, but there are three options you will have to check. The most important one is that you set ‘graphicsDir’ to the correct directory, like /PATH TO PLUGIN DIR/highslide/graphics/. If this is not set correctly, nothing will happen at all when an image gets clicked. Then change the ‘loadingText’ to an empty string to be able to use an image. If you want to display a text fill it in here and then adjust the CSS in highslide.css. The last one to adjust would be ‘outlineType’. Here is what my set up:

graphicsDir : ‘http://ghorse.org/wordpress/wp-content/plugins/highslide/graphics/’,
restoreCursor : ‘zoomout.cur’, // necessary for preload
expandSteps : 10, // number of steps in zoom. Each step lasts for duration/step milliseconds.
expandDuration : 250, // milliseconds
restoreSteps : 10,
restoreDuration : 250,
marginLeft : 15,
marginRight : 15,
marginTop : 2,
marginBottom : 2,
zIndexCounter : 1001, // adjust to other absolutely positioned elements
loadingOpacity : 0.75,
allowMultipleInstances: false,
numberOfImagesToPreload : 5,
outlineWhileAnimating : 2, // 0 = never, 1 = always, 2 = HTML only
outlineStartOffset : 3, // ends at 10
fullExpandPosition : ‘bottom right’,
fullExpandOpacity : 1,
padToMinWidth : false, // pad the popup width to make room for wide caption
showCredits : false, // you can set this to false if you want
creditsHref : ”,
enableKeyListener : true,
transitions : ['expand', 'crossfade'],
transitionDuration: 300,
dimmingOpacity: 0.9, // Lightbox style dimming background
dimmingDuration: 50, // 0 for instant dimming

allowWidthReduction : false,
allowHeightReduction : true,
preserveContent : true, // Preserve changes made to the content and position of HTML popups.
objectLoadTime : ‘before’, // Load iframes ‘before’ or ‘after’ expansion.
cacheAjax : true, // Cache ajax popups for instant display. Can be overridden for each popup.
anchor : ‘auto’, // where the image expands from
align : ‘center’, //’auto’  position in the client (overrides anchor)
targetX: null, // the id of a target element
targetY: null,
dragByHeading: true,
minWidth: 200,
minHeight: 200,
allowSizeReduction: true, // allow the image to reduce to fit client size. If false, this overrides minWidth and minHeight
outlineType : “rounded-black”, // ‘drop-shadow’ set null to disable outlines
wrapperClassName : ‘highslide-wrapper’, // for enhanced css-control

header.php

Open header.php and add the following code between the < head >< /head >, preferably at the end. Then, again, change all the /PATH TO PLUGIN DIR/-instances to the path of your plugin directory.  The first two lines make sure that all the needed highslide-files are loaded and the rest is needed for the navigation between pictures within the highslide effect.

All options that you want to change have to be put into the header this time, like in this:

<link href=’http://ghorse.org/wordpress/wp-content/plugins/highslide/highslide.css’ rel=’stylesheet’ type=’text/css’ />
<script type=’text/javascript’ src=’http://ghorse.org/wordpress/wp-content/plugins/highslide/highslide-full.js’></script>
<script type=”text/javascript”>
hs.registerOverlay({
thumbnailId: null,
overlayId: ‘controlbar’,
position: ‘top right’,
hideOnMouseOut: true
});
hs.addSlideshow({
slideshowGroup: ‘gslide’,
interval: 5000,
repeat: false,
useControls: true,
fixedControls: false,
overlayOptions: {
opacity: .6,
position: ‘top center’,
hideOnMouseOut: true
} });
hs.onDimmerClick = function() {
return hs.next();
}
hs.captionSlideSpeed = 0;
hs.dimmingGeckoFix = true;
</script>

The following needs to be added to the header file in order for the thickbox to work on the EXIF data display on the singlepic photoblog post to work:

<script type=”text/javascript”> var tb_pathToImage = “http://ghorse.org/wordpress/wp-content/plugins/nextgen-gallery/thickbox/loadingAnimationv3.gif”;</script>
<style type=”text/css” media=”screen”>@import “http://ghorse.org/wordpress/wp-content/plugins/nextgen-gallery/thickbox/thickbox.css”;</style>
<script type=’text/javascript’ src=’http://ghorse.org/wordpress/wp-includes/js/jquery/jquery.js?ver=1.2.6′></script>
<script type=’text/javascript’ src=’http://ghorse.org/wordpress/wp-content/plugins/nextgen-gallery/thickbox/thickbox-pack.js?ver=3.1.1′></script>

Up load the files back to your server and change the nextgen gallery setting from your admin panel

Nextgen gallery-> option-> effects setup:
JavaScript Thumbnail effect: Highslide
Link Code line : class=”highslide” onclick=”return hs.expand(this, {slideshowGroup : ‘gslide’})”

Note the slideshowGroup : ‘gslide’ need to match with the hs.addslideshow section in the header.php file to work.

Tags: high slide, installation, nextgen gallery