Contents
A continually updated list. Last update: 12/10/11
==============================
- jquery clock, slide out contextual tips from [x] box, jvector usa map, scramble letters, timeline gallery plugin, grumble bubble tooltips www.1stwebdesigner.com/css/jquery-plugins-css3-tricks-collection/
- jQuery + Ajax Filter Plugin: http://isotope.metafizzy.co/
- razorjack.net/quicksand/
- www.lovecreativity.co.uk/development/jquery/quicksand-jquery-wordpress
- mazeofminds.com/533/filterable-portfolio-powered-by-jquery/
- rollyourowncreative.com/2011/09/using-isotope-jquery-plugin-in-wordpress-a-better-way-to-implement-isotope-in-wordpress/
- www.wearepixel8.com/1201/create-filterable-portfolio-wordpress-jquery/
- jQuery + Ajax Filterable Portfolio (2009)
Dynamically generated Image shadow – clickable moveable: pushingpixels.at/experiments/dynamic_shadow/
Multilayout portfolio: List vs Image view
net.tutsplus.com/tutorials/wordpress/create-a-multi-layout-portfolio-with-wordpress/
Spinning Newspaper Tada! like old movies
tutorialzine.com/2011/07/spinning-newspaper-effect-css3/
So Cool!! User submitted webcam gallery- button activates the cam, shoots pic, and adds to the gallery.
tutorialzine.com/2011/04/jquery-webcam-photobooth/
Jquery Easing & Widon’t – prevent orphan words ragged to next line. make sure last line of paragraph always has at least 2 words on it:
www.nikebetterworld.com/lib/js/jquery/jquery-plugins.js?0.0.0.1
IMAGE CAPTION ANIMATIONS
10 Image hover caption effects
Sliding Hoverbox with enlarge & download button: www.elegantthemes.com/preview/Nova/gallery/
WEBSITE PREVIEW ON HOVER
stackoverflow.com/questions/3162815/jquery-webpage-preview
FADING IN IMAGES
Simple way: have the content hide for JS-enabled users immediately after including it in the page, rather than waiting for the entire document to load:
<div id="messagecenter">Albatross!</div> <script type="text/javascript"> $('#messagecenter').hide(); $(document).ready(function() { $('#messagecenter').show('fade', 'slow'); }); </script> This is usually enough to stop a flash of the content rendering as the page loads. But maybe not if the content is complicated/large. In that case:
Watertight way: add a class to an ancestor element (eg body) when JS is enabled, using CSS to ensure that the content being loaded is hidden-by-default only when JS is on:
<head> <style type="text/css"> body.withjs #messagecenter { visibility: hidden; } </style> <script type="text/javascript"> $(document).ready(function() { $('#messagecenter').show('fade', 'slow'); }); </script> </head> <body> <script type="text/javascript"> $(document.body).addClass('withjs'); </script> ... <div id="messagecenter">Albatross!</div> PARALLAX BACKGROUNDShttp://www.danhigbie.com/ JQUERY STYLE SHEET SWITCHERS http://www.net-kit.com/10-practical-jquery-style-switchers/WORDPRESS - IMAGES TIMTHUMBShttp://jeremy.infinicastonline.com/2010/01/cross-domain-timthumb-php/DRAG AND DROP *amazing!*http://www.ali.dj/wordpress-plugin-drag-drop-file-uploader/Faster Image Insert *amazing!*http://wordpress.org/extend/plugins/faster-image-insert/ WORDPRESS IMAGE MANAGEMENT: upload janitor to delete unused images: http://wpmu.org/daily-tip-keep-a-clean-wordpress-uploads-folder-by-deleting-unused-images/ alt: delete unused images http://www.bobhobby.com/2008/02/24/delete-unused-image-files-plugin-for-wordpress/
Code Snippets
Plugin to Detect if click outside of an element:
littleroom.se/playground/outerClick/
Click outside of a div will fade that div
stackoverflow.com/questions/2124684/jquery-how-click-anywhere-outside-of-the-div-the-div-fades-out
Sliding toggle that degrades gracefully
www.sohtanaka.com/web-design/easy-toggle-jquery-tutorial/
Same slider toggle but with preview first line of text:
codemonkeys.biz/2010/09/09/scrolling-slider-with-auto-pull-text-using-jquery/
Fix for things being hidden if javascript is disabled: Use a JS class if javascript. (similar to boilerplate no-js)
oncemade.com/adding-hasjs-class-when-javascript-is-available/
keith's example using jquery:
jQuery(function($) {
$('body').addClass('hasJS');
});
css
.hasJS .module {
display: none;
}
Setting the Timing for JQuery Tools Flowplayer Slideshow
<script language="JavaScript" type="text/javascript">
// What is $(document).ready ? See: http://flowplayer.org/tools/using.html#document_ready
$(function() {
$("div.tabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeInSpeed: "1500",
fadeOutSpeed: "1500",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow({autoplay: true, interval:6000}); /*important: interval!*/
});
</script>
Deutsch