WordPress.org

Ready to get started?Download WordPress

Forums

WP-Table Reloaded
[resolved] insert hover over "pop up" content and image? (10 posts)

  1. dali3927
    Member
    Posted 3 years ago #

    Hey,
    I'm using this plugin for my site, I know there are option to insert link and image in the table. I'm wondering is that possible that I could insert some content and images, every time when it mouse over, it would show in a certain size pop-up window?

    Thanks,
    Darren

  2. TobiasBg
    Member
    Plugin Author

    Posted 3 years ago #

    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

  3. dali3927
    Member
    Posted 2 years ago #

    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

  4. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    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

  5. dali3927
    Member
    Posted 2 years ago #

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

    Thanks,
    Darren

  6. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    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

  7. dali3927
    Member
    Posted 2 years ago #

    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

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

    Below you have an example and a how to

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

    here is the detail how-to from Eva:
    download the zip from here http://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 http://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="http://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="http://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

  8. marketzeitgeist
    Member
    Posted 2 years ago #

    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).

    http://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

  9. TobiasBg
    Member
    Plugin Author

    Posted 2 years ago #

    Hi Matt,

    I will answer to this in duplicate thread at http://wordpress.org/support/topic/open-image-in-a-table-in-another-browserpop-up-window-capablity.

    Regards,
    Tobias

  10. marketzeitgeist
    Member
    Posted 2 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic