So you've got some code for the greatness of HelloKitty, lets add some graphical images to it that're numbered and hot-swap the display on the fly when you click the numbers. I'm a fan of graphics, lets see what we can do.
To do this you'll need a few toys for jquery:
jquery.easing.1.3.js has some cool transitional effects.
jquery.slideviewer.1.2.js slidify's the graphics in a way i'd like to see them.
Heck, lets throw in some CSS for good nature. Here's some css i've named look.css, it's been "borrowed" from teh interwebz:
So we have some css, time to do some includes of the new jquery files besides the .css file. Your new code should look something like:
The new changes:
1) the <link> tag and info to hook in your .css file.
2) a couple of new <script> tags to use jquery.easing and jquery.slideviewer.
3) new jquery to load the gallery and use the slideView option. this does a pretty cool transition effect when you click each number below the viewed graphic.
4) the div tag that holds the ul (unordered bullet list) with links to images out on teh interwebz i'd found along with some alt tags for each one for a hover over effect when you hover over the number.
5) chances are your images aren't the same size either, i tweaked a little bit on the widths and heights to make it look better than it started with.
Now you're wondering: i'm not coding this crap, show me some results! Here are some screenshots:
Tune in next time when we attempt to write our own plugin. Using a plugin is one thing, writing one should be epic!
excellent smithers
ReplyDelete