Code & Pizza
January 28, 2011
Congratulations! You've made it to Friday and are only hours away from enjoying two days of freedom. Here at northStudio, we like to celebrate joyous occasions like these in a fun but knowledgable way.
Question: How do you get 15+ programmers, developers, project managers, administration staff and social media experts in one room for over an hour? Answer: Pizza! Once we equip our hungry staff with enough pizza to feed a small army, they are ready to absorb the day's lesson. Our topics are for the most part Drupal-related and range from subjects like Aegir to new Drupal 7 features and can be anywhere from a simple menu tweak to full-on programmer gibberish.
Today's topic, presented by one of northStudio's top developers, Shane Vincent, is about using JQuery to add random rotations. This topic is particularly interesting, as this technique can be used quite effectively on a variety of websites and is a big winner with clients.
OK, hold on. It's about to get crazy.
The first step is to create a View. This can be a View of anything, but images will work the best. Add your image field and any image cache preset. In your themes info file, go down to the scripts location and add the path to a new JavaScript file in the format of
scripts[] = folder/file.js.
Next you will need to add the following javascript to your file.js:
document.ready(function() {
$('#primary .field-field-gallery-images .field-item img').each(function(){
var rot = Math.random()*10-5+'deg';
$(this).attr('title', rot);
$(this).css('-webkit-transform' , 'rotate('+rot+')');
$(this).css('-moz-transform' , 'rotate('+rot+')');
});
});
The rotation of the images will be randomly rotated anywhere between -5 and +5 degrees. Also ensure there is some padding on the Views-row to ensure no images are being cut off. All CSS3 properties will fall back to defaults in IE.
The above JQuery selector "#primary .field-field-gallery-images .field-item img" will have to be modified to match the row class of your View.
To see an example of what this effect does, check out our recently launched website for Nimmo Bay Resort: http://www.nimmobay.com/media/photos/media-photos
Thanks for checking out this blog post, and if you made it this far…well, you're now a few minutes closer to the weekend.
Enjoy it!
CJ -northStudio.com
