Archiv der Kategorie 'Bilder'



Highslide integration in NextGEN Gallery

Bilder, Scripts 11 Comments »

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.



NextGEN ImageFlow

Bilder, Dies und Das, Gleitschirm, Links, Sport No Comments »

FlashViewer gekoppelt mit NextGEN Gallery

[imageflow id="1"]

Links:
http://shabushabu-webdesign.com/wp-plugin-nextgen-imageflow/



Radarfalle ausserhalb des Parkfeldes – wer bezahlt die Busse?

Bilder, Dies und Das 1 Comment »

Heute morgen gesehen:

 

Das Auto eingelöst von der Einwohnergemeinde, darin ein Dorfpolizist, dahinter ein Radargerät und das ganze ausserhalb der Parkfeldmarkierung. Wer bezahlt nun die Busse für parkieren ausserhalb des Parkfeldes ?

Auszug aus der Bussenliste:

252.
  Parkieren ausserhalb von Parkfeldern oder einem deutlich gekennzeichneten Belag (Art. 79 Abs. 1 und 1bis SSV)

a)  bis 2 Stunden  CHF 40 
b) um mehr als 2, aber nicht mehr als 4 Stunden  CHF 60
c) um mehr als 4, aber nicht mehr als 10 Stunden CHF 100

zwei Stunden sind bereits vergangen….

Kitesurfen in Djerba

Bilder, Kiten, Sport 2 Comments »

Es gibt zwei verschiedene Spots ins Djerba zum Kiten. Ich war im Norden in einer grossen Lagune (32 km 2) am Smile Beach Kiten.

Details zum Kitecenter findet Ihr unter www.globalkite.com Es können Kurse gebucht, Material gemietet oder einfach in der Lagune mit dem eigenen Material gefahren werden. Kurse sind in Deutsch, Englisch, Französisch und Arabisch möglich.

Am einfachsten gelangt man mit dem Taxi an diesen Ort. Ist spottbillig und die Fahrer kannten bei mir jeweils den Ort. Falls nicht, einfach Richtung Houmt Souk fahren. Das Kitecenter ist direkt an der Strasse.
Weiter bestehen bei den Taxis feste kilometer Tarife, so fällt zum Glück das jeweilige Handeln weg

Bilder:

Hochwasser in der Region Basel

Bilder, Dies und Das 1 Comment »

Ein paar Zentimerter mehr und die Birs hätte mächtig nasse Füsse verursacht…

Bilder: