Hello there, I've set a URL-Link data column type, it works fine so far. What I want to is to open the link in a popup within the site, not a new page as it currently works.

It would be great if i could pass an HTML code snippet such as:

<div class='popup' onclick='myFunction()'>Click me!
<span class='popuptext' id='myPopup'><img src=''></img></span>
</div>

I tried to set it as a string but it doesnt convert it to html.

Was there a similar case in the past which you gave a solution? Or any new ideas on how I can do it?

Regards

AS

I don't work here but I stayed at a Holiday Inn Express once. I stopped by to see if they'd answered my private question, so might as well assist a little while I'm here. On the HTML front, there probably is a way to do it, although for wpDataTable images it looks like you can either upload the image or add a link (I do the latter like you do , from a Google Sheet in my case). Anywho, the guys who work here might have a way. They do mention Lightbox (look it up) automatically working with the Lightbox2 plug-in, but that thing hasn't been updated in many years and I don't think it is currently functional. At least it wasn't for me. I tried other Lightbox plugins and didn't have any luck.

However let me share with you another, probably easier way with some Custom CSS if you don't mind hoverin' in lieu of clickin'. There are three pieces of code.

This first part says to allow overflow content from rows be visible. If that doesn't work for you, it can be adjusted. StackOverflow is your bff here.

table.wpDataTable tr td {overflow:visible !important;}

The second part basically tells the pictures to take it slow in the transition. Not so herky jerky. Note that .pic is the CSS class I give the image column. You can give your columns special CSS class names , and it is helpful here to prevent confusion and so on . Img = your pictures. 

I shamelessly stole the second and third portions from the following SO question.

.pic img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
    -moz-transition: all 1s ease; /* Firefox */
    -ms-transition: all 1s ease; /* IE 9 */
    -o-transition: all 1s ease; /* Opera */
    transition: all 1s ease;
}

The last part tells the pics to magically transform upon hover. You can adjust this as needed.
  
.pic:hover  img{-webkit-transform:scale(1.25); /* Safari and Chrome */
    -moz-transform:scale(1.25); /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */
    -o-transform:scale(1.25); /* Opera */
     transform:scale(1.25);}

hope that helps.

Follow up that the first part -> table.wpDataTable tr td {overflow:visible !important;}  is only needed if the hover enlarge is bigger than the cell body. It probably would be, but just a fyi.

@Dan

Hello Dan, thanks for your reply,I didnt work for me though. I think I did it as you mentioned, no luck. I did try other plugins instead of Lightbox 2, no luck either. There may be a plugin which will do the job but I cannot find it.

@Milan

Milan thanks for your reply,I leave in Greece so the time difference is just +1, so I'm fine.

In regards to the solution provided on your support site, the one with the Wordpress 2 plugin solution https://wpdatatables.com/documentation/column-features/image-columns/, doesnt work on my site. The plugin is 2 years old and out-of-date. Although it works on your sandbox, it doesnt work on my setup. However, this solution looks idea if there's another plugin doing the same job, though I cannot find any (tried at least three).

May be there is a way to render HTML code, so I can pass an HTML ahref with javascript on click and use http://fancyapps.com/fancybox/3/ to open the image in a lighbox. Is there?

Any other ideas? 
It's very crucial for my project to open the link WITHIN the site and not in a new page.

If you want, you can email me at [email protected] and I can try to help you. Pretty sure I can get it to work. You just have to send me a link to your site and I can use inspector to make the css work and then convey what you need to do.

@Milan

I've installed Easy Fancybox https://wordpress.org/plugins/easy-fancybox/ which is update and works. Check this page here: http://traderobotix.com/?page_id=13282

Click on the image/chart on top of the page and you will get  the lightbox up. If you click on an image in the top row (not all of them are currently hacing a link as I haven't changed the database field content) you dont get the same action, even though the html code rendered is the same (I've checked that by inspecting the element).

There's also a note within the plugin's setting which says: "To make inline content open in an overlay, wrap that content in a div with a unique ID, create a link with target "#uniqueID" and give it a class "fancybox-inline" attribute."

Does it make any sense to you, whether it's related or not?

Any ideas?

Do you need admin credentials to check it for yourself?

Hi Milan,

please have a look again, as I ve previously mentioned the table image links were not produced correctly for all rows, i fixed and stopped the data feed so you can have a look anytime today.

NOw the links look the same, apart from the 'noopener'.

I look forward for your reply.

AS

According to this https://wpdatatables.com/documentation/column-features/string-columns/ , string column can be used to render HTML. I tried this as well but didnt succeed:

<a href="/Signal_Screenshots/M5/GBPUSD_30_51_20180226_23_31_07.gif" target="_blank" rel="lightbox[-1] noopener"><img src="Signal_Screenshots/M5/GBPUSD_30_51_20180226_23_31_07.gif" width="290" /></a>

I tried single quotes instead of double quotes, nothing changed.

Any thoughts?

Hi Milan,

why do you need to edit the table? It's not going to be editable anyway.

As far the FTPLink column concerns, the field is called shd_ScreenShotLink on the DB and it's a varchar(25).

If you see the third row (the first with an image), the field data is set to:

<a href='/Signal_Screenshots/M5/GBPUSD_30_51_20180226_23_31_07.gif' target='_blank' rel='lightbox[-1] noopener'><img src='Signal_Screenshots/M5/GBPUSD_30_51_20180226_23_31_07.gif' width='290' /></a>

I did this to try set the wpDatatables field FTPLink column type to String in order to test whether the HTML can be rendered, but didnt succeed.

The fourth row is set to:/httpdocs/Signal_Screenshots/M5/USDCHF_20_14_20180227_13_20_02.gif||/Signal_Screenshots/M5/USDCHF_20_14_20180227_13_20_02.gif

which works if column type is set to Image but the link is opening to a new page.

If you need access to phpMyAdmin I can grant you.

Looking forward for your reply.

AS

If you show me how to render HTML I can do the job. Here https://wpdatatables.com/documentation/column-features/string-columns/ you mention that HTML can be rendered through String column type, but I didnt manage to do it. Any help on that?

I've also gone through your FAQ and found this: https://wpdatatables.com/help/faq/#faq/how-to-disable-opening-links-in-a-popup

How to disable opening links in a popup?

File that is responsible for rendering link columns is /source/class.link.wpdatacolumn.php
By opening that file you can see code for creating html anchor element with attribute “target=’_blank'”.
By changing ‘_blank’ value to ‘_self’ will cause link to open in same page instead of new window.

Do you think that this could solve the issue with the link?

I just checked /source/class.link.wpdatacolumn.php and the relative attribute is indeed set to "target='_self'". There's code for <a href > may be we can work the css class and onclick javascript through here, what do you think?

So you didnt find any solution other tweaking  /source/class.link.wpdatacolumn.php?

I'm a bit confused. Can we take it from the beginning?

I need to display an image which will be clickable to open a lightbox, as in the following example:

https://wpdatatables.com/documentation/column-features/image-columns/

It cannot be done as the plugin used in the example doesnt work with latest Wordpress. I tried other plugins and found one which works for any image linked but not for an image in a wpDataTable. See below:

http://traderobotix.com/?page_id=13282

As long as wpDataTable doesnt offer a lighbox feature on cling an image, then:

1. I have to create the lightbox, either with a pluging (cant make it work) or with custom html (css and JS). I tried to render HTML with a string column type, no luck, at least I didnt managed to, may be you can help on that.

2. If the column type is URL Link, then I dont see how I can set onclick to the javascript method used for the lightbox, only button class can be set.

3. Another solution is to do it by tweaking  /source/class.link.wpdatacolumn.php, is that right?

Which of the above is the right solution to work around this issue?

I made the following adjustments:

1. column type =Image

Tweaking class.image.wpdatacolumn.php file as follows:

if (FALSE !== strpos($content, '||')) {
            list($image, $link) = explode('||', $content);
            $formattedValue = "<a href='{$link}' target='_blank' rel='lightbox[-1] noopener'><img src='{$image}' /></a>";
        } else {
            $formattedValue = "<img src='{$content}' />";
        }

The source code now is:

<a href="/Signal_Screenshots/M5/NZDUSD_200_68_20180227_13_18_52.gif" target="_blank" rel="lightbox[-1] noopener"><img src="Signal_Screenshots/M5/NZDUSD_200_68_20180227_13_18_52.gif"></a>

IT DOESN'T WORK! Although it should. The "rel='lightbox[-1]" was there anyway. 

2. column type=URL Link

I will try a JS script now.

Set a class to 'fancy image' (which is the plugn used), nothing done.

if (FALSE !== strpos($content, '||')) {
            list($image, $link) = explode('||', $content);
            $formattedValue = "<a class='fancybox image' href='{$link}' target='_blank' rel='lightbox[-1] noopener'><img src='{$image}' /></a>";
        } else {
            $formattedValue = "<img src='{$content}' />";
        }

Removed target completely, no luck either!!!

It seems that there's something within wpDataTable that overrides rel='lightbox' or the class.

I will try a custom JS and CSS combination as a last solution.

I've included:

<link href="http://traderobotix.com/wp-content/themes/investment-business/css/lightbox.css" rel="stylesheet" type="text/css">
<script src="http://traderobotix.com/wp-content/themes/investment-business/js/lightbox-plus-jquery.js"></script>

and worked :)

Thanks for everything, Milan.