Photo Gallery Forums

Hello Karl,

I have the possibility to let the page intro a text invite. I would like to run a video intro. Is there the possibility to display a text over the video?

Sorry for my bad English.

Hi. I would have liked to answer "yes", but unfortunately there is no X3 feature for this, and when looking into a fix, it was more complicated than I anticipated. I will look into this for a future release, but in the meantime, it would have to be done by the javascript and CSS fix below ... I would only proceed if you were somewhat comfortable with html and CSS:

Go to panel > settings > custom > custom CSS: Custom Javascript: Should now look like this:


Then, in the PAGE > content where you want to add the text, add inside a div element with "overlay-text": The text will overlay the video and center-align. You can use HTML inside the overlay-text element, but you will need to adjust the CSS if you want to customize the text/style/size/color.

:)!

npn wrote:Could you tell us if it is possible to use Page Intro plugin without photo above video intro only to use title description and content of page intro? The suggestion made above generates some errors in mobile versions and using scroll.

Sorry, your question is not clear. You want an intro without photo or video? The only point of that would then be to use a gradient or background color, which is possible with the image intro plugin. Examples:
https://demo.photo.gallery/examples/plu ... -gradient/
https://www.photo.gallery/contact/

Yes, but surely you are not suggesting we implement it like this? The video-intro and page-intro have different logic in terms of sizing, and of course it would only work if you use a transparent (or semi-transparent gradient). This is a hack at best, and it's pointless to try to implement this as a feature with layered intro plugins.

If anything, why not a feature to add title + description also over video, as a feature of the video intro plugin? That would at least be logical and feasible.

Hi Karl !
I try to tell you that maybe the title, the description (and maybe also only gradient) are a common tool (common possibility) to all intro plugins. that they are separated enhance the number of options and it is simply a suggestion in the way of organizing it. I really appreciate your work. Thanks!

Right, it would perhaps be best with one all-inclusive intro plugin that could display gradients, images and video. For now, this might have to wait for an update to the X3 core (which I am considering). 

mjau-mjau wrote: 안녕하세요. "예"라고 대답하고 싶었지만 안타깝게도 이에 대한 X3 기능이 없으며 수정 사항을 살펴보면 예상보다 복잡했습니다. 향후 릴리스를 위해 이것에 대해 살펴 보겠지만 그 동안에는 아래의 javascript 및 CSS 수정으로 수행해야합니다 ... html 및 CSS에 어느 정도 익숙한 경우에만 진행하겠습니다.

패널> 설정으로 이동 > custom > custom CSS: Custom Javascript: 이제 다음과 같아야 합니다. 그런 다음 PAGE > 텍스트를 추가하려는 콘텐츠에서 "overlay-text"를 사용하여 div 요소 내부에 추가합니다. 텍스트가 비디오와 중앙에 오버레이됩니다. -맞추다. 오버레이 텍스트 요소 내에서 HTML을 사용할 수 있습니다.

Code Select all

.overlay-text {
  position: absolute;
  top: 0;
  z-index: 33;
  color: #FFFFFF;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  pointer-events: none;
}
.overlay-text * {
  pointer-events: auto;
}

Code Select all

function x3_load_page(){
  var body = $('body'),
      stale_overlay = body.children('.overlay-text'),
      overlay = body.find('.content .overlay-text');

  if(stale_overlay.length) stale_overlay.remove();
  if(overlay.length) overlay.appendTo(body);
}

Code Select all

<div class="overlay-text">
Blah Blah blah <strong>more bold text!</strong>
</div>

Hi~ karl~~~

When I applied this code, the text appears on the menu bar.

Is it a z-index problem?

TristanJo wrote:Is it a z-index problem?

Do you have a link? That code was provided 5 years ago ...

mjau-mjau wrote:

TristanJo wrote:Is it a z-index problem?

Do you have a link? That code was provided 5 years ago ...

http://3.34.138.237/

plz~ karl~~~~~🥰

TristanJo wrote:plz~ karl~~~~~🥰

It seems to be working, no?

mjau-mjau wrote:

TristanJo wrote:plz~ karl~~~~~🥰

It seems to be working, no?

"Overlay text" is on top of the menu.:rofl:

Maybe try this instead. In the CSS, change z-index to 3 instead of 33: Javascript, please try this: