-
AuthorPosts
-
March 10, 2021 at 6:53 pm #1287220
Hi
I am linking Team images to Bio Pages that open in a pop up using the code https://mydomain.com/bio-page?iframe=true
It works but it’s very slow to load. I’m looking at a black pop up for 3 or 4 seconds before it loads. The client is not happy with this.
Do you have any suggestions why this is slow or how I could do this differently that would be better?
Many thanks
Tia
I include private dataMarch 14, 2021 at 11:59 pm #1288135Hey Tia,
Thank you for your patience and the link to your page.
Please take a look at this solution
This solution is to add your popup content hidden at the bottom of your page instead of using an iframe and this opens very fast.
Please try this on a test page and if you run into any bumps let me know and I’ll check with the login you posted above if you wish.Best regards,
MikeMarch 15, 2021 at 1:48 am #1288141Hi Mike
Thank you for your response. I tried that but I am getting a 404 error – I used the sample link code you gave on the 1st team member image. I know I will have to change the content of the pop-up but I just wanted to get it to work first.I’m doing the link wrong?
Thanks for your help.
TiaMarch 15, 2021 at 1:55 pm #1288282Hi,
Thanks for trying, but you have added html in the link field:
so inserting the html correctly would have worked, but I also recognize that you wish to have the team member image link to open the popup so I removed the code from your functions.php and the css from your Quick CSS and added this to a code block on your test page and customized it for you. So each team member link will need to be different, so the first one will be#team-popup-one
and each team member image will have the same custom classteam-popup
Now for the first team member popup box we will use this in a code block at the bottom of the page:<div id="team-popup-one" class="team-popup-link mfp-hide"> <p>PLACE CONTENT HERE</p> </div>
*Please Note, you can add all of your popup boxes to the same code block element, and the ID
team-popup-one
will be different for each one, i.e: team-popup-two, team-popup-three, etc. and it must also match the team member image link.Now the script and css for this to work I added into a code block at the bottom of the page, for this test:
<script> jQuery(window).load(function(){ jQuery('.avia-image-container.team-popup a.avia_image').addClass('team-popup-link'); jQuery('.team-popup-link').magnificPopup({ type:'inline', midClick: true }); }); </script> <style> .team-popup { position: relative; background: #FFF; padding: 20px; width: auto; max-width: 500px; margin: 20px auto; } </style>
Now clicking the first team member loads the popup – very fast 🚀
Please clear your browser cache and check.Best regards,
MikeMarch 15, 2021 at 3:14 pm #1288307Hi Mike
Thank you so much! I have learnt a lot here, it is working perfectly now.
You can close this thread.
Thanks again.
Tia
March 16, 2021 at 11:31 am #1288458Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)Best regards,
Mike -
AuthorPosts
- The topic ‘pop up with iframe loading very slowly’ is closed to new replies.