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. It also supports, but does not require, the Easing Plugin. 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:  Sliders and fancyboxWebsite building

fancyBox - Fancy jQuery Lightbox Alternative What's new Version 2 is completely rewritten with new features and updated graphics. Notable changes Extendable using helpers Responsive (try resizing window while fancyBox is open) Integrated slideshow New gallery transitions Uses CSS3 (shadows, round corners) Updated plugin options (not compatible with previous versions) Now licensed under Creative Commons Attribution-NonCommercial 3.0 Instructions Download the plugin, unzip it, copy files and include fancyBox script and stylesheet in your document (you will need to make sure the css and js files are on your server, and adjust the paths in the script and link tag). Create link elements whose href attributes will contain the path of the element you wish to open within the fancyBox. Attach fancyBox when the document is loaded. <script type="text/javascript"> $(document).ready(function() { $(".fancybox").fancybox(); });</script> Examples You can also go straight into action and open a standalone version of demo and view its source code. Helpers

Circle Hover Effects with CSS Transitions A tutorial about how to create different interesting hover effects on circles with CSS transitions and 3D rotations. View demo Download source In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. We will omit vendor prefixes in this tutorial. So, let’s get started! The HTML For most of the examples, we’ll be using the following structure: Although we could use images here, we’ll give ourselves a bit more freedom by using background images instead. Now, let’s make some hover effects! The CSS Let’s define some common style for the list and the list items: Example 1 Example 2 Example 3

JQuery Cycle Plugin - Option Reference The cycle function can be passed a command string in the form: $('#slideshow').cycle('command'); The following command strings are supported: 'pause' // pauses the slideshow, slideshow can be resumed with 'resume' command 'resume' // resumes a paused slideshow 'toggle' // toggles the pause/resume state of the slideshow 'next' // advances slideshow to next slide 'prev' // advances slideshow to previous slide 'stop' // stops the slideshow 'destroy' // stops the slideshow and unbinds all events The following default options are provided by the plugin.

Fancy jQuery lightbox alternative| How to use 1. First, make sure you are using valid DOCTYPE This is required for FancyBox to look and function correctly. 2. Include necessary JS files Loading jQuery from CDN (Content Delivery Network) is recommended Optional - Add transitions as jQuery by default supports only "swing" and "linear" Optional - Enable "mouse-wheel" to navigate throught gallery items 3. Don`t forget to change background image paths if CSS file is not in the same directory. Also, check src paths for AlphaImageLoader as they are relative to the HTML document, while regular CSS background images are relative to the CSS document (read more). 4. Images Inline content <a id="inline" href="#data">This shows content of element who has id="data"</a><div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Iframe <a href=" Ajax <a href=" takes content using ajax</a> Optional - Use the title attribute for anchors if you want to show a caption 5.

Gamma Gallery: A Responsive Image Gallery Experiment Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account. View demo Download source Creating a truly responsive image gallery can be a very tricky and difficult thing. Gamma Gallery uses David David DeSandro’s Masonry in a fluid mode where column numbers are defined depending on the grid container sizes. Inspired by Picturefill from Scott Jehl, the responsive images approach that mimics the picture element, we’ve come up with the following HTML structure for defining different image sizes: Depending in which viewing mode we are, thumbnail grid view or full image view, the choice of the fitting image will depend on either the list item’s size or the whole viewport size. Because we have a “fluid” image approach where we define the max-width of the image to be 100%, we will fit the image in its container if the image is bigger than the container.

3500+ Best jQuery Plugins & Tutorials with jQuery Demo examples 2014 - 2015 JQuery Cycle Plugin - Intermediate Demos (Part 2) Rather than have transitions occur on a timer you can choose to have transitions occur in response to a click event. The prev and next options are used to identify the elements which should be the triggers for prev/next transitions. When used in conjuction with timeout = 0 the effect is a manual slideshow. The values for prev and next can be a DOM element or any valid jQuery selection string. You can combine an automatic slideshow (timeout-based) with manual controls by using a non-zero timeout value. The pager option is used for creating full navigation controls. In addition, the navigation element for the active slide is given the class activeSlide so that it can be styled uniquely. The pager in the example above is styled like this: If you need to stop a running slideshow you can pass the string 'stop' to the cycle method. $('#slideshow').cycle('stop'); If you need to pause/resume a running slideshow you can pass the string 'pause' or 'resume' to the cycle method.

Elastislide - A Responsive jQuery Carousel Plugin Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images. View demo Download source With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. Elastislide is a responsive jQuery image carousel that will adapt its size and its behavior in order to work on any screen size. In a carousel, one could think that simply making its container “shorter” will solve the problem on smaller screens, but in some cases (e.g. when we have bigger images) it might be reasonable to resize the items as well. Elastislide uses the jQuery++ for the swipe events on touch devices. The beautiful images are by talented Sherman Geronimo-Tan and they are licensed under Creative Commons Attribution 2.0 Generic (CC BY 2.0). The HTML Structure $('#carousel').elastislide(); Options Demos

40 Awesome jQuery Plugins You Need to Check Out Scrolling jQuery Waypoints Waypoints allows you to easily trigger JavaScript events at specific scroll points. Ever wonder how people build those amazing scrolling effects? This could be your answer. skrollr Parallax scrolling for the masses. Charts, Animations & Tables Handsontable A minimalistic approach to an Excel-like table editor in HTML & jQuery. jQuery Sparklines jQuery Sparklines helps you build little inline charts that are supplied with information via HTML or JavaScript. Teamwork Gantt Build incredible Gantt charts with jQuery. DataTables A jQuery plugin for creating impressive, highly functional data tables. arbor.js Build crazy looking, futuristic, animated and modular graphs. Layout Wookmark jQuery Plugin Easily build a Msonry-like layout like the one seen on Wookmark. jQuery Masonry The original jQuery Masonry. Isotope An amazing layout plugin that allows for intelligent and dynamic grids of items that can be easily sorted and filtered. FitVids.JS gridster.js Freetile.js Text Jeditable

Javascript Image Slider - No jQuery Basic Features Hardware-accelerated Javascript ( non jQuery, non flash ) Lightweight (16kb) HTML captions 17 transition effects Slider starts on DOM ready (DOMContentLoaded) instead of the delayed window.onload Customizable starting slide (specific index, or random) Supported by all major browsers IE 7.0+, Firefox 1.5+, Chrome 1.0+, Safari 3+, Opera 9.0+, Netscape 7.0+ Create/update image slider dynamically Price: Free (including commercial)or $20.00 if advanced features are used, see below. Advanced Features Lazy loading images:Each image will be preloaded in background only when it is about to be displayed (during the pause time of its previous image). Download the demos, copy the demo's code and paste it into your page. The download contains the source code: HTML samples (demo1-8.html), CSS (js-image-slider.css), and Javascript (js-image-slider.js). <! Lazy loading slider image will not load until the slider starts showing its previous image. How do I enable Lazy Loading Image? Yes.

jQuery Infinite Carousel Plugin The Infinite Carousel is a jQuery plugin that allows you to showcase any number of images and videos in a carousel-like fashion. Unlike some other carousels, the Infinite Carousel displays items in a continuous loop no matter how you navigate. Try out the demos below to see how versatile the Infinite Carousel is. Download Download jquery.infinitecarousel.zip (version 3.0.3 – January 24, 2013) What’s So Great About this Plugin? It’s just 11 Kb compressedDisplays image and videosCaptions and linksNew thumbnail optionsCool new circular ring timerKeyboard navigationCallback functionsNo browser lag caused by moving between tabsShortest path algorithm finds the shortest distance between images when using thumbnails to navigate.Works in all major browsersReusable on multiple containersCompletely free for commercial and non-commercial use (see license in plugin header) Demos Notes Options Instantiating $(‘#carousel’).infiniteCarousel({}); CSS Classes

Related: