background preloader

Coda

Facebook Twitter

10 Best jQuery Sliders | AjaxLine. Related Posts Slide Out Boxes with jQuery and CSS3 How to create something like a little widget that can be used to show related posts in any page. jQuery PageSlide jQuery PageSlide was inspired by the UI work of Aza Raskin. In his recent posts regarding concepts for Firefox Mobile and a mouse-based Ubiquity, Aza introduced the idea of sliding (or "throwing") content aside to reveal a secondary content pane. This plugin allows any developer to recreate a similar interaction on their own website using a few simple lines of Javascript Galleria Galleria is a JavaScript image gallery framework built on top of the jQuery library. Anything Slider ImageFlow ImageFlow is an unobtrusive and userfriendly JavaScript image gallery with many useful features. SlideDeck Whether you’re trying out the free SlideDeck LITE, or taking it to the next level with SlideDeck PRO, you'll receive everything you need to create truly engaging content sliders.

Nivo Slider CrossSlide AviaSlider - jQuery Slideshow. Easy Slider jQuery Plugin Demo. Coda Slider Effect | jQuery for Designers - Tutorials and screen. How to Solve the Problem Recreating this effect is simple to do if you know what plugins to use. There are plugins out in the wild already, but we want our jQuery to satisfy the following requirements: Degrades perfectly without JavaScript enabledSliding panels effect without hogging browser CPUNext and previous buttons added using JavaScript because they hold no use without JavaScriptHitting the page with a specific hash (i.e. page.html#preview) shows the right tab, and highlights the right navigationAny link on the page that refers back to a panel should trigger the effect and highlight the right navigation – this should happen without any extra work The hash is the emphasised part (including the # symbol) in: In fact, our version of this slider will be better than Panic’s and the current jQuery plugins if we can meet all of the requirements.

I’ve provided a screencast to walk through how create this functionality. Plugins Required Markup. jQuery slideViewer 1.1. Download slideViewer 1.2 (last updated july 9 2010) What's this? SlideViewer is a lightweight (3.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images: slideViewer checks for the number of images within your list, and dinamically creates a set of links to command (slide) you pictures. Also, clicking on each image will make the gallery slide forward or backward, depending on the area you are clicking (eg: clicking the left part of a picture will move the slides backward, and viceversa for the right part of the picture). You can optionally customize the kind of animation and its duration and also enhance(*) the default tooltips with some fancy tooltips. You can choose where to put the user interface (the numbered links); it can be above or below your set of images.

You don't need to specify the width and height for your images (but all the images within a single gallery must have the same width/height!) New! Interface elements for jQuery - Real examples of Interface eleme.