Build an iPad-Themed Image Slider With jQuery

by on 31st August 2010 with 31 Comments

screenshot

If you’re not a seasoned web developer, it can be quite intimidating to approach a project where your client is looking for something trendy and interactive such as an Apple-centric slideshow.

Today we’ll teach you how you can create just such a project in mere minutes using some awesome free resources from around the web. We’ll walk you through ten super simple steps so even if you have little to no web experience, this project should be a breeze!

What We’re Building

The purpose of this tutorial is to show you how easy it is to build an awesomely animated, interactive webpage using completely free resources and very little effort to throw them all together. We’ll be using jQuery, a free iPad image and a free image slider plugin to accomplish the following effect.

screenshot

Step 1: Start the HTML

The first thing we want to do is get a basic structure for our HTML. Just paste in your typical HTML starter document. I used HTML5 below but you can use something older if you feel that it’s appropriate.






 

 


 

 

 


 	

Notice that at this point I’ve included two links: one to a stylesheet and one to jQuery. Make sure you include both of these. Many developers also recommend including a local version of jQuery in case the linked version fails for some reason.

The only real markup we have at this point is a container div. We’ll add more later but for now this is perfect.

Step 2: Download the iPad

Obviously, we’ll need an iPad image. The iPad is simple enough that you could probably create your own fairly quickly, but we’ll just grab a pre-built version to speed up the process.

If you Google “iPad PSD,” the first option that pops up is an amazing free file from Teehan+Lax with not only the iPad itself, but a bunch of UI elements as well.

screenshot

Download this iPad image and throw it into Photoshop to prepare for the next step.

Step 3: Prepare the PSD

Grab the layers containing only the blank iPad and throw them into a new document with the dimensions set at 883px by 535px. Set the background color to #1b1a1b and size the iPad so that the screen is approximately 460px wide.

screenshot

To add some visual interest I threw in a shadow and reflection as well. Notice that the reflection fades out before hitting the screen portion. This simplifies things a great deal by canceling the need for a live reflection that updates with every slide.

Step 4: Start the CSS

Now that we’ve got our iPad background image, start a style.css file and set the iPad image as the background.

* {
	margin: 0; padding: 0;
}

body {
	background-color: #1b1a1b;
}

#container {
	width: 883px;
	height: 535px;
	background-image: url(images/ipad.jpg);
	overflow: hidden;
	margin: 30px auto;
}

As always, I’ve thrown in a basic CSS reset to make sure all the browsers are on the same page with margins and padding. I’ve also set the background color to the same color we had in our PSD. Finally, I threw in the iPad image and centered it on the page by setting a width and using “auto” for the margins.

Progress Preview

At this point your live preview should look something like the image below. As of yet there is only a centered iPad on a solid background but it’s already starting to look quite nice!

screenshot

Step 5: Add an Image

Before we import the actual slideshow, we’ll want to get our positioning worked out with a single static image. Doing this now just makes things easier on us so we don’t have to position an active item that may or may not be working properly.

First you’ll obviously want to create or grab an image from somewhere. I just used a pic of my ugly mug set to 460 x 345. Throw your image into a “slider” div inside the container.

Next, scoot the image into place with the following CSS. If your images are sized differently than mine you’ll have to tweak the margins to make everything line up properly.

#slider {
	width: 460px;
	height: 345px;
	margin-left: 212px;
	margin-top: 79px;
}

Progress Preview

With that little bit of coding your page should really start to take shape. My iPad looks much livelier with a full-color image thrown over the top of it.

screenshot

Step 6: Download the Nivo Slider

jQuery makes building custom image sliders a breeze, but prebuilt jQuery plugins like Nivo Slider really strip down the amount of necessary work to around zilch and can often provide a beautiful and professional final result.

screenshot

Go download a free copy of Nivo Slider. This easy to implement slider has nine transition options, supports captions and links, and is fully customizable. It’s a perfect example of the kind of quality freebies you can find on the web if you know where to look.

Grab the following two files from the download and throw them into the root directory of your page:

  • jquery.nivo.slider.pack.js
  • nivo-slider.css

Remember to link to these files in the head portion of your HTML. You should now have four linked files as in the code below:





Step 7: Add More Images

Now that we have our slideshow, we’ll want to toss in a few more images. Nivo will automatically grab any images contained in your slider div so we don’t have to do anything special here but drop them in.

Adding these will make your preview look all messed up but fret not, the next step will resolve this problem.

Step 8: Paste in the JavaScript

The Nivo Slider has a number of different settings that you can customize. To get a good feel for what these are, I recommend inserting the expanded example from the download page that includes all the available options.

This action equates to throwing the following code into your HTML.


As you can see, there are options for setting the speed, transitions, hover controls, thumbnail previews and more. For our purposes, the settings above will work perfectly. Notice that the script has been set to run when the window loads up.

Progress Preview

At this point you should have a functioning slideshow inside of your iPad! This is awesome but there are still a few things we need to address. Namely, when we hover over the iPad we get some ugly text controls that would be much nicer as images. We’ll address these in the next step.

screenshot

Step 9: Styling the Controls

Technically, we should probably create all these styles ourselves because the good folks providing the Nivo slider encourage us to do so. However, to wrap up this tutorial quickly, we’ll just use the sample stylesheet that they provide here.

Included in the download is a few images and yet another stylesheet to include in your HTML titled “custom-nivo-slider.css.” Rather than linking to a million different stylesheets, in practice it would probably be a good idea to combine these to avoid overlap.

The key thing you’ll need to do with this stylesheet is ditch the very first section of styles that appear as they will interfere with the positioning that we’ve already implemented. Below you can see how I commented out everything but the background color and loading graphic.

#slider {
/*	position:relative;
	margin:30px 30px 60px 30px;*/
	background:#1b1a1b url(loading.gif) no-repeat 50% 50%;
	/*-moz-box-shadow:0px 0px 10px #333;
	-webkit-box-shadow:0px 0px 10px #333;
	box-shadow:0px 0px 10px #333;*/
}

Step 10: Check Out The Final Product!

As you can see below, that final set of styles really finished off the slideshow nicely. We now have arrows that take us forward and backward as well as a horizontal list of bullets to navigate and track the progress of the slideshow.

screenshot

Be sure to check out the live demo to see it in action. Also spend some time on the Nivo Slider site and browse the various enhancements that are available.

What Else Would You Like to See?

This tutorial sprouted from me finding some great resources on the web and wanting to share them with our readers. Leave a comment below and let me know if there are any other jQuery plugins or web freebies that you’d like to see demonstrated here and I’ll see if I can whip up a quick tutorial to get you going.

Wanna share the article? Here’s a handy shortened URL that you can paste into Twitter or Facebook: http://ow.ly/2xtcZ

Comments & Discussion

31 Comments

Comments & Discussion

31 Comments

  1. bbg says:

    this is gr8. 10x for sharing this!

  2. Spencer says:

    Go Phoenix Suns! haha. Thanks for the tutorial–it was helpful & enlightening.

  3. Joshua Johnson says:

    Yeah, I’m more of a football fan but living in Phoenix I gotta represent yo.

  4. Thanks for sharing this. Gonna be helpful in the future when clients want to incorporate this. Bookmarked !

  5. Ejaz says:

    Thanks, It looks great.

  6. Dan says:

    Very nice, cheers

  7. sara says:

    Great article I liked very

  8. itbelly says:

    I like this! I would like to put this in my site

  9. steve says:

    Your tutorial is awesome. I followed everything except using the iPad background.For some reason i can’t get the arrows to show up.

    Can u help?

  10. 黑幕困兽 says:

    perfect, I like this!

  11. Gianni says:

    Hello! Thank you for going through this a little more clearly than the slider creators did themselves, but I am having an issue that may or may not be resolvable.

    I have another jquery plugin (a dropdown menu) on a site I’m building, that is supposed to drop down over the slideshow. I’m not sure if this is possible, as when I follow the steps and test, my drop down menu drops, but I can no longer click any of the items (they are OVER the slideshow, and when I hover over them, the menu slides back up). I think that the two jquery plugins might be competing for what should happen when the mouse goes over their shared screen space, it appears the slideshow is winning… What confuses me is that if the drop down menu still SHOWS, doesn’t that mean it’s ABOVE the slideshow? And why would it then have any issue?

    The drop down menu can been seen being tested on the site here (http://niangi.com/kbgtest/tester.html), but all I have is a placeholder image for the slideshow on that site.

    Let me know if you know if this is possible, or if I should go another route for the slideshow… thank you so much!!

  12. Nan says:

    Hello there
    Thanks heaps for the simple, clear explanation.
    My problem is that I want the slideshow to stop after all the slides have been shown once. Am I right in thinking that it is this function that I need to modify in some way to achieve this:
    (Step 8 of your step-wise guide):

    slideshowEnd: function(){} //Triggers after all slides have been shown

    Any help would be very much appreciated. I’m a newbie to both javascript and php and am going slightly crazy at the moment :-)

    Thanks.

  13. It is a journey that must be made for personal happiness but I have never
    met a transgender who hadn’t suffered greatly from the journey.

    Music was at the heart of it all, from the folk movement led by the
    likes of Bob Dylan, Phil Ochs and Dave Van Ronk to the release of “Revolution 1″ on the Beatles.
    In 2010, Abi had her FFS in Marbella, Spain, which has significantly improved her ability to pass in public and therefore her self-esteem.

Leave a Comment

Subscribe
Membership
About the Author