Setting Up Nivo Slider

Javascript slideshow plugin

As we discussed briefly last week, jQuery is currently the most popular and widely used JavaScript framework. What this essentially does is takes very complex chunks of JavaScript code and organizes it in a way that allows users to run very complex functions with only a few simple lines of code.

jQuery Slideshows

As we discussed briefly last week, jQuery is currently the most popular and widely used JavaScript framework. What this essentially does is takes very complex chunks of JavaScript code and organizes it in a way that allows users to run very complex functions with only a few simple lines of code. We had started by using the jQueryTools.org plugin to embed a Flash file on a page, then a separate plugin called Fancybox to run a lightbox effect on some pictures. This week, we will be learning about some additional jQuery plugins and how we can implement them into our sites.

Nivo Slider

Nivo Slider is one of the coolest jQuery slideshows I've seen out there in terms of the effects it's capable of. You can go to their website and downloaded as well as get training program documentation section. As we go through the lesson, You will find that there are all sorts of options available in terms of effects.

Click here to download a copy of Nivo Slider.

Video Lesson

In the video below, I will go through the entire process from downloading the plugin, to resizing images in Photoshop, to putting it together.

Note: this video is in HD. To view it at full resolution, press the Full Screen icon in the bottom right corner of the player.

Email me if you have any questions! -> jearley1@ivytech.edu

HOMEWORK

  1. Create a project folder containing all the necessary files for running Nivo Slider. Choose 4 of your own custom images, either by grabbing them from the web or using your won personal work.
  2. Upload this project via Filezilla and save it as (first initial)(last name)-wk11-nivo.

Questions?

As always, please email me if you have any questions! jearley1@ivytech.edu