jQuery SDK

The Cloudinary jQuery SDK provides simple, yet comprehensive image and video upload, rendering, transformation, optimization, and delivery capabilities that you can implement using code that integrates seamlessly with your existing jQuery application.

How would you like to learn?

Install

Install the jQuery library using a package manager:

The optional --save parameter saves the dependency in your bower.json file.

Configure

Include jQuery

Include the files in your HTML page:

Set required configuration parameters

To use the Cloudinary jQuery library you have to configure at least your cloud_name.

An instance of the Cloudinary jQuery main class, CloudinaryJQuery, is already instantiated as $.cloudinary.

You can set configuration parameters either programmatically in each call to a Cloudinary method or globally using the Cloudinary config method, for example:

Set additional configuration parameters

In addition to the required configuration parameters, you can define a number of optional configuration parameters if relevant.

For example, to ensure that your transformation URLs are always generated as HTTPS, in addition to configuring the cloud_name, you can set the secure configuration parameter to true:

Use

Once you've installed and configured the jQuery SDK, you can use it for:

• Uploading files to your product environment - Direct unsigned file upload from the browser. See example
• Transforming images - Build URLs and render your images with transformations applied. See example
• Transforming videos - Build URLs and render your videos with transformations applied. See example

Quick example: File upload

The following code demonstrates defining a file input field for client-side image or video file upload, and then initializing the input field for use with the cloudinary_fileupload method:

Quick example: Image transformations

The following jQuery code renders the front_face.jpg image with a variety of transformations applied:

This code creates the HTML required to render the following transformation URL:

This relatively simple code performs all of the following on the original front_face.jpg image before delivering it:

• Crop to a 150x150 thumbnail using face-detection gravity to automatically determine the location for the crop
• Round the corners with a 20 pixel radius
• Apply a sepia effect
• Overlay the Cloudinary logo on the southeast corner of the image (with a slight offset). The logo is scaled down to a 50 pixel width, with increased brightness and partial transparency (opacity = 60%)
• Rotate the resulting image (including the overlay) by 10 degrees
• Convert and deliver the image in PNG format (the originally uploaded image was a JPG)

Quick example: Video transformations

The following jQuery code renders the ship.mp4 video with a brightness adjustment applied:

You can apply more than one transformation at a time (see chained transformations) to give more interesting results:

This relatively simple code performs all of the following on the original ship.mp4 video before delivering it:

• Crop to a 1:1 aspect ratio (square) with a width of 300 pixels, using automatic gravity to determine the focal point
• Apply a blur effect with strength 50
• Apply maximum rounding to create a circular video

And here's the URL that's automatically generated from the above code:

Sample projects

The following sample project demonstrates a dynamic HTML page using Cloudinary's jQuery plugin (within a Ruby backend project) to perform direct uploading from the browser, including uploading progress, and an image preview with advanced transformations:

Photo Album sample project