jQuery.iPhoneSlideshow

The jQuery.iPhoneSlideshow plugin is a quick way to show off screenshots of your iPhone app on your home page. Just take the screenshots you want to display, place a specific <div> in your page, and add a line of javascript, and you've got an iPhone on your home page showing off your fancy app.

First, you'll need to make sure to load jQuery and jQuery.iPhoneSlideshow.js in the <head> of your page, e,g.:

<script src="jquery-1.6.js"
        type="text/javascript"></script>
<script src="jquery.iPhoneSlideshow.js"
        type="text/javascript"></script>

Next, add an empty div with an ID you can refer to, e.g.:

<div id="iphone"></div>

Then add a javascript call to specify the set of screenshot images, like so:

$('#iphone').iPhoneSlideshow({
  screens : [
    'screen1.png',
    'screen2.png',
    'screen3.png'
  ]
});

You can even customize it's behavior through config options, hooks, and method calls. For example, See these two buttons we can use to pause and resume the slideshow:

Docs →