Full column 2x2 Lightbox Image with thumbnail in Center (X 5.2.5)

To be able to understand what I’m going for, see the home page at https://www.bustersvisionedu.org What these are is Lightbix videos, with the thumbnail image right in the middle of the main image. I did this in 2014. What I would like is to know how to do the same thing in X 5.2.5 (Cornerstone 2.1.7).

I can do this kind of, but I can’t seem to get it right…especially the lightbox thumbnail poitioning.

Hi there,

I think you can use the same method you’ve used before in Cornerstone, you will need to add a section and divide that section width columns. Inside each column add an image element.

Then use the method below to add lightboxes:

To add the lightbox code you can use the raw content or classic text elements.

Thank you.

I didn’t use Cornerstone the first time. This is one column:

[x_column bg_color="" type=“1/2” style=“padding: 1px 1px 1px 1px; “][x_image type=“none” style=“width:100%;” src=“https://www.bustersvisionedu.org/wp-content/uploads/2017/04/boo-website-video9-2.jpg” alt=“boo light box video” link=“false” href=”#” title="" target="" info=“none” info_place=“top” info_trigger=“hover” info_content="" class=“man”][x_text class=“fixed”][image src=“https://www.bustersvisionedu.org/wp-content/uploads/2017/05/playbutton11.png” link=“true” alt=“Animal Education Puppy Mill” class=“man x-youtube-lb” href="//www.youtube.com/embed/XksyLZgM7cI" lightbox_video=“true”]
[lightbox selector=".x-youtube-lb"][/x_text][/x_column]

At any rate, if I just put the raw contentent in a clasic text eliment it will work?

I tried something similar before, but was unable to position the lightbox thumbnail. However, I was NOT using a “Classic” text eliment.

In my attempt, I used the PRO/new text eliment in my attempt, not Classic text.

Hi there,

Kindly use the classic text element or raw content element in this case. The new V2 text element is not suitable for such a thing.

Also kindly get back to us with the live link to the page that you’ve added the lightbox and the section that you have problems regarding the thumbnails.

We will try to check and give you proper suggestions.

Thank you.

Gosh you guys reply fast! thanks.

Glad that you are satisfied with our support till now :slight_smile: . We will be standby to get the result of the case with the suggested method to follow up.

Thank you.

I wasn’t able to make it work with the Clasic text eliment…likely just me. However I did achieve what I wanted using the “New” text eliment . Anyway, Thanks for pointing me in the right direction.

Glad that you have managed to implement the feature which you want. :slight_smile:

Thank You Very Much. This is the result https://www.bustersvisionedu.org

This is the tiny page specific CSS in case anyone looks at this:

.page-id-4756 .x-container .x-column .fixed{position:absolute;z-index:999;left:45%;top:35%}

Hi there,

Thank you for sharing the information. This will help our community to get things done easier if they encounter the same case.

Thank you for taking the time and for your contribution.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.