How to Implement jCarousel My Way | Ash Robbins
: This tutorial was written in 2011 so, while it was correct and I would have used it at the time, I’ve now found much better and easier to configure sliders that jCarousel. I’d recommend you check out the Orbit slider from Zurb’s Foundation framework , and also SlidesJS by Nathan Searles. During the build of a new template for our main CMS/CRM product at work, I thought I may as well follow the crowd and put a nice fancy slider onto the home page to show off a particular selection of recent work or news stories. I thought this would be easy – and in its basic form it is – but configuring the slider to behave in the exact way I wanted it to was a bit more of a challenge. I decided to use jCarousel after seeing Orman Clark’s latest WordPress theme ‘ Stacked ‘ in which he allows the user to scroll through the various feature items by clicking on thumbnails below the main scrolling items. Step 1 Step 2 The HTML markup you need is as basic as a simple unordered list. Step 3 Pause on Hover
JQuery Cycle Plugin
Check out Cycle2, the latest in the Cycle line of slideshows. The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. It also supports, but does not require, the Easing Plugin. The plugin provides a method called cycle which is invoked on a container element. Images are used in these demos because they look cool, but slideshows are not limited to images. Use the Effects Browser page to preview the available effects. For more about options, see the Options Reference page. Frequently Asked Questions Special thanks to Torsten Baldes, Matt Oakes, and Ben Sterling for the many ideas that got me started on writing Cycle in 2007.
Javascript
55+ Awesome jQuery Slider Plugins – Show Off Featured Content!
How to Create Animated Photo Gallery using jQuery (Slider Kit)
How to create photo gallery using Slider Kit (jQuery) Today we will continue overviews of available photo galleries. Next gallery will Slider Kit. By default this gallery expect already prepared html data (with all images and thumbs). Ok, lets start, and lets check prepared demos and download ready package: Live Demo 1 Live Demo 2 Live Demo 3 download in package Lets start coding ! Step 1. As usual, we start with the HTML. index.html You can notice, that currently we have empty UL inside ‘sliderkit-nav’. Now, make attention to class of our main gallery ‘photosgallery-std’. In our package you will find ‘index2.html’ and also ‘index3.html’. Step 2. Here are used CSS files: css/main.css As usual – our main file for demo layout – very easy. css/sliderkit-core.css, css/sliderkit-demos-ie6.css, css/sliderkit-demos-ie7.css, css/sliderkit-demos-ie8.css and css/sliderkit-demos.css All these files you will able to find in package (they are large enough to include them in the article) Step 3. js/main.js
jQuery Zoom
A plugin to enlarge images on touch, click, or mouseover. Demo Hover Grab Released under the MIT License, source on Github (changelog) Download Compatible with: jQuery 1.7+ in Chrome, Firefox, Safari, Opera, Internet Explorer 7+. Install via NPM npm install jquery-zoom Instructions Zoom appends html inside the element it is assigned to, so that element has to be able to accept html, like <a>, <span>, <li>, <div>, etc. To use zoom with img elements, they will need to be wrapped with another element. Removing Zoom Trigger the zoom.destroy event to remove zoom from an element: $('#example').zoom(); $('#example').trigger('zoom.destroy'); Settings Hey,
25+ jQuery Drag and Drop Plugins
With jQuery drag and drop plugins, creating cool drag and drop features on your web pages it is not as hard as it used to be. Like most others with a great interest in web front-end development, jQuery have a special place in my heart. jQuery manages to bring the real goodies to us with only a few lines of code and every day it gets better. This is because the huge jQuery community keeps shipping awesome plugins; great thanks to everyone contributing! With jQuery, it is possible to create user friendly and sophisticated web user interfaces in a lightweight and elegant way. This article just got an update – I added new scripts and checked all links. Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). Advertisement iNettuts: How to Mimic the iGoogle Interface - MORE INFO | DEMO Ajax Upload - MORE INFO Drag and Drop Sortable Lists - MORE INFO | DEMO jqDnR - MORE INFO Zoomer!
.animate
Description: Perform a custom animation of a set of CSS properties. The .animate() method allows us to create animation effects on any numeric CSS property. The only required parameter is a plain object of CSS properties. This object is similar to the one that can be sent to the .css() method, except that the range of properties is more restrictive. Animation Properties and Values All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the jQuery.Color plugin is used). In addition to style properties, some non-style properties such as scrollTop and scrollLeft, as well as custom properties, can be animated. Shorthand CSS properties (e.g. font, background, border) are not fully supported. Animated properties can also be relative. Duration Callback Functions Basic Usage Easing Demo:
Zoomooz.js
Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. Quirky transformations You can zoom to elements that have been translated, scaled and skewed, and they will morph correctly. Try by clicking on these: Skew Scale Rotate There is some interesting stuff happening in the background to make the morphings work. Adding Zoomooz to your web page Just add this to your web page head and you should be up and running with Zoomooz: The easy way to zoom Simply add "zoomTarget" to the element you want to zoom to when clicked on: <div class="zoomTarget">This element zooms when clicked on. You can also add some additional attributes for tuning the animation as data fields of the element: Here is a demo, click on the elements: Demos
HTML5 Canvas Experiment « IO 9elements
Click here to launch the experiment! (beware: sophisticated browser needed) HTML5 is getting a lot of love lately. With the arrival of FireFox 3.5, Safari 4 and the new betas of Google Chrome and Opera, browsers support some great new features including canvas and the new audio/video tags. Most interesting: modern mobile devices like the iPhone or Android-based phones also support new standards in favor of Flash. The future looks bright for HTML5. Time for us to play with this technology. The original particle engine was ported from a Flex/AS3 project that we’ve created to javascript. Big thanks to spokenlounge.com for supporting us and for providing the mp3 track. If you want to dive into further ressources, then try: - HTML5Doctor, great ressource about everything HTML5- Official Mozilla Canvas Tutorial- Carsonified linklist about HTML5
