Der Highslide Effekt ist für die Gallery vorgesehen, aber nicht standardmässig implementier.

Die Integration erfolgt mit folgenden Komponenten.

  • WordPress 2.7

Als erstes die NextGen Gallery installieren, danach die aktuelle Version von Highslide herunterladen und entpacken.
Den Ordner “highslide” in das plugin Verzeichnis von WordPress kopieren.

Nun die gewünschte Gallery von den Beispielen auswählen. Den script Teil des entsprechenden HTML Files kopieren und eine neue Datei highslide.config.js erstellen, damit der kopierte Inhalt gespeichert werden kann.

highslide.config.js im Detail:
Website mit entsprechendem Domainnamen ersetzen

hs.graphicsDir = 'http://WEBSITE/wp-content/plugins/highslide/graphics/';
	hs.align = 'center';
	hs.transitions = ['expand', 'crossfade'];
	hs.outlineType = 'rounded-white';
	hs.fadeInOut = true;
 
// This line will put the title of the pictures (from nextgen) into
// the caption field in highslide.
//        hs.captionEval = 'this.a.title';
 
// This line dims the area outside the highslide box.
	hs.dimmingOpacity = 0.75;
 
// Add the controlbar
	if (hs.addSlideshow) hs.addSlideshow({
		//slideshowGroup: 'group1',
		interval: 5000,
		repeat: false,
		useControls: true,
		fixedControls: 'fit',
		overlayOptions: {
			opacity: .75,
			position: 'bottom center',
			hideOnMouseOut: true
		}
	});

highslide.css im Detail
Website mit eintsprechendem Domainnamen ersetzen

.highslide-container div {
	font-family: Verdana, Helvetica;
	font-size: 10pt;
}
.highslide {
	cursor: url(http://WEBSITE/wp-content/plugins/highslide/graphics/zoomin.cur), pointer;
	outline: none;
	text-decoration: none;
}
.highslide img {
	border: 2px solid silver;
}
.highslide:hover img {
	border-color: gray;
}
 
.highslide-active-anchor img, .highslide-active-anchor:hover img {
	border-color: black;
}
.highslide-image {
	border-width: 2px;
	border-style: solid;
	border-color: white;
	background: gray;
}
.highslide-wrapper, .rounded-white {
	background: white;
}
.highslide-image-blur {
}
.highslide-caption {
	display: none;
	border-top: none;
	font-size: 1em;
	padding: 5px;
	background: white;
}
.highslide-heading {
	display: none;
	font-weight: bold;
	margin-bottom: 0.4em;
}
.highslide-dimming {
	position: absolute;
	background: black;
}
.highslide-loading {
	display: block;
	color: black;
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
	text-decoration: none;
	padding: 3px;
	border: 1px solid white;
	background-color: white;
	padding-left: 22px;
	background-image: url(http://WEBSITE/wp-content/plugins/highslide/graphics/loader.white.gif);
	background-repeat: no-repeat;
	background-position: 3px 1px;
}
a.highslide-credits,
a.highslide-credits i {
	padding: 2px;
	color: silver;
	text-decoration: none;
	font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
	color: white;
	background-color: gray;
}
 
/* Controls. See http://www.google.com/search?q=css+sprites */
.highslide-controls {
	width: 195px;
	height: 40px;
	background: url(http://WEBSITE/wp-content/plugins/highslide/graphics/controlbar-white.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://WEBSITE/wp-content/plugins/highslide/graphics/controlbar-white.gif) right -90px no-repeat;
}
.highslide-controls li {
	float: left;
	padding: 5px 0;
}
.highslide-controls a {
	background-image: url(http://WEBSITE/wp-content/plugins/highslide/graphics/controlbar-white.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;
}
.highslide-move a {
	cursor: move;
}
 
/* 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;
}

Nun sollten im Pluginverzeichnis “highslide” folgende Dateien sein. Graphis Ordner, highslide-full.js, highslide.config.js und highslide.css

Im Header des Templates folgende Zeilen einfügen. Diese sollte direkt vor den Tag stehen. Auch hier gilt, entsprechender Domainnamen anpassen

<!-- Highslide Plugin -->
 
<!-- Highslide Plugin -->
<link rel='stylesheet' type='text/css' href='http://WEBSITE/wp-content/plugins/highslide/highslide.css' />
<script type="text/javascript" src="http://WEBSITE/wp-content/plugins/highslide/highslide-full.js"></script>
<script type="text/javascript" src="http://WEBSITE/wp-content/plugins/highslide/highslide.config.js"></script>

Zu guter letzt noch in den NextGen Gallery Optionen unter Effects im Dropdownmenu Highslide als default auswählen.
Unter Options -> Gallery noch überprüfen, dass “Show Imagebrowser” deaktiviert ist. Falls nicht, diese Option deaktivieren.

Nun sollten die Bilder nach einem Refresh mittels Highslide geöffnet werden.

Share