Tabulizer with lighbox for images or youtube videos

Tabulizer allows to use any sort of HTML code for your table cells, including the code to generate a lighbox for a picture or a YouTube video. The two approaches to do that are discussed in this article.

Approach #1: Include the required HTML code

In this basic approach, all required code is entered in the cell. Tabulizer does not have a built-in lightbox plugin, but it's easy to use the one that comes with your Joomla template/Wordpress theme or use a custom one.

Source data:

Title^Video Link  
How to import Facebook group or page events into your Joomla site^<a data-lightbox="width:560;height:315;" href="https://www.youtube.com/watch?v=sUA2FFpL4FA">View</a>
How to import Facebook group/page events into your Wordpress site^<a data-lightbox="width:560;height:315;" href="https://www.youtube.com/watch?v=5Sj6BUcAtuM">View</a>

Resulting table:

Title Video Link
How to import Facebook group or page events into your Joomla site View
How to import Facebook group/page events into your Wordpress site View

 

Approach #2: Include just the picture filename, or the youtube video ID along with a replacement rule.

An even better alternative is to use a replacement rule and construct the lightbox/picture or lightbox/youtube HTML code dynamically. This makes your life easier as you have to type less (or reduce the size of the input file), plus it's a more future proof solution, since if you decide to change the lightbox in the future you only need to update the replacement rule.

In this case, we want to make the following replacement needs to take place: From:

VideoID

To:

<a data-lightbox="width:560;height:315;" href="https://www.youtube.com/watch?v=VideoID">View</a>

therefore, the settings for the replacement rule are the following:

  • Element: Column
  • Range: 2
  • Element Section: 2-L1 (we want to exclude the top header row)
  • [Data/Replacement]
    • Find: (.+)
    • Replace with: <a data-lightbox="width:560;height:315;" href="https://www.youtube.com/watch?v=\1">View</a>

If you are familiar with regular expressions you will immediately notice the use of them if the replacement fields (find/replace with). Note the these values should be base64 encoded, so don't forget to click on the Encode link before saving the rule.

Sample data:

Title^Video Link  
How to import Facebook group or page events into your Joomla site^sUA2FFpL4FA
How to import Facebook group/page events into your Wordpress site^5Sj6BUcAtuM

Resulting table:

Title Video Link
How to import Facebook group or page events into your Joomla site View
How to import Facebook group/page events into your Wordpress site View