8 jQuery Plugins for Rich Text Editors

With rich text editors (also referred to as What You See is What You Get editors -- which is often abbreviated to WYSIWYG) make it easy for anyone to add styled, formatted text to the interwebs without having to have any code or CSS knowledge. They're the kind of editor that most people would probably use when writing up a page or a post on a CMS platform like WordPress or Blogger. If you want to add one to any of your websites or projects to give anyone the chance to be able to post polished looking content, check out our curated list of the best jQuery plugins that allow you to include a WYSIWYG editor just about anywhere.

1. Summernote


Summernote is a really beautiful text editor on Bootstrap. It's simple, mobile friendly, and it comes with two different pre-styled themes (dark or light). It's easy to install and customize and it's totally open source.



Matheditor.js is a unique rich text editor that works like all of the other WYSIWYG editors on this list, only instead of using it to generate formatted text, you use it to generate formatted math equations. It uses the MathQuill library, is super lightweight, and is optimized for mobile use.  

3. Froala


Froala is a lightweight WYSIWYG editor that is incredibly easy to use, supports dozens of different languages, is mobile friendly, and supports common keyboard shortcuts.



Redactor is a simple rich text editor with a clean, minimalist design. One of its coolest feature is a drag and drop capability for images. 

5. Cazary


Cazary is another simple WYSIWYG editor that can be used in a few different modes. Full mode includes tons of customization and formatting options for the text within the editor, while minimal mode only offers a few common ways to format text, such as the option to make the text bold, italic, or underlined.



ContentTools is a really cool editor that allows for inline editing, which means you can set certain parts of your pages to be editable areas, and users can edit them on the spot. It's easy to integrate with any site.



This rich text editor has a clean and simple design, but what makes it unique is that it provides users with an instant preview of the text they're creating and formatting. It's also super lightweight and easy to use.



TinyMCE is a plugin that provides you with a feature rich WYSIWYG editor that includes features such as file management, spell check, media embedding, and image editing. This powerful editor would be a great addition to any site. 







6 jQuery Plugins for Image Cropping

Adding a cropping functionality to your site is definitely a cool feature to include on any project, and a great way to give your users access to a really useful functionality If you're not sure how to go about creating an image cropper from scratch, don't worry, you're not alone. With so many open source image cropping jQuery plugins available, there's really no need for you to code one yourself anyway. Take a look at the following list of some of the best, most lightweight, and most efficient image cropping plugins around.

1. cropit


Cropit is a great plugin for image cropping that loads images locally using a file reader (you can drag and drop the images you want to upload), then crops them using HTML5 canvas. It's extremely customizable with CSS and is responsive, so it works on both desktop and mobile devices (it has touch support for mobile).

2. DarkroomJS


DarkroomJS isn't exclusively an image cropper -- it's an image editor, that includes a cropping functionality. If you want to give your uses the option to rotate their images, or adjust the brightness of their images, in addition to giving them a cropping feature, this plugin is a great option. Powered by HTML5 canvas.



This is a powerful plugin that offers you tons of customization options in terms of user experience and how you can allow your user to upload their image, crop their image, view their cropped image, etc. A very versatile cropping plugin, this one's an awesome option for those looking to give their users a unique and smooth crop experience.


Picture cut is a cropping plugin that's supported on all major browsers. It's a simple, no-fuss process with a minimalist design (though the style is totally customizable, of course). Great for if you're looking for an uncomplicated cropping functionality (with a drag and drop feature!).

5. Jcrop

The coolest thing about Jcrop is that it has a "preview pane" (see the box to the right of the image in the screenshot above) that gives the user a preview of what their image is going to look like once its cropped. Aside from the preview pane, the plugin is lightweight, easy to install, and even easier to use.



Cropper is a cropping plugin that gives the user lots of options for formatting their uploaded photo. You can zoom in and out of the photo, move it around the canvas (up and down or side to side), rotate the image, and change the scale. It's a great tool for users who really want to play around and experiment with dimensions and aspect ratios of their images in addition to cropping them. 




7 Cool jQuery Plugins for Transitions

Including smoothed, polished transitions is a fabulous way to make your projects look sleek and professional. Animated transitions are the perfect finishing touch to add to a website, but writing the code for these transitions from scratch (whether you're using CSS or jQuery to execute them), can sometimes be much more of a pain than it's worth. If you want to add transitions to you projects without putting in the extra time to write the code yourself, check out this list of some of the coolest free jQuery plugins to achieve transition effects.

1. Transit

Transit is a fantastic free plugin that will provide you with the smoothest transitions using jQuery. The plugin is easy to use and will animate any element in both 2D and 3D transformations.

2. Multi-screen.js


Multi-screen.js will provide you with animated transitions to switch between "pages." Basically, it's a unique way to create a single-page site that has the illusion of having multiple pages because the user is able to flip through the content smoothly and easily with the help of Multi-screen.js.



Fluidbox is an image-enlarging plugin that allows your user to click on an image to enlarge it, and when the image enlarges, it does so using a nice transition effect. Perfect if your project has a lot of plugins that you want your users to be able to enlarge without it feeling clunky. The plugin also supports responsive designs.



Blindify is another transition plugin that can be applied to images. The aim of the plugin is to allow you to create image slideshows where the transitions are a vertical or horizontal "blind-effect" -- so it sort of resembles animated window blinds.



An interesting take on the menu concept, this plugin helps you build a square (or rectangular) menu that opens at a single click, and when it opens it does so using a beautiful, customizable transition.

6. Dialog

A cool way to use transition effects it to apply them to pop ups or dialog boxes, which is exactly what the Dialog plugin does. With Dialog, you can apply smooth transition effects to any pop-up, so that the pop-up effect is sleeker and less jarring for the user. This plugin is ultra lightweight.

7. Wiper


Wiper is another plugin to use when creating image slideshows. This slideshow plugin not only offers cool, wiping transition effects for your slideshow, but it also provides a very unique slider navigation (see in the screenshot above all the bars in the top left corner that say "sample" -- clicking one of these will reveal a previously viewed slide). 






10 Awesome jQuery Parallax Plugins


The parallax scrolling effect allows you to move the background content (i.e. an image) at a different speed than the foreground content while scrolling. It is very trendy these days to use parallax effect. In this post, we’ve compiled a list of 10 awesome jQuery parallax plugins, allowing you to easily implement parallax effects on images or text. These easy to use and lightweight plugins support horizontal and vertical movement for parallax scrolling. Enjoy!

Parallaxify is a jQuery plugin that adds parallax effects to elements and backgrounds triggered by gyroscope sensor data (device orientation) or mouse movement. Parallaxify exposes a variety of options that let you influence how element positioning is achieved, configure filtering of sensor data, configure the movement algorithm, and change general plugin settings. In order to add a parallax effect to any element you can run .parallaxify() on the wrapper of an element or run it globally on 'window'.


Fallings is a lightweight jQuery parallax effect plugin that focuses on manipulating absolute elements positions based on the window.scrollTop() property. The parallax effect can be checked while scrolling up/down in the browser window.


Paroller.js is an easy to use, mobile ready, lightweight jQuery plugin that enables parallax scrolling effects. You can use it on background elements or on any other element. Scrolling elements can move vertically or horizontally.

Parally is a small, simple, flexible jQuery parallax scrolling plugin which can be applied to background images or any other DOM elements. You can also pass multiple configuration parameters to controls the parallax effect.

Parallax.js is a jQuery parallax plugin that helps you create Spotify-like parallax scrolling effect on your web page. Parallax.js will create a fixed-position element for each parallax image at the start of the document's body. This mirror element will sit behind the other elements and match the position and dimensions of its target object.

Parallax ImageScroll is a simple and easy jQuery plugin for creating image parallax effects while scrolling the page, inspired by spotify.com. The plugin is really simple to use with several options for tweaking. It makes use of css3 transform for animation where supported and falls back to top and left positioning for ancient browsers.

jInvertScroll is a lightweight plugin for jQuery that allows you to move horizontally with a parallax effect while scrolling down. It's easy to set up and requires nearly no configuration.

TVParallax is a tiny jQuery plugin utilizing CSS3 3D transforms to implement an Apple tvOS style parallax effect on a given element that interacts with mouse movement.

Parallaxator is a jQuery-based parallax plugin. It's simple, and amazingly easy to use. It allows you to implement parallax effects with any html elements including text and images.

Paralaxbg.js is a jQuery script for creating background parallax effects which make background images move slower than foreground content while scrolling up or down.

Conclusion


To conclude, these jQuery parallax plugins can be used to apply the parallax scrolling effect on any HTML element like text or images and also supports horizontal and vertical scrolling. These plugins are easy to integrate and only require that you download their library, include attribution, and make a call to the library from your code. These plugins are pretty lightweight and offer great customization to modify the default implementation.











10 Free and Lightweight jQuery Pop-Up Plugins

Pop-up modals are a great way to increase engagement on your sites. You an use them as exit pop-ups to collect emails, you can use them to display content or forms, and you can use them to showcase images and videos. Whatever the reason you want to add pop-ups to your sites and projects, using a plugin to achieve this functionality is a good way to go. What follows is a list of lightweight, free, and easy to use jQuery pop-up plugins that would be great additions to any projects.

1. animatedModal.js


animatedModal.js is a plugin that creates beautiful, responsive modals that come with a stylesheet for adding animations. You can use the animations and transitions provided for you with the modal, or you can feel free to write your own. 



leanModal.js is the perfect plugin for displaying plain page content via a modal. The plugin is simple, lightweight, and comes with two different display options (with or without a close button). You can close out of the modal by clicking anywhere outside of the pop-up.



Colorbox is a very popular plugin that can be used to display images in a stylish way. The plugin comes with a lightbox feature, so not only does the image pop-up when it's triggered, but the lightbox covers the rest of the screen with a semi-transparent layer, so the image is truly on display.



Remodal is a responsive, lightweight modal plugin that comes loaded with CSS transitions and is fully customizable. 



Ouibounce is a lightweight, simple plugin that offers lots of different customizable features for you to use to build your ideal modal. Perfect for if you want to implement exit pop-ups. 



jQuery Popdown Plugin is a simple plugin that you can use to create pop-ups that appear to slide down from the top of the viewport. Perfect for displaying images and videos. 



Magnific Popup is a popup plugin that is responsive and comes with a smooth lightbox feature. Great for displaying images and content. 


This jQuery plugin is the perfect way to use pop-up modals as log-in forms because you can use it to block pages until the form within the modal is completed. It comes with lots of features and functionalities that you can customize.

9. Vex

Vex is a unique modal plugin that gives you complete control over the styling, features, and behavior of your pop-up windows. 



This jQuery pop-up plugin is simple, lightweight, and comes with a lightbox feature. Can be used to display content, photos, or any embedded content.