Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #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 data

    #1288135

    Hey 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,
    Mike

    #1288141

    Hi 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.
    Tia

    #1288282

    Hi,
    Thanks for trying, but you have added html in the link field:
    2021-03-15_064928.jpg
    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
    2021-03-15_071423.jpg
    and each team member image will have the same custom class team-popup
    2021-03-15_071922.jpg
    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>

    2021-03-15_075113.jpg
    Now clicking the first team member loads the popup – very fast 🚀
    2021-03-15_075321.jpg
    Please clear your browser cache and check.

    Best regards,
    Mike

    #1288307

    Hi Mike

    Thank you so much! I have learnt a lot here, it is working perfectly now.

    You can close this thread.

    Thanks again.

    Tia

    #1288458

    Hi,
    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

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘pop up with iframe loading very slowly’ is closed to new replies.