Image Loader/Slideshow

JavaScript
1

Hi,

I’m looking for a way where I can cycle through <li> elements using forward and back navigation links.

I know this is fairly elementary and can be done using many of the plugins out there - however, the content in each of these <li>'s will be a <h3> tag, maybe a <p> tag and an <img> tag, the image is likely to be 200k in size.

Now I can have a list like this:

<ul id="projects">
     <li>
          <h3>Project 1</h3>
          <p>Text here</p>
          <img src="my/img/path/img1.jpg" />
     </li>
     <li>
          <h3>Project 2</h3>
          <p>Text here</p>
          <img src="my/img/path/img2.jpg" />
     </li>
</ul>

But I’m thinking that if I have 10 <li> elements the download time to load all these on the page at once is going to exceed a meg, which is not what I want.

Is there anyway where I can click on the next link and I get a loader icon like in Lightbox, and then the image loads?

The way Erskine do it is pretty much the effect I am looking for.

http://erskinedesign.com/

2

If you look at Erskine’s onload.js, you can see what they do there. All you have to do is adapt it to your own code, mostly by changing the IDs, etc for the ones in your HTML.

The bit that has the comment “//HOME PAGE PROJECT NAV” loads the first slide and the navigation links, from a static HTML Page (http://erskinedesign.com/home/slideshow/). The other slides are loaded when the prev/next links are clicked, and that’s defined by the hp_slideshow function just below.

It’s quite simple and neat really, and very unobtrusive, as the navigation stuff and the first slide are loaded with JavaScript, so a non-JS user will see nothing of it. I’m sure you can adapt it to your needs by making the static HTML page, copying over the JS and replacing their jQuery selectors with your own.

3

Then have a look at their onload.js file to see how they do it.

They make use of some good jQuery techniques to achieve it.

4

Thanks mate, I did have a look but I wanted to try my own method, but I’ll give it a shot anyway.

Thanks mate, if your ever up my neck of the woods I’ll buy you a nice bottle of wine, your a diamond.