Lightbox-Test mit Lightcase.JS

So sollte es eigentlich funktionieren:

https://cornel.bopp-art.com/lightcase/#demo

Und das kommt bei mir dabei heraus:

This link is direct connected to the mp3 audio!

What I want to have get done by a Freelancer:

The Videos should allways be shown in full original width, but not more, than 100% of viewport-width of course.

If a Video fills up the entire screen, the "Close-Button" must show up above the video in the top right corner. (Otherwise the visitor will have big problems to close the lightbox again.) This is very important on mobiles and tablets.

If a Joomla article is shown in the lightbox, the content region of the lightbox should have a dynamic defined distance to the edge of the screen, like in percent or em. The distance will be smaller, when the screen will be smaller.

If a Joomla article is shown in the lightbox, the content region of the lightbox has a black background on mobile browsers. This should be corrected, so that it will look similar as on desktop browsers.

If an audio is played within the lightbox, the content region should not exceed the dimensions of the default HTML-5 audio player. Actually it is far bigger.

There should be an option in the event call data-rel="lightcase" by which I can define width and height of the content area of the lightbox eventually.

All changes and optimizations on the CSS- and JS-files must be commented clearly and precisely.

At the finish of the optimization work, all functions have to be tested on all sort of platforms and device classes. The function and the looking should be as similar on all these devices as possible, especially on mobiles, iPhones, tablets etc.

---------------------------------------------

Was ich angepasst haben möchte:

Die Videos sollen mit der vollen Videogröße angezeigt werden, sofern dabei die maximale Viewport-Breite nicht überschritten wird. Dies gilt für alle Geräteklassen.

Falls ein mit 100% Größe wieder gegebenes Video den gesamten Screen-Inhalt einnimmt, muss der "Schließen-Button" in der äußersten rechten oberen Ecke über dem Video dargestellt werden. (Anderenfalls ist es kaum möglich, die Lightbox wieder zu schließen.) Dies gilt besonders für Mobilgeräte und Tablets.

Wird ein Joomla-Beitrag in der Lightbox dargestellt, so sollte der Contentbereich etwas größer als derzeit dargestellt werden, indem ein dynamisches Padding oder Margin eingeführt wird. Mit kleiner werdendem Viewport sollen die Abstände also geringer werden.

Joomla-Beiträge innerhalb der Lightbox werden aktuell auf Mobilgeräten mit schwarzem Hintergrund dargestellt. Gewünscht ist die Übername des Hintergrund aus dem Beitrag, so wie es aktuell auf dem Desktop geschieht.

Wird eine Audiodatei in der Lightbox abgespielt, so sollte der Contentbereich nur so groß sein, wie der HTML-5-Player selbst. Dies sollte natürlich bei allen Geräteklassen gleich dargestellt werden.

Es sollte eine Möglichkeit geschaffen werden, dass ich die Größe des Contentbereichs in der Lightbox durch Breiten- und Höhenangaben bei Bedarf definieren kann.

Alle Änderungen / Anpassungen müssen durch verständliche Kommentare in den jeweiligen JS- und CSS-Dateien kommentiert werden.

Abschließend soll geprüft werden, dass die Lightbox mitsamt ihren möglichen Inhaltenauf möglichst allen Geräteklassen gleich dargestellt wird, besonders auf iPhones, IPads, Tablets usw.