JQuery plug-in’s are a simple way to add some cool functionality to your website. JQuery is a JavaScript library.
Today we’re going to use a JQuery plug-in to create an interactive photo gallery slider.
What you will need for this lesson:
1- Files from me that include the images and practice code
2- Notepad++
3- A new folder on your computer called JQuery
To begin:
1- Create a folder called JQuery on your computer
2- Get the practice files from me and put them in your folder
3- Open Notepad++
4- Copy and paste the following code into Notepad++
<html>
<head>
<title>JQuery Practice!</title>
</head>
<body>
<p>This will be awesome!</p>
</body>
</html>
5- You can name this jquerypractice.html. Be sure to save this file in the folder you just created.
We’re ready!
Now:
6- Go to http://www.woothemes.com/flexslider/
7- Copy and paste the code from Step 1 into your head section below the title tags. This is the code for the slider style sheet and JavaScript.
8- Grab the code from Step 2 and paste it into your body section below the paragraph tags. You will have to change the names of the images to the ones that you have in your folder.
9- Grab the code from Step 3 and paste it into your head section below your other scripts.
That’s it!
Now:
10- Challenge: either add more images or change the current images to something else
11- Challenge: modify the JQuery to change the slideshow- check out Step 4 and then go here
12- Don’t forget: change the title tag and “this will be awesome”