Multimedia

Diese Anwendung erlaubt das direkte Hochladen im Browser von Bildern im JPG-Format in ein Verzeichnis auf Euren Server.

Der Administrator-Bereich ist passwortgeschützt. Es können beliebig viele zusätzliche Benutzer für den Upload eingestellt werden, die ihre eigenen Zugangsdaten erhalten.

Die zusätzlichen Benutzer können nur ihre selbst hoch geladenen Bilder editieren, freischalten oder löschen. Der Administrator hat Zugang zu allen Bildern. Die Anwendung verwendet eine portable SQLite-Datenbank, die mittels .htaccess nach außen geschützt ist.

Das Original-Fotoalbum ist für mobile Geräte responsive gestaltet und optimiert.

Ihr könnt z.B. auch vom Smartphone Bilder aus der Galerie oder auch Bilder direkt aus der Kamera hoch laden. Die Größe der Bilder kann in den Einstellungen angepasst werden und diese wird beim Upload, bei mir z.B. auf ca. 10% der Original-Auflösung, reduziert – weil Benutzer meist sehr hoch auflösende Fotos am Smartphone erstellen.

http://www.nof-tutorials.com/Fotoalbum/

Fotoalbum

Diese einfach in NOF einzubauende jQuery-Datei zeigt bei Mausüber mittels CSS3 eine Vergrößerung vom Bildauschnitt.

Hier geht es zu meinem Beispiel mit Tutorial.

Lupenzoom

 

Eine sehr schöne Möglichkeit Bilder und Beschreibungen dazu sehr einfach darzustellen. Texte können in eigenen DIV-Klassen auch scrollbar angezeigt werden.

Dies ist eine schöne Alternative zur altbewährten Lytebox mit zusätzlichen Effekten. Man kann einzelne Bilder vergrößern oder auch Bilder in Gruppen zusammenfassen.

www.magictoolbox.com/magicthumb/

Es steht eine kostenlose Beispiel-Version zur Verfügung. Für eine private Homepage kann man eine freie Lizenz beantragen, ansonsten muss man eine Lizenz käuflich erwerben.

 

Das alles funktioniert lediglich mit einer „Class“, die man auch den in NOF direkt aufgezogenen Bildern oder Text-Links sehr einfach zuordnen kann. In einem „rel“ Attribut (rel = relation = Bezug) kann man mit sehr vielen Parametern seine eigene Lightbox und das Verhalten steuern, wenn man will bei jedem Bild anders.

Hier habe ich diese Anwendung in NOF eingebaut – inklusive Tutorial:

www.nof-tutorials.com/Magic-Thumb/

 

Palmen

Magic Thumb

        Bild von: bilder.n3po.com

 

Der Amazing Slider ist eine sehr leicht zu verwendende Software. Das Programm erstellt einen Slider mit Fotos oder auch Videos vollkommen selbstständig.

Man kann den Amazing Slider zunächst als freie Version downloaden und testen.

Ihr müsst lediglich Eure Fotos oder Videos, auch z.B. Links zu YouTube oder anderen Seiten, eintragen. Man kann unter jeder Menge Design und unterschiedlichen Animationen wählen und hat auch die zusätzliche Option eine Lightbox zu verwenden.

Dies ist eine sehr schöne Alternative zum allseits beliebten WOW-Slider und lässt sich ebenso leicht direkt in NOF integrieren.

Hier ein Beispiel und mein Tutorial zum Einbau in NetObjects Fusion:

www.nof-tutorials.com/Amazing-Slider/

 
Amazing-Slider

 

Ihr findet auf meiner Beispielseite auch einen Link zum „Amazing Carousel“. Dieses Karussell wird ebenso eingebaut, bietet nur andere Optionen. Auch hier kann man Bilder oder Videos verwenden.

www.nof-tutorials.com/Amazing-Carousel/

 

 

Ein wirklich gutes und sehr einfach zu bedienendes Programm zur Erstellung eines HTML5 MP3 Players.

Dieser Player bietet eine Vielzahl von verschiedenen Designs, mit oder ohne Bilder. Man kann eine Gruppe von Songs oder auch einzelne Songs eintragen. Die CSS der Player ist bei Bedarf auch individuell abzuändern. Es können mehrere unterschiedliche Player auf der gleichen Seite, mittels Angabe der ID, eingebaut werden. Ein aktiver Player stoppt automatisch beim Start eines anderen Players oder Songs.

Die gekaufte Version bietet weit mehr Möglichkeiten und Designs als die freie Version. Weiterhin kann man durch den Kauf auch den Link zum „Amazing Audio Player“ entfernen. Zum Testen oder für den einfachen Gebrauch ist die freie Version aber sehr gut zu gebrauchen.

Der Player funktioniert auf sämtlichen Geräten in allen Browsern und ist leicht in NOF einzubauen.

www.nof-tutorials.com/Amazing-Audio-Player/

AmazingAudioPlayer

 

YouTube – Videos und die lokale Publizierung in NOF

Vielleicht hat sich der eine, oder andere schon einmal gefragt, wieso nach Einbinden eines Videos von YouTube in der lokalen Publizierung nix zu sehen ist.

Bei YouTube gibt es mehrer Codes, die man in seine Webseite einbauen kann. Ich erkläre es mal an Hand des „Einbettungscodes“.

Selbst bei diesem Einbettungscode gibt es 2 Möglichkeiten, diesen zu erzeugen, einmal mit
„Teilen“ (1.) -> „Einbetten“ (2.) -> „Copy/Paste“

Youtube Einbettungscode2

 

Möglichkeit 2 ist ganz konventionell, auf das Video mit „rechts klicken“ -> „Copy & Paste“ und anschließend z.B. in das HTML eines Textfeldes (Texteigenschaften) einfügen.

Youtube Einbettungscode1

Es wird bei beiden Möglichkeiten ein fast (aber nur fast) identischer Code generiert

 

Hier die 1. Variante (Einbetten):

<iframe width="420" height="315" src="//www.youtube.com/embed/R4U79c-uERg" frameborder="0" allowfullscreen></iframe>

Hier die 2. Variante (Copy & Paste):

<iframe width="420" height="315" src="http://www.youtube.com/embed/R4U79c-uERg?feature=player_detailpage" frameborder="0" allowfullscreen></iframe>

 

Das rot markierte Protokoll „http:“, macht den Unterschied für unsere lokale Publizierung. Während mit „http:“ das Video auch lokal zu sehen ist, funktioniert das nicht mit der 1. Variante. Bei der Fernpublizierung ist das nicht relevant, aber man will es ja vorher lokal testen und auch sehen 😉