Der Imagerotator - JW Image Rotator von Jeroen Wijering

Der JW Image Rotator, dessen Nutzung für private Zwecke kostenlos ist, lässt sich mit ein kein wenig Geschick auch auf den Textseiten von NPage einbauen.

Demo-Beispiel

Get the Flash Player to see this rotator.

Downloadpaket

Das Downloadpaket enthält folgende Dateien, die für den Einbau bei NPage erforderlich sind:

  • imagerotator.swf - dises Datei muss in den Flashspeicher von NPage hochgeladen werden
  • swfobject.js - dieses Datei muss in den HTML-Speicher von NPage hochgeladen werden
  • madrid.xml - diese Datei enthält die Verweise auf die anzuzeigenden Bilder. Sie muss angepasst werden. Eine Umbennennung ist möglich. Ich habe sie ir_show_1.xml genannt.

Die Steuerung der Diashow

Die Steuerung der Dia-Show erfolgt mittels einer xml-Datei. Sie ist so aufgebaut:

<?xml version="1.0" encoding="utf-8"?>
<playlist version="1" xmlns="http://xspf.org/ns/0/">
    <trackList>
        <track>
            <title>Was sind das ? Blumen !</title>
            <creator>Unbekannter Künstler</creator>
            <location>http://filex.npage.de/yyyyyy/zz/bilder/flower.png</location>
            <info>http://bpgs.de</info>
        </track>
        <track>
            <title>Haus im Schnee</title>
            <creator>Ein toller Fotograf</creator>
            <location>http://filex.npage.de/yyyyyy/zz/bilder/alta-badia.jpg</location>
            <info>http://ratgeber.bpgs.de</info>
        </track>
        <track>
            <title>Weltraumstation</title>
            <creator>Ein Außerirdischer</creator>
            <location>http://filex.npage.de/yyyyyy/zz/bilder/space-01.jpg</location>
            <info>http://bolivien.bpgs.de/info>
        </track>
    </trackList>
</playlist>

Wichtig ist in erster Linie die Anpassung der Verweise auf die Bilder. Für x, yyyyyy und zz müssen jeweils andere Werte eingesetzt werden. Natürlich sollten auch title und creator stimmen. Sobald die Anpassungen vorgenommen wurde, kann die Datei bei NPage hochgeladen werden.

HTML-Code  für die Textseite

Schließlich muss der HTML-Code in die NPage-Textseite eingbaut werden. Der Code sieht so aus:

<div id="container">
<a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this rotator.</div>
<script type="text/javascript" src="https://file1.hpage.com/002351/24/html/swfobject.js"></script>
<script type="text/javascript">
var s1 = new SWFObject("http://filex.npage.de/yyyyyy/zz/flash/imagerotator.swf","rotator","450","300","7");
s1.addParam("allowfullscreen","true");
s1.addVariable("file","http://filex.npage.de/yyyyyy/zz/html/ir_show_1.xml");
s1.addVariable("width","450");
s1.addVariable("height","300");
s1.write("container");
</script> 

Auch hier müssen die Werte für x, yyyyyy und zz angepasst werden. Die Werte hinter width und height geben die Größe der Diashow an. Eine Reihe weiterer Variablen werden auf der Websseite des Autor erklärt.

Achtung Veränderung!

Auf Grund von Veränderungen bei NPage ist es nicht mehr möglich, diese Flash-Galerie in der beschriebenen Art und Weise einzubauen

Partnerwebsites

Websites mit Mobirise

  1. Startseite der Mobirise Extension Demo Website auf github.bpgs.de
  2. Übersicht zu den Elementen des Themes Mobirise4 in Mobirise 4, Version 4.7.7 auf demo-zu-netcup.9f8.de
  3. Gesamtübersicht zu den Designblöcken des Mobirise5 Themes AMP auf mobirise5-theme-amp.9f8.de
  4. Mobirise4 mit dem Theme PurityM auf mein-wunschname.de.cool
  5. EASY TO USE! erstellt mit Mobirise 4.4.1 und dem Theme default auf mein-wunschname.webspace.rocks
  6. MOBIRISE3 THEME MOBIRISE3 auf lc-pico-phpfriends.bpgs.de
  7. Website erstellt mit Mobirise3 und dem Theme Mobirise(auch unter dem Namen default) auf lc-ver-bummel.bpgs.de

Neuigkeiten

Link zur aktiven Seite hervorheben (01.07.2013 12:53:00)

Auf vielen Websites wird der Link zur gerade aktiven seite hervorgehoben. NPage unterstützt so etwas leider nicht automatisch. Mein einem kleinen wenig javaScript kann man das aber nachbauen.

Erste Voraussetzung ist, dass man die JavaScript-Bibiothek JQuery bei NPage hochlädt und in die Seite einbindet.

Außerdem benötigt man einen kleinen JavaScript-Schnippsel. Für das von mir verwendete Design Plus 135 sieht der so aus:

$(document).ready(function($){
  var url = window.location.pathname;
  $('.navi_cont a[href="'+url+'"]').addClass('current');
});

Schließlich muss noch etwas CSS-Code eingefügt werden

<style>
  .current, a>.current, a.current   { color:yellow !important}
</style>

Wie bereits beschrieben wurde dieses Patch für die von mir hier verwendete Designvorlage Plus 135 erstellt. Es funktioniert auch mit anderen Designvorlagen, die genauso aufgebaut sind. Siehe dazu diese Übersicht zu den NPage Templates.

Bei allgemeinen Problemen oder Fragen zu anderen Designvorlagen bitte diesen Vorstellungsthread im NPage Forum nutzen.

http://forum.npage.de/vorstellung/29410-designpatch-designvorlagen-anpassen.html


Bewertung: (Keine Bewertung)

 
 
Kommentare
 
Keine Kommentare vorhanden.
 
 
Kommentar verfassen
 
Name:
E-Mail:
Betreff:
Kommentar :
 
 
Zum Seitenanfang