Forum: NOF - Tutorials (185 anschauliche Tutorials zum Lesen und Nacharbeiten) > Bildgalerien, Slider, Bildwechsler, Videogalerien

VideoLightBox in NetObjects Fusion einbinden

(1/2) > >>

nettesekel:
Wer die VideoLightBox für die Präsentation seiner Videos auf einer NetObjects Fusion Website nutzen möchte, dem hilft dieses Tutorial.

Ein Beispiel wie die VideoLightBox funktionert und aussehen kann gibt es auf unserer Demo-Seite.

Gegenstand dieser Anleitung soll sein, wie ihr mit dem Programm "VideoLightBox" erstellte Video-Galerien in euer NOF-Projekt integrieren könnt.
Deshalb reiße ich die Programmfunktionen der VideoLightBox nur kurz an, werde diese aber nicht im Detail erläutern, da dies zum einen nicht Thematik unseres Forums ist und zum zweiten die Programmfunktionen durch Ausprobieren schnell kennengelernt werden können. :)

Wer Interesse an dem Programnm hat, kann es sich unter diesem Link downloaden. Einige Hinweise zur Nutzung des Programms fuinden sich ebenfalls auf dieser Seite.

Beachtet bitte dass die Nutzung nur für nichtkommerziell Zwecke kostenlos ist!


Hinweis:
Einige der Screenshots in diesem Tutorial verursachen ihrer Größe wegen einen Querscroller. Das ist beim Lesen nicht immer so ganz bequem. Wer lesen möchte ohne querscrollen zu müssen, kann über den kleinen Minus-Button unterhalb der Google-Übersetzer-Maske die linken Forenblöcke ausblenden und gewinnt so den benötigten Platz um die Screenshots im Ganzen sehen zu können.

nettesekel:
Wenn ihr im oberen Menü Options >> Language >> German anwählt,  könnt ihr euch die deutsche Sprache für die Programmoberfläche einstellen. In meinen Screenshots steht diese auf Englisch.

Über den ersten Reiter in der Programmansicht könnt ihr Videos zu eurer künfigen Video-Galerie hinzufügen. In meinem Falle habe ich eine Url von Youtube kopiert und in die entsprechende Eingabezeile eingefügt. Mit einem Klick auf den gekennzeichneten Button wird das Video der Galerie hinzugefügt.





Ihr könnt natürlich nicht nur Videos von Youtube oder anderen Plattformen in eure Galerie aufnehmen, sondern auch Solche, die auf eurem PC gespeichert sind. Mit welcher Einstellung ihr auf diese Videos zugreifen könnt zeigt der nachfolgende Screenshot.





Wenn ihr also den enstrechenden Button angeklickt habt, erscheint das Video als Thumbnail im unteren Teil des Fensters. Klickt ihr es an, dann teilt sich das Fenster in zwei Bereiche auf und unterhalb des Thumbnails werden die Informationen zum Video eingeblendet.





Sobald das Video als Thumbnail angezeigt wird, ist das Eingabefeld wieder leer und ihr könnt ein weiteres Video hinzufügen.

nettesekel:
Über den zweiten Reiter könnt ihr diverse Einstellungen für die Darstellung eurer Thumbnails vornehmen. Von den einzelnen verfügbaren Templates könnt ihr euch auf der Demoseite des Herausgebers ein Bild machen. Eine gute Entscheidungshilfe wie ich finde.




Reiter 3 bietet ebenfalls eine Vielzahl von Einstellmöglichkeiten für die Darstellung des Videos. Tobt euch hier einfach mal aus und testet, mit welcher Einstellung ihr das von euch gewünschte Ergebnis erhaltet.

nettesekel:
Der vierte und letzte Reiter enthält die Einstellungen die für die Publizierung der Galerie relevant sind. Den Pfad zur fertigen Galerie solltet ihr euch merken. Setzt ihr ganz unten das Häkchen, wird die Galerie nach dem Publizierungsvorgang im Browser geöffnet, damit ihr sie ansehen und testen könnt.
Dieses Häkchen macht insbesondere dann Sinn, wenn man die unterschiedlichen Einstellungen ausprobiert, damit man ohne Umwege das Resultat der vorgenommenen Einstellungen ansehen kann.






Nachdem der Button zum Publizieren angeklickt wurde öffnet sich ein Browserfenster mit der erstellten Video-Galerie. In der Adresszeile des Browsers könnt ihr nochmals ablesen, wohin eure Galerie publiziert wurde.

nettesekel:
Öffnet nun den Ordner in den eure Galerie publiziert wurde.
Hier findet ihr nun einen weiteren Ordner mit allen benötigten Dateien, in meinem Beispiel heißt dieser Ordner "index_videolb".
Des Weiteren findet ihr eine htaccess-Datei und die html-Dateiwelche eure galerie beinhaltet. In meinem Falle heißt sie "index.html", dass ist jedoch von den zuvor gemachten einstellungen abhängig.





Wir widmen uns nun zunächst der Datei "index.html" und öffnen diese in einem Editor. In meinem Screenshot seht ihr den Code in verschiedenen Farben, das liegt an dem von mir verwendeten Editor. Nutzt ihr den Windows-Editor wird die Schriftfarbe eures Codes durchgäng schwarz sein.

Im generierten Code befinden sich nun zwei Abschnitte die ihr für die Integration der Galerie in euer NOF-Projekt benötigt. Den ersten Abschnitt habe ich rot gekennzeichnet.
Er beginnt mit dem Kommentar:

--- Code: HTML5 ---<!-- Start VideoLightBox.com HEAD section -->
Und endet mit dem Kommentar:

--- Code: HTML5 ---<!-- End VideoLightBox.com HEAD section -->
Kopiert euch diesen Abschnitt nun...





... und öffnet die Seite in eurem NOF-Projekt, in welche ihr die Galerie einbinden möchtet. Da es sehr unwahrscheinlich ist, dass ihr die Galerie auf all euren Seiten nutzen möchtet, würde ich den kopierten Code nicht in den Masterrahmen, sondern ins Layout-html einfügen. Ruft mit F9 die Layouteigenschaften auf, klickt den HTML-Button an und fügt den Code im sich öffnenden Fenster zwischen den head-Tags ein.

Navigation

[0] Themen-Index

[#] Nächste Seite