background preloader

Craftyslide - A tiny jQuery slideshow plugin

Craftyslide - A tiny jQuery slideshow plugin
Light Trails Bokeh Blossoms Funky Painting Vintage Chandelier Why Craftyslide? Craftyslide was created first and foremost as an experiment, but secondly out of frustration with many plugins being written today. Usage Using Craftyslide on your site is easy. Files to include: Basic initialization: <script> $("#slideshow").craftyslide(); </script> Show CSS Show jQuery Options width (number) Set a custom width for your slideshow. height (number) Set a custom height for your slideshow pagination (true/false) Select whether to display pagination or not. fadetime (number) Define the fade animation speed of slides. delay (number) Used during auto mode (pagination set to false). Options example: Example showing multiple options Download

Fullscreen Gallery with Thumbnail Flip In this tutorial we will create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to. We will add navigation […] View demoDownload source In this tutorial we will create a fullscreen gallery with jQuery. We will be using Flip! And we will also be using the jQuery Mousewheel Plugin by Brandon Aaron. The beautiful images are by talented Polina Efremova. Let’s get started with the markup! The Markup First, we will add a loading element that we want to show when the images are being loaded: Then, we will create a container for all the images that will be shown in fullscreen: We will use the “longdesc” attribute to indicate the path to the respective thumbnail. Next, we will add a container for the contents that are shown on the left bottom corner of the screen. Let’s take a look at the style. The CSS The JavaScript

jQuery image zooming plugin A plugin to enlarge images on touch, click, or mouseover. Fork me on GitHub Demo Hover Grab Download Released under the MIT License. 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(); // add zoom$('#example').trigger('zoom.destroy'); // remove zoom Settings Hey,

10 interesting jQuery plugins (september 2011) 10 interesting jQuery plugins (september 2011) This is new roundup of most interesting jQuery plug-ins that have emerged over the last month. Here are different plugins like sliders, ui dialogs, images filter etc. 1. The slider that scrolls the image vertically on its axis. 2. Designers seem to like using modal windows more and more, as they provide a quick way to show data without reloading the entire page. 3. rlightbox This is a jQuery UI mediabox that can display many types of content such as images, YouTube videos and Vimeo content. 4. This is a jQuery plugin that makes it simple to add sliding (aka “floating”) panel functionality to your web page. 5. jCallout Callout is a balloon div that connects text, symbols, images to an element or a group of elements. 6. jFL – Fluid Adaptive Layout jFL – plugin for handling fluid and adaptive layout elements: resize div, resize font size, div positioning. 7. Nice way to filter array of images. 8. multiselect 9. 10. Conclusion

Jcrop - Deep Liquid Jcrop Home • Download • Manual • Examples Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications. Feature Overview Attaches unobtrusively to images or block objects Supports aspect ratio locking Supports minSize/maxSize setting Callbacks for selection done, or while moving Keyboard support for nudging selection API features to create interactivity, including animation Support for CSS styling, now uses LESS Touch support for iOS, Android, etc Cross-platform Compatibility Firefox 2+ Safari 3+ Opera 9.5+ Google Chrome 0.2+ Internet Explorer 6+ May work in older versions or other modern browsers, these were tested. Documentation Archive Jcrop is free software released under MIT License.

Russian Wedding Photoshop Disasters Welcome to the magical land of extreme Russian wedding photos. Prepare yourself for Photoshoppery of head-aching proportions. Witness the wing-sprouting brides and multiplied grooms in inexplicable psychedelic scenarios. Because if there’s anything better than a bride inside a rose, it’s seven brides inside a rose bush. It’s a non-ironic tradition of sorts!

Related: