Open image in a table in another browser/pop up window capablity

  • Hi Tobias…I added a request to a former topic regarding image pop-ups and realized that you probably wouldn’t see it. The wp-table reloaded forum is at: https://bit.ly/kvZInX

    The following is my request based upon the info discussed in the original forum topic. But to be clear, I am looking for the ability to click on an image inside a table cell and open that image in a new browser/window. Also, is there a way to print an image a well?

    Thanks again and apologies for any confusion.

    Respectfully,

    Matt

    “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”

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter marketzeitgeist

    (@marketzeitgeist)

    Hey Tobias…I found the print plugin options you detailed in another’s request…which is working well…But, I still have questions regarding: opening a new browser for images similar to the functionality you have for links – “Links in new window” in Plugin Options. Perhaps there is a way to use this feature for images as well?

    Thanks again,

    Matt

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    exactly, for printing the tabel, I suggest using the “TableTools” extension for DataTables.

    Now, to open an image in a new window, when it is clicked, all you need to do is to combine the HTML code for an image with that of a link.

    If you activate that “Links in new window” checkbox on the “Plugin Options” screen, before creating your first link, they will open in a new window, when clicked.

    To start, click the “Insert Image” button below the table and choose your image. Find the URL of the image and copy that to e.g. a text file. We’ll need it in a minute.
    Then click “Insert into post” to insert the image. That will result in some HTML code that is added to the cell, like this:

    <img src="https://www.example.com/image.jpg" alt="Image Description" />

    (maybe a little bit more complex, but this is the important code).
    Now, you will need to select this HTML code and copy (actually cut) it (Press Ctrl+A and then Ctrl+X).
    Then click the “Insert Link” button. As the URL, you will need to insert the URL that you copied into the text file in the previous step.
    As the Link text, you will need to insert the HTML code that you just copied/cut from the cell. (Yeah, a lot of copy/pasting, so a text file that is open parallel while help a lot, as a clipboard.)
    As a result, you should have HTML like this in the cell:

    <a href="https://www.example.com/image.jpg" target="_blank"><img src="https://www.example.com/image.jpg" alt="Image Description" /></a>

    And that’s it. If you now click on the image, it will open in a new window. For nicer results, you might need to play around with the URLs in the <a> and <img> HTML tags. In the <a> tag, you’ll want the URL of the image in full size, while in the <img> you’ll only want the URL of a thumbnail (which WordPress created for you already, when the image was uploaded).

    Regards,
    Tobias

    Thread Starter marketzeitgeist

    (@marketzeitgeist)

    Brilliant Tobias!

    I will study this very closely and let you know how I apply these instructions in different situations.

    I am confident that may other users of your plugin will find your response extremely valuable as well.

    Thanks again and take care,

    Matt

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Open image in a table in another browser/pop up window capablity’ is closed to new replies.