background preloader

JQuery Cycle Plugin

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. 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. Related:  JavaScriptJQUERY

ColorBox - customizable lightbox plugin for jQuery 1.3 & 1.4 A lightweight customizable lightbox plugin for jQuery View Demos Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content.Lightweight: 10KB of JavaScript (less than 5KBs gzipped).Appearance is controlled through CSS so it can be restyled.Can be extended with callbacks & event-hooks without altering the source files.Completely unobtrusive, options are set in the JS and require no changes to existing HTML.Preloads upcoming images in a photo group.Currently in use on a million-plus websites. Instructions & Help The FAQ has instructions on asking for help, solutions to common problems, and how-to examples. Usage Colorbox accepts settings from an object of key/value pairs, and can be assigned to any HTML element. Settings Public Methods Event Hooks Hey,

Installing FullCalendar | Last updated May 24, 2012. Created by aspilicious on February 9, 2011.Edited by emmajane, sirtet, jhodgdon, tim.plunkett. Log in to edit this page. Requirements Drupal 7 Drupal 6 Views (For Views 3 use FullCalendar 6.x-2.x)Date (6.x-2.7 or later)jQuery Update 6.x-2.x (jQuery 1.3.x)jQuery UI (jQuery UI 1.7.x)FullCalendar (external JS Library) cck is not strictly a requirement, but is generally used to create custom node types. Installing the module Download a version of FullCalendar.Unzip the module.Move the module into the sites/all/modules/ directory. Installing the plugin Download the most recent version of the plugin.Unzip the plugin.Move the plugin into the sites/all/libraries/ directory. Note: When unzipped, the plugin contains several directories. If you are using drush, enable the fullcalendar module and then use the command: drush fullcalendar-plugin to download the correct version of the plugin and move the files accordingly. Looking for support?

jQuery Datepicker A datepicker can easily be added as a popup to a text field or inline in a division or span with appropriate default settings. The popup shows when the field gains focus and is closed by clicking on the Close link or clicking anywhere else on the page. You can also remove the datepicker widget if it is no longer required. Popup datepicker (input): Inline datepicker (div/span): The default settings are: Datepicker appears on focus (popup only) Datepicker appears below the input field (unless there is not enough room there) Text is in US English Date format is mm/dd/yyyy Month and year are selectable directly 10 years before and after the current year are shown in the year drop-down Show a single month Select a single date Week starts on Sunday Days in other months are not displayed No date restrictions Clicking elsewhere closes the date picker (popup only) You can set defaults that apply to all datepicker instances as shown below: Focus and button: From a button only: From an image only: Show :

5 Tips for More Efficient jQuery Selectors As the name implies, jQuery focuses on queries. The core of the library allows you to find DOM elements using CSS selector syntax and run methods on that collection. jQuery uses native browser API methods to retrieve DOM collections. Newer browsers support getElementsByClassName, querySelector and querySelectorAll which parses CSS syntax. However, older browsers only offer getElementById and getElementByTagName. In the worst scenarios, jQuery’s Sizzle engine must parse the selector string and hunt for matching elements. Here are five tips which could help you optimize your jQuery selectors… 1. HTML ID attributes are unique in every page and even older browsers can locate a single element very quickly: $("#myelement"); 2. The following class selector will run quickly in modern browsers: $(".myclass"); Unfortunately, in older browser such as IE6/7 and Firefox 2, jQuery must examine every element on the page to determine whether “myclass” has been applied. $("div.myclass"); 3. $("p#intro em"); 4.

.delay() Description: Set a timer to delay execution of subsequent items in the queue. Added to jQuery in version 1.4, the .delay() method allows us to delay the execution of functions that follow it in the queue. It can be used with the standard effects queue or with a custom queue. Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue. Durations are given in milliseconds; higher values indicate slower animations, not faster ones. Using the standard effects queue, we can, for example, set an 800-millisecond delay between the .slideUp() and .fadeIn() of <div id="foo">: When this statement is executed, the element slides up for 300 milliseconds and then pauses for 800 milliseconds before fading in for 400 milliseconds. The .delay() method is best for delaying between queued jQuery effects.

Nivo Slider - The Most Awesome jQuery Image Slider Beautiful transition effects Nivo Slider offers 16 transition effects ranging from slicing and sliding, to fading and folding, making your galleries interactive and fun. No coding skills needed Create a beautiful experience when playing your gallery of images without any advanced coding. Include the image slider in your posts and pages using a simple shortcode. Automatic image cropping Nivo Slider crops and resizes images to a specified size, so you don’t have to do it manually for each image. Responsive and mobile ready The generated image sliders are completely responsive. Everyone loves Nivo! Time to make the best of your website’s’ image galleries. Pre-built slider themes You can choose the style of your sliders from the awesome pre-built themes. Create sliders from categories or galleries Besides the classic image sliders, Nivo allows you to choose between Category and Gallery sliders. Post types support Create carousels Join 471,039 happy customers and get access to 30+ premium products

Views jQFX Galleria | Web Development New Demo: HTML Caption Layer Basically Galleria is a stellar themable customizable javascript photo gallery and this module integrates it with Drupal 7. Image galleries can be created from images in a single node or from multiple nodes. The demo above uses the classic theme with lightbox enabled. This demo also uses the classic theme, image crop is 'true', image pan is enabled, the stage is a little taller, and clicking the image toggles fullscreen 'mode'. Galleria also supports tooltips, custom theming, and has tons of other advanced capabilities. I will put up additional information on using Galleria as time permits. The new Galleria home page is up. Also, Galleria has changed their API so that settings are now camel case. More Demos: The Module and an Extra Theme: The Galleria Plugin: The jQFX project pages on drupal: Notes: Image formatting is now done by the module. Lightbox support has been integrated into the settings as of 1.2.3. This module is undergoing frequent updates.

45 Fresh Out of the oven jQuery Plugins - Noupe Design Blog Mar 05 2008 Two month ago we’ve presented the 50 favorite jQuery plugins many developers use and we promised that the second version will be coming soon. Today, we are going to introduce 45+ more jquery plugins that were recently created, so you don’t have to do the search as we did it and will continue to do it to build a useful library of jquery plugins and solutions. Image SlideShows and Galleries 1) Galleria -Is a javascript image gallery written in jQuery. 2) jQuery Multimedia Portfolio -Non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3), will automatically detect the extension of each media and apply the adapted player. 3) wSlide -Change your lists in animated box (with pagination) Tag Clouds 4) Hover Sub Tags- Using jQuery to reduce the size of the tag cloud that you have on your sites, for example if you have Ajax as a tag, you can have jquery, mootools, etc… as sub-tags. Pagination Navigation 7) jQuery Treeview Plugin Tables and Grids

css selectors - JQuery - One handler for multiple elements using variables

Related:  zoompicture galleryJQueryjquerywebbuildingjQuerySlideshowajaxslideshowplugin