[Plugin: WP-Table Reloaded] insert hover over "pop up" content and image?

Hi,

basically, it is possible to add such content – however, not automatically, as the plugin does not have something like that built-in. You will need to manually program such code (HTML and JavaScript).

Regards,
Tobias

hi Tobias,
Thanks for your response. Do you know where i need to insert such code? And do you know where can I find a sample code can do this? I’m not a coding expert, so I would need some help on coding.

Thanks again,
Darren

Hi,

I assume that you would need to pieces of code: The HTML for the image in the table cells, and some sort of JavaScript in the page footer.
Unfortunately, I don’t know an example for this code, so I can’t really help with this. Sorry ??

Best wishes,
Tobias

Tobias,
I made it work by using some javascript, it’s not perfect but good enough to get what i want.

Thanks,
Darren

Hi Darren,

great, that’s really cool.
Maybe you can share the URL with the table, so that other people can see how you did it?

Regards,
Tobias

Tobias,
First, for all the credits, I should give Eva who helped me.

The solution would be to use DHTML Window (v1.1) from Dynamic Drive

https://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm script

Below you have an example and a how to

https://leetsee.com/table-and-dhtml-window

here is the detail how-to from Eva:
download the zip from here https://www.dynamicdrive.com/dynamicindex8/dhtmlwindow/index.htm script.
Then upload the files to your site’s folder
add this to your themes header:

<link rel="stylesheet" href="URL_TO_YOUR_FILES/dhtmlwindow.css" type="text/css" />
<script type="text/javascript" src="URL_TO_YOUR_FILES/dhtmlwindow.js">
/***********************************************
* DHTML Window Widget- ? Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit https://www.dynamicdrive.com/ for full source code
***********************************************/
</script>

edit the dhtmlwindow.js to adjust where are your files
I added URL_TO_YOUR_FILES/ there to get it display the buttons

imagefiles:[‘URL_TO_YOUR_FILES/min.gif’, ‘URL_TO_YOUR_FILES/close.gif’, ‘restore.gif’, ‘resize.gif’], //
Path to 4 images used by script, in that order
now you can go to your table, and add this to your cell (the div and the corresponding button)
Cell1 content:

<div id="tablecell1_content" style="display:none"><p style="height: 400px"><img title="DSCF5382" src="https://leetsee.com/wp-content/uploads/2011/04/DSCF5382-150x150.jpg" alt="" width="150" height="150" /> table cell 1 content here</p></div>
<a href="#" onClick="divwin=dhtmlwindow.open('divbox', 'div', 'tablecell1_content','Cell 1 title', 'width=450px,height=300px,left=200px,top=150px,resize=0,scrolling=0');return false"><b>click to open</b></a> your table's content here

————-
for each cell you need to add the corresponding content

<div id="tablecell2_content" style="display:none"><p style="height: 400px"><img title="DSCF5382"src="https://leetsee.com/wp-content/uploads/2011/04/DSCF5382-150x150.jpg" alt="" width="150" height="150" /> table cell 2 content here onmouseover</p></div>
<a href="#" onMouseOver="divwin=dhtmlwindow.open('divbox', 'div', 'tablecell2_content','Cell 2 title', 'width=450px,height=300px,left=200px,top=150px,resize=0,scrolling=0');return false"><b>mouseover to open</b></a> your table's content here and so on...

the easiest way to edit the “here you can add content and put images” is create a post (without saving it), upload the images, add the text and links, and when you are ready, view the html source and add it to your div, than copy the div and button to your table cell.

Hope it helps for everyone else who need this solution.

Darren

Hi Tobias/Darren,

My WordPress site requires the same “Pop Up” capabilities for images within WP-Table Reloaded tables as well. I follow most of what is required for the dynamicdrive.com script however I have one basic question regarding:

“Then upload the files to your site’s folder
add this to your themes header:”

Does this mean FTP to my Host Server files/folders where my WP theme is located?…And…can you suggest which folder I would loaded the two files (.css and .js)? For example, Would the folder be; wp-admin, wp-content, or a separate new folder altogether for these two files?

After that is completed, I then only need to modify the script and insert into the table’s cell’s where I have inserted an image…is that correct as well?

The following is only an example of a page where I would like a pop up or open a new browser when an image is “clicked” (selected).

https://www.emptus.com/marketzeitgeist/?page_id=785

This is only an example. Ideally, I will be using WP-Table Reloaded tables extensively for financial market chart images within the body of numerous new site pages. The ability to open a chart in new window/browser would truly enhance users’ experience.

On a sightly different topic…any idea how to print from one of these pop ups? That would a valuable benefit as well.

Thanks in advance guys for any advice you could provide,

Sincerely,

Matt

Hi Matt,

I will answer to this in duplicate thread at https://www.ads-software.com/support/topic/open-image-in-a-table-in-another-browserpop-up-window-capablity.

Regards,
Tobias

Ok thanks a million Tobias and I will keep an eye on that thread.