How to load content only when it's needed? (Slide Viewer + localScroll)
Hey guys,
first of all: I'm new to jQuery. I used it a few times but the used code was actually quite basic.
So if you've got any solution for me it would be great if it could be explained rather easy. Thanks in advance!
The problem:
I've got this simple HTML website. All the content is on one page. The content div is overflow:hidden so only the current section is visible on the page. localScroll is used to slide to the different sections (in fact: some divs with IDs).
What you see when you click on any navigation item is an overview of some projects. Clicking on a project thumb slides the content to the left and displays a detailed view of the selected project.
As I said, every sliding is realised with the localScroll plugin. Every link refers to an ID and slides to it.
The detailed project view is a div with a gallery. I did this with the Slide Viewer plugin. The problem I'm facing is that if I load the website every image is loaded simultaneously. What I want to achieve is that all images within the Slide Viewer div should only be loaded if I'm in the right section. For example: If I click on "PRINT" every image in this section should be loaded. BUT all the other images (the images of the sections MOTION, WEB and FOTO) should NOT be loaded.
Please visit http://herrmondl.multimediaart.at/prtflio if you'd like to see a demo.
SlideViewer uses a $(window).bind("load", function() ... to load the images. I tried to implement it in the onclick event of the menu but this causes SlideViewer to load the images everytime you click on a navigation item.
I hope somebody got advices for me!
Thanks in advance,
f