Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Billy Dukelow
466 PointsDelay loading modal content until modal is triggered
Hello!
Like many on here i'm only just beginning to learn so be kind!
I have a portfolio page with 40 projects listed (filtered by category). Each project has a thumb, which when clicked, reveals a modal window containing a slider gallery of roughly 8 large images. This is all working fine, but its a heavy loading burden on the page (40 x 8 large images).
What I am trying to do is dynamically load the content of each modal when the modal is triggered. I tried using an Ajax method to do this but the content does not load. Does anyone have any suggestions on how I could achieve this?
3 Answers
Sean Gaffney
Front End Web Development Techdegree Student 2,560 PointsWhat modal/slider plugin are you using?
Billy Dukelow
466 PointsHey Sean! Thanks for your response. I'm using Reveal by Zurb and the slider inside the reveal is Orbit. What I want to do is dynamically call in the content of the reveal using Ajax.
As each reveal has a slider with 8 images @ 1000px width, the page will be slow onload so I need a solution to counter this. I'll be using cloudfront to distribute the images which will take a little load off, but nowhere near enough. Ordinarily I would have linked each project to a separate page, but the client is insisting that all categories and galleries be displayed on the same page without reload.
Any help would be appreciated!
Billy Dukelow
466 PointsCracked it using godsend data-attributes!
Stored the content of each modal in separate files. In the portfolio page I iframed the content in. I did not give the iframes an src but instead stored the src value in a data attribute called data-src
<div class="reveal-modal">
<iframe data-src="example.html" height="750" width="1000" frameborder="0"></iframe>
<a class="close-reveal-modal">Close</a>
I then passed the value of the data-src to the actual src when the reveal is shown using jquery
$(".reveal-modal").show(function(){
$(this).find("iframe").prop("src", function(){
return $(this).data("src");
});
});
Think this should work but until it is live tested I won't know. Thoughts? Tips?