[spaulgalParticipant]

Hi there…
I’m using lightbox for “related videos” on each of my pages. Here’s an example:
http://colorsstudios.com/?page_id=2288

I’d like to improve the implementation in two ways. First, I’d like to add a title to each video. Maybe a small caption below each thumbnail or maybe the title pops up on roll over? How can I achieve this?

Also, the actual lightbox video that pops up seems cumbersome. Can I streamline it? My logo also seems squeezed out of proportion. Thanks!

[RupokMember]

Hi there,

Thanks for writing in! Are you using shortcode for that? Could you share your code so that we could check your setup and see if we could assist you to add a title or caption. A screenshot of what you are trying to achoeve would be appreciated.

And I can’t see the issue you mentioned. Kindly add a screenshot for that too.

Cheers!

[spaulgalParticipant]

Hi and thanks.

here’s an example code:
[image src=”http://colorsstudios.com/wp-content/uploads/2015/06/004Promo-540-500×300.jpg” link=”true” href=”//player.vimeo.com/video/130056531″ lightbox_video=”true”]
[lightbox thumbnails=”true”]

Also I’m attaching two screenshots of what happens when that button is pressed (Lightbox)
In each you can see how the log is stretched out of proportions. If you’ll notice the mouse placement in the first, the second is what happens when that button I’m hovering over is pressed. Notice how all the buttons double.
Thanks!

[spaulgalParticipant]

Here are those images

[spaulgalParticipant]

Files

[LelyModerator]

Hello There,

Thank you for the screenshot. I can see the issue with thumbnail that is overlapping that seems to be double. Would you mind providing us with login credentials so we can take a closer look to the setup of the page? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[spaulgalParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

I went ahead and fixed the overlapping issue of the video thumbnails. I edited each text element content and remove the lightbox shortcode. You only need one lightbox shortcode to trigger all three videos. I also added a selector so that it will only display the video thumbnails and no other images unlike before that you were seeing the logo. I only added the lightbox shortcode in the last column:

[image class="my-video" src="http://colorsstudios.com/wp-content/uploads/2015/07/bestof005-5401-500x300.jpg" link="true" href="//player.vimeo.com/video/134643395" lightbox_video="true"] 
[lightbox selector=".my-video" thumbnails="true"]

If you need anything else, please let us know.

[spaulgalParticipant]

This is great. I need to now copy this on the other pages on this site so I’m trying to understand what you did–
Looks like the only difference in the three instances is the
[lightbox selector=”.my-video” thumbnails=”true”]

code at the end of the last.

ALSO– how about the title? I want to add the title of the videos either just below the thumbnail or on rollover.

Thanks

[RadModerator]

Hi there,

Yes, the change is class=”my-video” for image shortocde, and selector=”.my-video” for lightbox shortcode. You can always use different class and selector, but the pair should always match. And selector should start with a dot if it’s selecting the class.

All available options is here http://theme.co/x/demo/integrity/1/shortcodes/responsive-lightbox/# and title is not included.

Thanks!

[spaulgalParticipant]

If there’s no way of placing titles on the thumbnail itself… how can I place small titles (h6 or smaller) just below each thumbnail?

Thanks

[ChristopherModerator]

Hi there,

Please try this code :

[image class="my-video" src="http://colorsstudios.com/wp-content/uploads/2015/07/bestof005-5401-500x300.jpg" link="true" href="//player.vimeo.com/video/134643395" lightbox_video="true"] 
<h6 class="man">title</h6>
[lightbox selector=".my-video" thumbnails="true"]

Note that won’t be displayed in lightbox.

Hope it helps.

[spaulgalParticipant]

This is great. My last concern is how the titles appear on mobile. As you can see in the attached picture, the titles are confusing as to if they correlate with the video above or below. I don’t really want to do a custom build for mobile, but I’m wondering if I can modify the “man” class to slightly change the buffering.
Where is the “man” class located?
Is this the right way to go about this?

[spaulgalParticipant]

image attached

[ChristopherModerator]

Hi there,

Please add the following code in Customize -> Custom -> CSS :

@media (max-width:767px){
a.x-img.my-video.x-img-link {
    margin-top: 15px;
}
}

Hope it helps.

[Author]

Posts