WebSite X5Help Center

 
Christian Rodemund
Christian Rodemund
User

Bildergalerie mit Audiokommentaren  de

Auteur : Christian Rodemund
Visité 911, Followers 1, Partagé 0  

Ich hätte gerne eine Bildergalerie kombiniert mit Audiokommentaren - also wenn ich in der Galerie weitergehe dass entweder automatisch zu jedem Bild ein Kommentar abgespielt wird oder auf Anweisung zB. über einen Button. Dies würde Prästationen wesentlich verbessern und wäre einfacher und flexibler als ein komplettes Video zu erstellen.  Meine HP   www.calcaneal-fracture.com    Ich präsentiere Techniken und Fälle, diese könnte man mit zusätzlichen Audiokommentaren deutlich besser gestalten. 

Posté le
21 RéPONSES - 2 UTILE
Daniel W.
Daniel W.
User

Beim Objekt "Galerie" (bei WebSite X5 ohne Zusatzkosten dabei) kann man "Ton" verlinken und dann wird beim Klick auf das Bild ein Audioplayer unterhalb oder oberhalb des Bildes eingeblendet.

Die anderen Effekte (bei Klick vergrößern) der Bilder sind bei "Ton" deaktiviert.

Mit Klick auf (>) wird die Audiodatei gestartet und läuft solange wie der Mauszeiger im Player- oder Bildbereich bleibt, ansonsten bricht die Ausgabe der Audiodatei ab.

Hier meine Testseite - nur das 1. Bild ist mit einer Audio-Datei (Musik) verlinkt, siehe

>> http://finde-links.de/123shop-hosteurope/bildergalerie.html

Ob auch die kostenpflichtigen Galerie-Objekte diese Möglichkeit bieten, das kann ich nicht sagen, da ich keine Objekte gekauft habe. Vielleicht können die Moderatoren dazu etwas schreiben.

-----

-----

Lire plus
Posté le de Daniel W.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

JA, im Prinzip wo immer auch ein LINK einfügbar ist, kann eine Ton eingefügt werden. Ob dieser auch bei jedem Browser und Gerät abspielbar ist, muss selbst getestet werden. Allerdings immer nur wenn man auf das Bild klickt!  Automatische wiedergabe gibt es hier nicht.

Lire plus
Posté le de Andreas S.
Daniel W.
Daniel W.
User

Hier noch die Variante einer "Bildergalerie", die nur das Text-Objekt verwendet und dort Bild, Beschreibung und einen kleinen HTML-Code für den Audio-Player verwendet - das Ganze zentriert und das HTM-Symbol markiert, amit der HTML-Code für den Audio-Player ausgeführt wird.

Bei der Variante ist der Audio-Player immer zu sehen und die Besucher wissen dann gleich, dass ihr hier zum Bild auch gleich etwas zum Hören gibt.

Für die Testseite habe ich, damit es schneller geht, immer den gleichen HTML-Audio-Player-Code verwendet. Hier müsste natürlich immer eine andere MP3-Datei angegeben werden.

(Screenshots der Einstellungen - siehe unten)

Testseite 1 >>http://finde-links.de/test123-beautyblog/bilder-text-audio.html

Testseite 2 >>http://finde-links.de/test123-beautyblog/bilder-text-audio-2.html

Bei Testseite 1 sind die Bilder gleichmässig verteilt und bei Testseite 2 unterschiedlich.

----- Raster und Trennlinien (responsive) bei Testseite 2 -----

------

Lire plus
Posté le de Daniel W.
Christian Rodemund
Christian Rodemund
User
Auteur

Mal vielen Dank für die Antworten, speziell an Daniel.

Meine Idee ist ja nicht einzelne Bilder mit Ton zu versehen sondern eine Bilderfolge/Präsentation (a la Powerpoint) sodass beim wechseln der Bilder die dazugehörige Audiodatei (Erlärung) abgespielt wird. Aber ich kenne auch bei PP keine solche Funktion. Grundsätzlich wäre sie aber sehr brauchbar  - und grundsätzlich sollte diese Funktion ja auch programmierbar sein? LG

Lire plus
Posté le de Christian Rodemund
J. M. B.
J. M. B.
User

Programmieren ließe sich das bestimmt, nur blockieren mittlerweile fast alle Browser das automatische Abspielen von Audio, wenn der Nutzer es in den Einstellungen nicht explizit erlaubt ... frown

Lire plus
Posté le de J. M. B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

x Christian Rodemund, ... (IT > De)  ... während ich auf zukünftige Entwicklungen des Programms warte, gebe ich Ihnen meine exklusive mentale Idee, die Sie aber selbst mit EXTRA-Code entwickeln können...
... praktisch würde es darum gehen, das Audio-Player-Objekt zu verwenden, ...und den Songwechsel abzufangen, um automatisch das entsprechende Bild zu öffnen...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User

Vielleicht nicht ganz das Gewünschte, doch schon sehr nahe, falls auf einem großem Bildschirm oder per Projektor auf einer großen Leinwand die Bildershows mit Audio vorgeführt werden soll.

Hinweis: Ganz am Ende gibt es noch Screenshots als Hilfe.

1) Objekt "Content Slider" (beim Programm WebSite X5 schon dabei) - dieses habe ich für meine Testseite verwendet und große Bilder als Hintergrund genommen für eine vertonte Diashow.

2) Einstellungen zu Text, Farben und Positionierungen - diese im Reiter "Stil" vornehmen.

3) Titel, Beschreibung und Button - es müssen bei der Beschreibung viele Leerzeilen eingefügt werden, damit Titel und Beschreibung nach oben und Button nach unten verschoben werden können, hier einfach testen und dann Leerzeilen hinzufügen oder entfernen bis es passt.

4) Button-Text - dieser sorgt dafür, dass der Button sichtbar ist. Wenn der Button-Text leer ist, dann ist das Bild im Hintergrund die Schaltfläche, bei der ein Klick das Player-Fenster öffnet. Die Maus muss entweder im Hintergrund bleiben (wenn ohne Button-Text) oder im Audio-Player-Fenster, damit die Wiedergabe der Audio-Datei nicht abbricht.

5) Bilder im Vordergrund - darauf habe ich verzichtet, damit die großem Bilder im Hintergrund für sich alleine wirken können, vor allem wenn eine Audio-Datei abgespielt wird.

6) Nur Diashow mit Ton - dann auf Titel, Beschreibung und Button verzichten, dann dient das gesamte Hintergrundbild als Schaltfläche, um die Audio-Datei zu starten.

7) Unterschiede Vorschau vs Browser - im Vorschaubrowser funktionierte es nur ohne Button-Text, damit die Wiedergabe dauerhaft lief, aber in Firefox funktionierte es mit und ohne Button-Text.

8) Anzeige im Browser - es wird immer nur ein Bild angezeigt und dazu Titel, Beschreibung und/oder Button angezeigt, je nachdem ob man etwas in die Eingagefelder geschrieben hat. Wenn die Maus auf dem Bild ist, dann werden rechts und links Pfeile zu Blättern angezeigt.

9) Meine Testseite >> http://finde-links.de/test123-beautyblog/content-slider.html

-----

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User

Problem bei verschiedenen Browsern

Es gibt Unterschiede in verschiedenen Browsern, deshalb bei Nutzung einer Audio-Datei auf den Button verzichten, außer die Webseite wird nur offline an Computern mit Firefox benutzt.

----- Browser Edge (Chromium) -----

----- Browser Firefox -----

------

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User

Nachtrag:

Ich habe auf Testseite die Buttons entfernt, damit sie auf jedem Browser getestet werden kann.

Der Link zur Testseite ist 2 Posts weiter oben - auf "MEHR LESEN" klicken.

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User

Nachtrag 2:

Da es Problem mit dem Audio-Player beim Linksymbol und der Auswahl "Ton" gibt, habe ich einfach einen HTML-Audio-Player-Code verwendet, durch ist immer der Audio-Player sichtbar und die Besucher wissen gleich, dass es zum Bild auch einen Ton dazu gibt.

Nur so nebenbei bemerkt - in der Beschreibung des Objekt "Contentslider" lässt sich auch HTML-Code verwenden, so dass auch folgende Textauszeichnungen möglich wären:

       <b>Fett</b>

       <b><i><u>Fett kursiv und unterstrichen</u></i></b>

Kleine Anleitung zu den Änderungen:

Bei der Beschreibung habe ich den HTML-Code für den Audio-Player eingefügt, dann den Schreibcursor an den Anfang des HTML-Codes gesetzt und rund 22 mal die ENTER-Taste gedrückt, damit der HTML-Code ganz unten in der Beschreibung ist und darüber sehr viele Leerzeilen, somit wird der Audio-Player unten auf dem Bild angezeigt.

Im Screenshot unten gibt es Hinweise und Tipps.

-----

Lire plus
Posté le de Daniel W.
Daniel W.
Daniel W.
User

Der Audio-Player sieht ja nach Browser etwas anders aus, da der HTML-Code dem Browser nur sagt, dass dieser einen Audioplayer anzeigen und die angegebene Datei abspielen soll.

Durch diesen eigenständigen Audio-Player kann die Audio-Datei einfach gestartet und gestoppt werden, zudem ist auch die Lautstärke einstellbar.

Der Audio-Player verschwindet auch nicht so leicht und beendet die Wiedergabe, falls man mal aus Versehen mit der Maus das Bild verlässt, was mir öfters passiert ist.

Das Objekt "Content Slider" lässt sich auch als vertonte Diashow nutzen - ein schöner Bonus.

Hier nochmal der Link zu meiner Testseite, damit er nicht oben mühsam gesucht werden muss

>> http://finde-links.de/test123-beautyblog/content-slider.html

-----

Lire plus
Posté le de Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

Hallo Daniel, ...aus Neugier habe ich dein Beispiel für einen „Content-Slider“ gesehen …
... als Idee gut, aber nicht sehr praktisch; ...um gültig zu sein, müssen Sie den Ton stoppen, der sich jetzt überlagert und stört, möglicherweise mit EXTRA-Code...

.

ciao

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Christian Rodemund
Christian Rodemund
User
Auteur

Hi Finde ich sehr nett dass sich wer Gedanken macht wie man das Problem lösen könnte.

Das Beispiel "beautyblog" zeigt ja die Anforderung sehr gut - wenn ich das Bild in der Galerie "Schafe" auswähle kommt der Sound der Schafe, wenn ich weitergehe - Kutschen/Pferde geräusche usw. 

Ich denke schon dass das eine sinnvolle Anwedung ist (bin auch verwundert dass es das offensichtlich noch nicht gibt) und eine wesentliche Unterstützung für "automatisierte" Präsentationen in vielen Bereichen. LG Christian

Lire plus
Posté le de Christian Rodemund
Daniel W.
Daniel W.
User

Incomedia könnte meine Ideen als Anregung für ein Zusatzobjekt "Slideshow with sound" nehmen.

Dabei sollte auch das Problem mit dem eingebauten Audio-Player behoben werden, damit es in allen Browsern funktioniert und kein zusätzlicher Audio-HTML-Code für gebraucht wird.

Evtl. Optionen für unterschiedliche Anzeigezeiten pro Bild oder ein Bildwechsel beim Ende der Audio-Datei und für ein Abwechslung beim Betrachten der Diashow unterschiedliche Effekte pro Bilderwechsel.

Damit wären die "Diashows mit Ton" eine Alternative zu den schwergewichtigen Diashows als Video.

Bliebe nur die Frage: Gibt es genug Nachfrage für dieses Zusatzobjekt und was kostet es?

Lire plus
Posté le de Daniel W.
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Das Problem wird sein, wenn solche Widgets kommen, dass die immer aktuell gehalten werden müssen, weil sich bei Audiodateien bzw. Player die in den Browser(n) eingebaut sind, sich immer bei jedem Update sich etwas ändert oder aktualisiert vom Code. Dadurch kann es zu Problemen und unterschieden in der Ansicht kommen. Jeder schreit dann "Fehlerrrrr" obwohl die Browser schuld sind. Das tut sich kein Skriptprogrammierer an. Deshalb haben solche  Plugins in Wordpress auch ein Ablaufdatum.

Lire plus
Posté le de Andreas S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

... es gibt Dutzende möglicher unterschiedlicher Anpassungen, die nicht standardisiert werden können...
... aber sobald man weiß, dass es machbar ist, können diejenigen, die das gewisse Extra haben (das "quid“), wenn sie es tun wollen, es tun und bekommen, was sie wollen...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Daniel W.
Daniel W.
User

Ich habe auf meiner Testseite die Bilder gewechselt und die Geräusche durch Musik ersetzt.

Es wird wieder der eingebaute Audio-Player (Linksymbol und Auswahl "Ton") genutzt, auch wenn es schwieriger mit dem Starten der Musik ist  - einfach das Bild weit genug hochschieben, dann erscheint das Audio-Player-Fenster unten und es ist einfacher die Musik zu starten.

Bei Beschreibung habe ich den HTML-Audio-Player-Code für den Player des Browsers entfernt und stattdessen kopierten HTML-Code von Pixabay eingebaut und per CSS formatiert, siehe

-----

     <div style="padding:10px; background-color: white; border-radius: 10px; display: inline;">

     ... (hier HTML-Code für die Anzeige von z.B.: "Music by Noru from Pixabay") ...

     </div>

-----

Damit will ich die Tests mit dem Objekt "Content Slider" abschliessen, die Möglichkeiten und Grenzen dürften jetzt bekannt sein und wer es selber testen will, findet hier im Post Infos dazu.

Die Adresse der Testseite ist gleich geblieben

>> http://finde-links.de/test123-beautyblog/content-slider.html

-----

Lire plus
Posté le de Daniel W.
Christian Rodemund
Christian Rodemund
User
Auteur

An die Moderatoren bzgl. Argument Audioplayer, Browser, Kompatibilität, Updates... Incomedia bietet bei den Zusatzobjekten auch einen Audioplayer mit Trackliste an. Müsste doch möglich sein diesen mit Bildern zu kombinieren - Bild1/Track1 - Bild2/Track2 usw.  LG 

Lire plus
Posté le de Christian Rodemund
Andreas S.
Andreas S.
Moderator
Meilleur utilisateur du mois DE

Erstelle  bitte eine neue Post mit dem Wunsch! Hier überliest man sehr schnelle diese "Anregung"!

Lire plus
Posté le de Andreas S.
Daniel W.
Daniel W.
User

Das hier ein neues Thema für den Wunsch "Audioplayer mit Trackliste - mit Bildern zu kombinieren" empfohlen wird, schiebe ich hier noch eine "Handmade"-Bildergalerie mit Ton nach, für Leute mit Zeit.

>> http://finde-links.de/test123-beautyblog/bild-ton-2.html (Testseite)

Es sind 4 Seiten, jeweils zu einem anderen Musikthema. Auf der Seite sind im Rastern oben ein großes Bild, darunter Titel und Beschreibung nebst Audioplayer, anschließende mehrere kleine Bilder, die man auch mit den großen Bilder verlinken und in der Showbox anzeigen könnte.

Lire plus
Posté le de Daniel W.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT
Christian Rodemund
... ...   ... Incomedia bietet bei den Zusatzobjekten auch einen Audioplayer mit Trackliste an. Müsste doch möglich sein diesen mit Bildern zu kombinieren - Bild1/Track1 - Bild2/Track2 usw. ... ... 

...was ich Ihnen in EXTRA in meinem ersten Beitrag vorgeschlagen habe...

.

Lire plus
Posté le de  ‪ KolAsim ‪ ‪