Lightbox Ultimate – Video titles

[HatchWeb]

I’m not sure if this is something that does not exist within the plugin or if there’s some better way to code than how I’ve done this. So, asking for help on whichever way makes more sense.

We are doing a grid of videos with thumbnails. They’re going in rows of 4.

We’d like to place a video title or text above each thumbnail. These are all flv formatted videos (although we may have some swf on other pages).

What I’ve had to do so far is treat the titles as their own row in the grid and make a separate section of code with the titles in place. The problem is that I have to use padding to move the titles over the thumbnails and that could get wonky from browser to browser.

Is there any way to get these titles somehow attached to the video/thumbnail itself so it is not reliant on padding and other coding efforts for positioning?

This is how the code looks right now. This is for the bottom grid. Top grid has the same concept of code.

[wp_lightbox_ultimate_fancy_gallery class=”lightbox_fancy_grid_view_gallery”]

<div style=”display: inline; white-space: nowrap; overflow: hidden; width: 100%; padding-bottom: 0px; margin-bottom: 0px;”>

<p style=”clear: none; padding-bottom: 0px; padding-left: 35px; float: left; font-size: 10px;”>RMS Home Page</p>

<p style=”clear: none; padding-bottom: 0px; float: left; padding-left: 85px; font-size: 10px;”>Class Overview Report</p>

<p style=”clear: none; padding-bottom: 0px; float: left; padding-left: 65px; font-size: 10px;”>Class Comparison Report</p>

<p style=”clear: none; padding-bottom: 0px; float: left; padding-left: 50px; font-size: 10px;”>Progress Over Time Report</p>

</div>

[/wp_lightbox_ultimate_fancy_gallery]

[wp_lightbox_ultimate_fancy_gallery class=”lightbox_fancy_grid_view_gallery”]

[wp_lightbox_flowplayer_video link=”http://s3.amazonaws.com/video.hatchearlychildhood.com/iSS-AIO/09-RMS-homepage.flv&#8221; source=”http://hatchearlylearning.com.276elmp01.blackmesh.com/wp-content/uploads/2012/12/09-rms-home.png”%5D

[wp_lightbox_flowplayer_video link=”http://s3.amazonaws.com/video.hatchearlychildhood.com/iSS-AIO/10-class-overview-report.flv&#8221; source=”http://hatchearlylearning.com.276elmp01.blackmesh.com/wp-content/uploads/2012/12/10-classoverview.png”%5D

[wp_lightbox_flowplayer_video link=”http://s3.amazonaws.com/video.hatchearlychildhood.com/iSS-AIO/11-RMS-ClassComparisonOverTime.flv&#8221; source=”http://hatchearlylearning.com.276elmp01.blackmesh.com/wp-content/uploads/2012/12/11-classcomparison.png”%5D

[wp_lightbox_flowplayer_video link=”http://s3.amazonaws.com/video.hatchearlychildhood.com/iSS-AIO/12-RMS-ProgressOverTimeReport.flv&#8221; source=”http://hatchearlylearning.com.276elmp01.blackmesh.com/wp-content/uploads/2012/12/12-progressovertime.png”%5D

[/wp_lightbox_ultimate_fancy_gallery]

[wpCommerce]

Hi, unfortunately, there is no option to do this in the plugin.

[HatchWeb]

OK. Is there any way to modify the code above so the title I am putting in is “attached” around the shortcode for the appropriate video?

I’m really just trying to get around the idea that I have to use padding to position the titles. Anytime something changes, we will have to play the “how much padding” game.

[wpCommerce]

Hi, the flowplayer shortcode you are using does have a “title” parameter. You can specify the title for each video in the shortcode just by using this parameter. By default the title is placed in the "<a>" tag. For example:

<a href="video url" title="video title"><img src="anchor image"></a>

If you want to change how each shortcode thumbnail is displayed (with title) you will have to customize the code for the shortcode in the plugin.

[krainsong]

I am having this same problem with my site, and I am updated to WP 4.1.

I want to show Vimeo videos (only) in a grid style, with auto-add thumbnails, but I’d also like the titles to show up either below or above the videos.

Also the videos are stacking on top of each other on the page, not in a grid format.

Page is at [http://tensegrityphysicaltherapy.com/testing/]

And the shortcode I am using is:

[wp_lightbox_ultimate_fancy_gallery class=”lightbox_fancy_grid_view_gallery”]

[wp_lightbox_fancybox_vimeo_video link=”https://vimeo.com/118193025&#8243; title=”Single Arm Rotation Row” auto_thumb=”1″][wp_lightbox_fancybox_vimeo_video link=”https://vimeo.com/118192375&#8243; title=”Inverted Rows” auto_thumb=”1″][wp_lightbox_fancybox_vimeo_video link=”https://vimeo.com/118193025&#8243; title=”Single Arm Rotation Row” auto_thumb=”1″]

[/wp_lightbox_ultimate_fancy_gallery]

I have spent many frustrating hours trying to get this to work, and have been using the documentation on your site and am thinking this may not be the plugin for me after all if I can’t get it to do what I need. I did not change anything in the stylesheet and I don’t know a ton about writing custom code.

My client has over a hundred videos in different categories and needs to have different ones appear on different pages. Also it needs to be easy for the staff to add new videos- so they don’t have to copy and past a bunch of code.

thanks

Karen

[wpCommerce]

@krainsong, We will need to take a closer look at your site to see what is happening. I have sent an email to your registered email address for site access. Let me know if you don’t receive it.

[Author]

Posts