background preloader


Facebook Twitter


A Simple jQuery Slideshow. In the interest of following jQuery’s motto of “writing less and doing more,” let’s write a simple slideshow using jQuery, JavaScript and a bit of CSS.

A Simple jQuery Slideshow

Download the complete slideshow hereRead the FAQs For starters, our main goal should be keeping the markup as clean as possible: Now let’s use CSS to position the images on top of each other and bring the active image to the top level with z-index: Due to absolute positioning, we need to define the height of the slideshow DIV. Also, notice that we defined three different z-indexes—we will manipulate these soon using jQuery. For the slideshow animation we are going to switch between each photo at a set rate.

Function slideSwitch() { var $active = $('#slideshow'); var $next = $; $next.addClass('active'); $active.removeClass('active'); } $(function() { setInterval( "slideSwitch()", 5000 ); }); Here we set a JavaScript interval to call slideSwitch() every 5 seconds. Next we should incorporate a fade animation. 30 Essential Controls. By Theresa Neil As Bill mentioned in an earlier post, we don’t want to limit this blog to just the principles and patterns found in the book.

30 Essential Controls

For that you can check out our Explore the Book section. This is the second article in a three part series on patterns and principles for RIA design. Standard Screen Patterns: 12 patterns w/100 examplesEssential Controls: 30 controls for RIA design and developmentComponents for Commonly Requested Features: 15 patterns and examples Every designer has a set of controls they rely on to communicate an effective UI. Unfortunately, no single RIA framework offers all 30 of these. The frameworks reviewed include: Flex, Laszlo, Silverlight and 12 Ajax frameworks and toolkits: ExtJS, Dojo, YUI, Google Web Toolkit, Prototype/, JQuery, MooTools, MochaUI, SproutCore, LivePipeUI,IT Mill, Backbase. 01. Google’s Auto-Complete 02. Carousel Prototype carousel widget Supported by: YUI, Prototype/, JQuery, ITMill, Backbase, iCarousel 03. 04. Webdesign und Webentwicklung im Webstandard-Blog - Best of jQuer. JavaScript - 12 Sep, 2008 Anwendungen zum JavaScript-Framework jQuery gibt es zahlreiche, aber nicht alle erfüllen unbedingt die Prädikate "nützlich & praktikabel".

Webdesign und Webentwicklung im Webstandard-Blog - Best of jQuer

Aus diesem Grund wurden für Euch ein paar jQuery-Plugins & jQuery-Tutorials aus den verschiedensten Einsatzgebieten zusammengetragen. Von verschiedensten Navigationsvarianten, über Zoom-Funktionen, bis hin zur dekorativen Bilder-Galerie. Mehr jQuery-Tutorials und Plugins gibt es in Teil 2 und Teil 3 der Serie "Best of jQuery-Tutorials". jQuery-Plugin - Tab-Navigation jQuery-Plugin - Moving Navigation jQuery-Plugin - Sliding Navigation jQuery-Plugin - jParallax jQuery-Plugin - Fancy-Zoom jQuery-Plugin - jQZoom. SCRIPTR » jQuery, MooTools, Protoype, YUI, Scriptaculous… The Lightbox Clones Matrix. Improve your jQuery - 25 excellent tips. Downloads.

Script & Style » Automatically Generate a Photo Gallery from. Two years ago Chris Coyier wrote an outstanding tutorial detailing how you can generate a photo gallery based on the images within two directories: a thumbnails directory and an originals directory.

Script & Style » Automatically Generate a Photo Gallery from

I've decided to take his tutorial a step further by showing you how to generate thumbnails for the gallery using PHP. I've also implemented a MooTools lightbox: Smoothbox. The following code will show you how to create a beautiful photo gallery by simply dumping your photos in a directory. The CSS The images/links will be floated next to each other. The PHP: Utility Functions We'll use three utility functions to make the system work: get_files (retrieves all of the files in a given directory), get_file_extension, and make_thumb (generates a thumbnail image from a source image). The PHP: Setting and HTML Generation The first step is to define a few simple settings which will dictate image paths, the width by which all thumbnails will be created, and the number of images per row.

That's it! Older.