beginners questions serie: if HTML is in the lightbox, how to define width in %

Maybe, that we still have some misunderstandings. Perhaps it will help, when I can show up a sample, how I want Mediabox CK to work in my website:
I have an example from an older draft and study design of a website. There the function of the iframe in a modalbox is realized very good. (And also, the playing of video and audio is as I like it.
If you open this site: idcreativ.de/index.php You can try the iframe / modalbox by clicking on the button "Hier geht's zum Text". You will experience, how responsive it is, on real desktop and also on real smartphone. You can change the smartphone from portrait to landscape and the modalbox will change its size adequately. Especially by the big top and bottom margins in portrait mode, the visitor will always recognize, that he is not visiting a regular website but the content of an article within a modalbox. Thus he can go on surfing only by closing the modal at first, instead of searching for a navbar.
BTW: This design has been created by the PLYR framework, a JS framework containing also media player and it is here: plyr.io/

This sample is concerning also the other questions, I had put here in this forum within the last days.
by raphi

Please Log in or Create an account to join the conversation.

I now have bought the license of the Pro version of Mediabox-CK just in order to honour your engagement, to modify Mediabox according to my wishes. Maybe, that the additional features of Mediabox-CK Pro will make it easier, to achieve my goals?

Would you please have a look at the URL, I have mentioned in my pervious post? There we have a Joomla 3 Website with a solution for HTML in iFrame within a lightbox. This is realized by the combination of "lightbox.js" and "plyr.js" and eventually "jquery.events.touch.min.js". This combination does not work in combination with my actual website, where we try some modifications on Mediabox-CK actually. But this old solution will show you, what I want to achieve:
I want to define the width and the height of the mobilebox in percentage values. By this, the visitor will easliy see, that he is watching a webpage in a lightbox (without any navigation). The quick identification as a lightbox is acertained by the dark overlay, which should surround the mediabox.
But actually, there is no dark overlay surrounding the content, because the mediabox and its iframe will fill up the entire screen.

The best solution would be, if I could define width and height in pixels for desktop. And if a mobile / tablet is recognized by Mediabox-CK, then the width and height of the mediabox / iframe will be replaced by automatically calculated width and height of 80%. Of course this may not be applied to video, audio or images.

There is another usabilty factor, I want to achieve on all devices and not only on dekstops: I would prefer, that the lightbox will close on any touch, which is not in the content of the mediabox but in its surroundings. Thus it will close not only by strictly tapping the X close button, but also on any click or tapping on the dark overlay area.

If you want, you can give me your mail address and I will send you the link to three videos, which I have taken from my smartphone, when using Mediabox-CK on two browsers in portrait and in landscape mode. The third video demonstrates the old solution with the above mentioned combination of scripts.

We are very close to finish the modifications!

Sorry... I have found another one: The caption text will not disappear on mobile devices, although the necessary CSS definition is present in the CSS:
Code:
#mbCenter.mediaboxckmobile #mbCaption { display: none; }
by raphi

Please Log in or Create an account to join the conversation.

Should I start a new thread with this issue? Or is this issue related to the modifications, you have made for me?

I have tried to modify something within the mediaboxck.css (the version, you have sent me via dropbox. And I have found, that the insert of "border: 3px solid red"
Code:
#mbMedia > iframe, #mbMedia > object, #mbMedia > img, #mbMedia > video, #mbMedia > audio { max-width: 100%; max-height: 100%; position: relative; border: 3px solid red; }
will affect the mediabox on desktops, but will not influence the mediabox on mobiles.

When I add the border definition to
#mbCenter.mediaboxckmobile
or to
#mbCenter.mediaboxckmobile iframe

then nothing is influenced neither on mobile nor on desktop! This is also the case, when changing some width or height definitions, if they are related to mobile!

Therefor I assume, that all IDs and classes, related to mobile, are not active.

In order to an effective communication, I will list my settings in the MediaboxCK plugin:
Code:
General Options: ItemID of pages... 0 Attribute to be applied: rel Attribute name: lightbox Fullscreen: no Default width: 640 Default height: 360 Show caption: yes Show counter: no Style options Theme: Theme 1 Size of controls: Big Rounded corner radius: 10px Shadow offset: 5px Overlay opacity: 0.8 Background color: #000000 Page background color: #000000 First texts color: #999999 Second texts color: #ffffff Effect options Use resize effect: yes Effect duration: 300ms Initial width of the box: 320px Initial height of the box: 180px Mobile options Enabel for mobile: yes Force mobile behaviour: No Resolution value: 640px
Last Edit:1 year 3 months ago by raphi
Last edit: 1 year 3 months ago by raphi. Reason: settings added

Please Log in or Create an account to join the conversation.

please let me take one info after the other
first of all, you are talking about the iframe to show an url. Mediabox CK manage that automatically into an iframe if you point to the url like that
Code:
<a href="URL" rel="lightbox">click here</a>

This is realized by the combination of "lightbox.js" and "plyr.js" and eventually "jquery.events.touch.min.js". This combination does not work in combination with my actual website, where we try some modifications on Mediabox-CK actually

you don't need that and you don't need any modification to show an url

Please don't write a roman ;) , just answer to my questions simply, it will be easier to manage
setup a link to an url, and go in the plugin options >> setup fullwidth to yes

check and tell me

Joomlack Webmaster and Developer

by ced1870

Please Log in or Create an account to join the conversation.

I have done, as you just told me. The link is OK and in the plugin settings, I now have set it to full width.

The result:
1.) On any device, there is a very small margin around the mediabox, where the visitor can close the mediabox by clicking / tapping.
Improvement: If this area would be larger (on mobiles only) at the left and right side on landscape, or at the bottom and the top on portrait the visitor would have a chance to find and use it. On desktop, this region is not relevant, because the fact, that the visitor is watching a lightbox, is evident.

2.) The video, the audio (controls) and the iframe is now scaled to full width on desktop and it scales the video above its original resolution of 720p = not acceptable.
Improvement: The width and height values within the mediabox link don't have any influence. But they should have, when he mediabox is displayed on desktop. And on mobile width and height in a percentage value could be the solution.

3.) In the documentation of Mediabox-CK, there is the hint, how to let show the description (data-title) when on mobile. I did not follow this hint, because I would prefer to hide the description beneath the mediabox in order to enlarge the available space for the mediabox content. But independent from the setting "full width = yes" the description shows up also on mobiles.

Of course, I don't have the old scripts (plyr / lightbox.js) loaded, while I have checked the actual results. I have decided, to use Mediabox-CK for my websites, although we are still optimizing it actually. I trust, that we will come to a good solution.
by raphi

Please Log in or Create an account to join the conversation.

Hi
1/ you don't need this area to close the lightbox, this is only a visual adjustement. There is a close button to be used to close the lightbox on any device

2/ you can add this css code to control the max-width of your video and center it
Code:
#mbMedia > video { max-width: 960px; margin: auto; display: block; }

3/ have you used the option "show caption" >> NO , in the plugin options ?
this will hide the caption on any device

CEd

Joomlack Webmaster and Developer

by ced1870

Please Log in or Create an account to join the conversation.

Time to create page: 0.765 seconds

Fast and powerful creation, customizable and responsive.

Read More

We have 802 guests and 2 members online