This tutorial teaches how to add an image slider to a portfolio website using the Easy Slider jQuery plugin. The steps include: 1. Copying code files and downloading jQuery. 2. Inserting the jQuery and Easy Slider code onto the page. 3. Adding styles to control the slider appearance and navigation buttons. 4. Making final customizations like adding rollover effects and changing the slider orientation. The end result is an animated image slider that can showcase a designer's work in an engaging format.

1. 76 Technique
Dreamweaver CS3
or later
New ways
to present
your images
Animating the images
in your online portfolio is a
snip if, like Anthony Zinni,
you know which libraries
and plug-ins to employ
While jQuery and similar JavaScript libraries have been
popular in the development community for some time now, the
technical nature of these libraries has typically left them outside
the role of the web designer. Luckily, there are developers willing to
share their code and simplify the process for designers. One such
web developer is Alen Grakalic of cssglobe.com, who has created
the extremely easy-to-use and appropriately named Easy Slider
plug-in for jQuery.
This tutorial will teach you to use Easy Slider and a
couple lines of code to add sliding blocks of content or images to
your portfolio quickly and easily. Once the script is installed and
functional, we will use CSS to customise its appearance and
improve the usability of its Previous and Next buttons. Finally, we
will use the script’s configuration options to make the animation fit
the design more appropriately. 02 Launch Dreamweaver
01 Start out by copying the folder and open both the index.html and
named ‘working_files’ and the code_ screen.css files you copied from the CD.
blocks.txt text file from your disc to your Continue by making sure index.html is
computer. Next, visit jQuery.com and the active file, and select File>Preview in
download the latest production version Browser>Firefox to open the file in your
to the ‘js’ folder contained within the browser. You should now see the layout
‘working_files’ folder. of the portfolio without styles applied.
03 Minimize
Firefox and return to
Dreamweaver. Right/
Ctrl+click anywhere
Anthony Zinni On the disc Time needed within the code view
Anthony is a The files you need for 1 hour and select CSS Styles>
Chicago-based art this tutorial can be
Attach Style Sheet.
director and partner located in
at the design firm DiscContents Skills Using the new window,
Resources Installing jQuery browse and select
AssociaDirect. In his
Dreamweaver Easy Slider screen.css from the
spare time he likes
customisation
to talk about graphic ‘working_files’ folder.
CSS image
design on his blog, Select ‘Screen’ within
rollovers
Positive Space. Find the Media field, then
out more at www.
associadirect.com
click the OK button to
and www.positive attach
spaceblog.com the CSS file.
Computer Arts June 2009 www.computerarts.co.uk
ART162.tut_dw 76 2/4/09 5:53:27 pm

2. 77
05 The first step in animating the 06 Installing the Easy Slider
portfolio shots is to install jQuery. To do plug-in is almost as simple as jQuery. To
04 Return to Firefox and refresh the page to see the this, copy and paste the first section of install Easy Slider, copy and paste the
layout of the portfolio. Currently there is only one image, so we code from the text file you copied from second block of code from the text file
will need to add more in order for the script to cycle through the CD onto line 7, directly below the link onto line 8, just below the jQuery line.
them. To do this, find line 21 in index.html and duplicate it to the CSS file. Because you downloaded Make sure to place this code below
twice. Change the source link of the image tags on these new jQuery, it is important that the file name jQuery, otherwise it will not work.
lines to the second and third sample photos and update their matches the one you downloaded,
accompanying alt descriptions. otherwise it will not work.
07 In order to finish installing 08 To see the slideshow in
Easy Slider, you will need to add some action, return to Firefox and refresh the
styles to the bottom of the Screen.css page. You will notice that there is now
file. Switch over to the CSS file and then only one photo visible and that next to it
copy and paste the third block of code there is an arrow pointing down. If you 09 The default behaviour of the script is okay, although
from the text file onto line 129. These click on this arrow, the photo will slide in order to make it more usable we should add rollover
styles set the appearance of the area for from left to right and the upward- animation to the arrows. This can be done by returning to the
the images, and set the placement of pointing arrow will appear. Screen.css file and copying and pasting the fourth block of
the Previous and Next buttons used to code onto line 172. This CSS code will make each arrow graphic
control the animation. change when the mouse pointer hovers over it.
10 Finally, in
order to make the
script match our More on Easy Slider
design, we should Easy Slider is such a great
script. Not only it is a quick and easy way
make the animation
to add scrolling images to your portfolio,
move vertically. This but HTML content as well. For this reason
can be accomplished it has been used in a wide range of
by replacing line 11 applications. For more information on
in the index.html file how Easy Slider works or on its other
with the final piece of uses, visit http://cssglobe.com/post/
3783/jquery-plugin-easy-image-or-
code in the text file.
content-slider
Return to Firefox and
refresh the page to see
the result.
www.computerarts.co.uk Computer Arts June 2009
ART162.tut_dw 77 2/4/09 5:53:28 pm