Magnific Popup: Responsive jQuery Lightbox Plugin Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device(for jQuery or Zepto.js). Examples Single image lightbox Three simple popups with different scaling settings. 1 — fits horizontally and vertically, 2 — only horizontally, 3 — no gaps, zoom animation, close icon in top-right corner. Lightbox gallery You may put any HTML content in each gallery item and mix content types. Zoom-gallery If you wish to open the popup only after image is fully loaded, you may preload image via JS. Popup with video or map In this example lightboxes are automatically disabled on small screen size and default behavior of link is triggered. Dialog with CSS animation Animations are added with simple CSS transitions, you can make them look however you wish.More animation effects on CodePen. Popup with form Entered data is not lost if you open and close the popup or if you go to another page and then press back browser button. Ajax popup Fast
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.
examples The Basics When initializing a typeahead using the typeahead.js jQuery plugin, you pass the plugin method one or more datasets. The source of a dataset is responsible for computing a set of suggestions for a given query. Bloodhound (Suggestion Engine) For more advanced use cases, rather than implementing the source for your dataset yourself, you can take advantage of Bloodhound, the typeahead.js suggestion engine. Bloodhound is robust, flexible, and offers advanced functionalities such as prefetching, intelligent caching, fast lookups, and backfilling with remote data. Prefetch Prefetched data is fetched and processed on initialization. Remote Remote data is only used when the data provided by local and prefetch is insufficient. Custom Templates Custom templates give you full control over how suggestions get rendered making it easy to customize the look and feel of your typeahead. Default Suggestions
37 Phenomenal jQuery Plugins and Demos for Developers In this post we have collected 37 jQuery plugins for use in your next web project. Slide-In Contact Form Description : When the user clicks on the Contact link at the top of the page, the contact form will slide down. Virtual jQuery Keyboard Description : This tutorial will explain how to implement a simple virtual keyboard with some with jQuery. Digg style sign up form Description : Simulate a Digg style signup form, with its unique features such as their dynamic tooltips that give you a hint on each field that is to be filled. Load Content While Scrolling With jQuery Description : If you have lots of content to present but can not load all of it at once as it may take too long, this plugin is the answer. Pirobox jQuery Lightbox Description : You can create a very elegant photo gallery page with this plugin, watch as the images slide in and out. FancyBox Facebox 1.2 Description : Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages. jGoogle
Tooltipster - The jQuery Tooltip Plugin Styling your tooltips with a custom look ⇑ Tooltipster makes it very easy to go from one of the packaged themes and customize a few properties of your choice. To do so, we recommend that you create a so-called "secondary theme" which will override some properties of a packaged theme. Create a new css file and include it in your page. Inside the file, declare your customized rules like this: For your secondary theme to be applied, provide an array of themes instead of just one. Changing the size of the arrow might be the only challenging customization but it's doable! Updating a tooltip's content ⇑ It's easy as pie to update a tooltip's content - whether it's open or closed. $('#myelement').tooltipster('content', 'My new content'); // or when you have the instance of the tooltip: instance.content('My new content'); Tooltipster plays a subtle animation when the content changes. Using AJAX to generate your tooltip content ⇑ Forcing or disabling sides ⇑ // ... is the same as ...' 1) Open triggers
37 More Shocking jQuery Plugins Apr 09 2008 It’s really amazing to see what one can create using jQuery. Developers just don’t stop making incredibly interactive web applications every now and then. This post just demonstrates excellent examples of some of the best jQuery plugins out there. You can also take a look at the other jQuery Plugins in this series : So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post. jQuery Sliders 1) Slider Gallery- A similar effect used to showcase the products on the Apple web site. Live Demo: Here 2) Accessible slider- Illustrations and code samples showing how to make a slider UI control accessible to those who aren’t running JavaScript or CSS. Live Demo: Here jQuery Manipulating Images 3) crop, labelOver and pluck-Crop-Gives your visitors the power to crop any image on the fly using JavaScript only. Live Demo Of Crop: HereLive Demo of LabelOver: Here Live Demo Of Crop: Here Live Demo: Here jQuery Navigation Menus jQuery Accordions jQuery Image Viewer
kamens/jQuery-menu-aim 45+ Fresh Out of the oven jQuery Plugins 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
tubular, a YouTube Background Player jQuery Plugin | Sean McCambridge Design Video controls:Play | Pause | Volume Up | Volume Down | Mute Tubular is a jQuery plugin that lets you set a YouTube video as your page background. Just attach it to your page wrapper element, set some options, and you're on your way. $(page content wrapper element).tubular(options); Tubular's hello, world Assuming you're happy with the default options and you use a wrapper div with the id of wrapper, you simply attach to your wrapper div and specify the video you want to load: and Presto! A word of caution Tubular does not design your website for you. Options and defaults ratio: 16/9 // usually either 4/3 or 16/9 -- tweak as needed videoId: 'ZCAnLxRvNNc' // toy robot in space is a good default, no?
tiltShift.js - a jQuery plugin using CSS3 filters to replicate the tilt shift effect download Download here or go to github. Released under GPL how to use Call the plugin on any collection of images you want by adding the following jQuery: jQuery(document).ready(function() { $('.tiltshift').tiltShift(); }); Parameters on each image must be set using the HTML5 data attributes, like this: The attributes will control various variables that influence the tiltshift effect. -position (0-100), defines the point of focus. 66 would be two thirds of the way in. notes As previously stated, currently only supported by Chrome & Safari 6. authors tiltShift.js is brought to you by Noel Tock, a WordPress, front-end and startup dude. Additional code by Adam Yanalunas, a dude who is passionate about stuff and things … especially front-end development stuff and JavaScript things. photo credits If you're interested in licensing any of the images, please contact the photographers by following the links below: Airplane / Stadium / Ocean / Skyscraper
js A gridster configuration object. Define which elements are the widgets. Can be a CSS Selector string or a jQuery collection of HTMLElements. Horizontal and vertical margins respectively for widgets. Base widget dimensions in pixels. extra_rows: 0 Add more rows to the grid in addition to those that have been calculated. extra_cols: 0 max_cols: null The maximum number of columns to create. min_cols: 1 The minimum number of columns to create. min_rows: 15 The minimum number of rows to create. max_size_x: false The maximum number of columns that a widget can span. autogenerate_stylesheet: true Don't allow widgets loaded from the DOM to overlap. A function to return serialized data for each each widget, used when calling the serialize method. draggable.start: function(event, ui){} A callback for when dragging starts. draggable.drag: function(event, ui){} A callback for when the mouse is moved during the dragging. draggable.stop: function(event, ui){} A callback for when dragging stops. resize.enabled: false
Turn.js: The page flip effect in HTML5 Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. Let's code <div id="flipbook"><div class="hard"> Turn.js </div><div class="hard"></div><div> Page 1 </div><div> Page 2 </div><div> Page 3 </div><div> Page 4 </div><div class="hard"></div><div class="hard"></div></div> Features ✓ Works on iPad and iPhone. ✓ Simple, beautiful and powerful API. ✓ Allows to load pages dynamically through Ajax requests. ✓ Pure HTML5/CSS3 content. ✓ Two transition effects. ✓ Works in old browsers such as IE 8 with turn.html4.js Requirements jQuery 1.3 or above. Browser Support Safari 5 Chrome 16 Firefox 10 IE 10, 9, 8 Devices ✓ All iOS (iPad, iPhone, iPod) ✓ Android (Chrome for Android) Improvements Turn.js 4 includes a set of significant performance improvements on its core. Complements Support About
croppic Responsive Lazy Loading plugin for JQuery | BttrLazyLoading