Hello, I am creating a table with stock market data that has over 50 rows and I need the last cell in each row to have a text link that opens a pop up with an iframe displaying the current stock price.
I am using the popup plugin "Popup Anything" to create the unique popups for 50+ stocks with code like this -
Ex:
[advanced_iframe use_shortcode_attributes_only="true" src="https://www.wsj.com/market-data/quotes/AAPL" width="100%" height="1000"]
I have built it and everything looks and works perfectly, but the problem is that with 50 popups / iFrame it takes the page 30-60 seconds to fully load and during that time the iframe does not display at all or does not display correctly. When I test using a table with only 3 rows and 3 iframes it loads fast and works great.
Is there a way to stop the preloading of the iFrames source until someone clicks the link to open the popup?
Thank you for any help you can offer.
J
Where is this popup anything plugin here in your example?
You can use the included popup solution. It only loads the iframe when opened:
http://www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo/show-the-iframe-as-layer
Not sure if you can also use the included lazy load. I need to understand first how you use other plugin.
Best regards,
Michael
Thanks for the quick reply. the code in my 1st comment is placed in popup anything - (screenshot attached)
in popup anything, I have created each separate popup with the code above, but using the different urls for each stock.
I will look at the included popup solution you suggest. With your included popup, would this keep the browser from preloading all the iframe content when the page loads and speed up time when 50 or more iframes will be available onclick?
Another question, I am confused about the ids. I see ids in your example code below and in other tutorials, but I don't understand what they are referencing or what attributes they control. Are the id settings created in the plugin dashboard?
Example 34: Change link targets and show the iframe as layer
This example shows the feature that links on the parent page are not opened in the same page or a new tab but on an extra layer like a lightbox. So your user does not leave your page anymore!
The following 2 links have both set href="//www.tinywebgallery.com/blog/advanced-iframe/advanced-iframe-pro-demo" and target="_blank" in the code. Link1 has the id="linklayer1" and link2 has the id="linklayer2". This example does modify link 2 that the content is not opened in a new tab but in a layer.
You have links that should open an popup. The plugin has to know which links to open. You can use "a" to open all links yon your page in a popup or only the ones you define e.g. with an id. This are the normal id of a element. you can also us classes or whatever identifies you links in the html.
Best regards, Michael
