Вы находитесь на странице: 1из 2

76

Technique

Dreamweaver CS3 or later

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 scripts configuration options to make the animation fit the design more appropriately.

New ways to present your images

Start out by copying the folder named working_files and the code_ blocks.txt text file from your disc to your computer. Next, visit jQuery.com and download the latest production version to the js folder contained within the working_files folder.

01

02

Launch Dreamweaver and open both the index.html and screen.css files you copied from the CD. Continue by making sure index.html is the active file, and select File>Preview in Browser>Firefox to open the file in your browser. You should now see the layout of the portfolio without styles applied.

Anthony Zinni Anthony is a Chicago-based art director and partner at the design firm AssociaDirect. In his spare time he likes to talk about graphic design on his blog, Positive Space. Find out more at www. associadirect.com and www.positive spaceblog.com

On the disc The files you need for this tutorial can be located in DiscContents\ Resources\ Dreamweaver

Time needed 1 hour Skills Installing jQuery Easy Slider customisation CSS image rollovers

Minimize Firefox and return to Dreamweaver. Right/ Ctrl+click anywhere within the code view and select CSS Styles> Attach Style Sheet. Using the new window, browse and select screen.css from the working_files folder. Select Screen within the Media field, then click the OK button to attach the CSS file.

03

Computer Arts June 2009

www.computerarts.co.uk

ART162.tut_dw 76

2/4/09 5:53:27 pm

77

05
Return to Firefox and refresh the page to see the layout of the portfolio. Currently there is only one image, so we will need to add more in order for the script to cycle through them. To do this, find line 21 in index.html and duplicate it twice. Change the source link of the image tags on these new lines to the second and third sample photos and update their accompanying alt descriptions.

04

The first step in animating the portfolio shots is to install jQuery. To do this, copy and paste the first section of code from the text file you copied from the CD onto line 7, directly below the link to the CSS file. Because you downloaded jQuery, it is important that the file name matches the one you downloaded, otherwise it will not work.

Installing the Easy Slider plug-in is almost as simple as jQuery. To install Easy Slider, copy and paste the second block of code from the text file onto line 8, just below the jQuery line. Make sure to place this code below jQuery, otherwise it will not work.

06

07

In order to finish installing Easy Slider, you will need to add some styles to the bottom of the Screen.css file. Switch over to the CSS file and then copy and paste the third block of code from the text file onto line 129. These styles set the appearance of the area for the images, and set the placement of the Previous and Next buttons used to control the animation.

08

To see the slideshow in action, return to Firefox and refresh the page. You will notice that there is now only one photo visible and that next to it there is an arrow pointing down. If you click on this arrow, the photo will slide from left to right and the upwardpointing arrow will appear.

The default behaviour of the script is okay, although in order to make it more usable we should add rollover animation to the arrows. This can be done by returning to the Screen.css file and copying and pasting the fourth block of code onto line 172. This CSS code will make each arrow graphic change when the mouse pointer hovers over it.

09

Finally, in order to make the script match our design, we should make the animation move vertically. This can be accomplished by replacing line 11 in the index.html file with the final piece of code in the text file. Return to Firefox and refresh the page to see the result.

10

More on Easy Slider


Easy Slider is such a great script. Not only it is a quick and easy way to add scrolling images to your portfolio, but HTML content as well. For this reason it has been used in a wide range of applications. For more information on how Easy Slider works or on its other uses, visit http://cssglobe.com/post/ 3783/jquery-plugin-easy-image-orcontent-slider

www.computerarts.co.uk

Computer Arts June 2009

ART162.tut_dw 77

2/4/09 5:53:28 pm

Вам также может понравиться