Saturday Night’s Alright (For Geeks)
December 15, 2007 by Jim · 2 Comments
Tonight I spent a bit of time working on my wife's new site for Your Door & More. I wanted to implement some sort of image rotation. I was going to crank out a cheezy animated GIF but started digging around the jQuery site and found the Cycle plugin.
jQuery Cycle Plugin
This couldn't have been easier to implement. Wrap some images in a container:
-
<div id="s1" class="pics">
-
<img src="img1.gif" height="320" width="450" />
-
<img src="img2.gif" height="320" width="450" />
-
<img src="img3.gif" height="320" width="450" />
-
<img src="img4.gif" height="320" width="450" />
-
</div>
Include the jQuery Cycle plugin and this simple bit of jQuery:
-
$(document).ready(function(){
-
$('#s1').cycle('fade');
-
});
The default 'fade' effect was adequate for my needs but the Cycle plugin has many more transitions and parameters you can use - check out the documents for more details.
GIMP (GNU Image Manipulation Program)
I've tinkered with the GIMP on Linux at home but to be honest whenever I had to do any heavy graphic work I used Photoshop on my wife's PC. Tonight I decided to sit down and force myself to try and crank out these graphics using the GIMP. I had original PDF's of each image. I opened these and then used the GIMP's built in screenshot utility to get them imported. Next it was just a matter of cropping and resizing things and then saving them as GIFs. I spent most of my time trying different GIMP preferences and finally figured out how to get most of the commonly used menu's under control by docking them on the main window. I think I'm going to pickup a GIMP book and start using it more!!
Possibly Related:
The Saturday Night’s Alright (For Geeks) by Jim, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.
jQuery makes stuff sooo easy :) Once you get nice and comfortable with jQuery, it’s going to become part of your code refactoring; you’ll start looking up and thinking, Ok, how can I use jQuery to make my code cleaner.
I’m all over jQuery – I’ve got most of our application team ‘converted’ and this week I’m giving a preso to our webdev team as well! :)