jQuery SDK

Overview

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

Related topics
This guide relates to the latest released version of the Cloudinary JavaScript library, which contains the jQuery package.

For details on all new features and fixes from previous versions, see the CHANGELOG. {/reading

Note
The following instructions describe Cloudinary's jQuery client-side library. For the server side NodeJS library, see the NodeJS documentation.

Quick example: Transformations

Take a look at the following transformation code and the image it delivers:

jQuery:
Copy to clipboard
$.cloudinary.image("front_face.png", {secure: true, transformation: [
  {width: 150, height: 150, gravity: "face", crop: "thumb"},
  {radius: 20},
  {effect: "sepia"},
  {overlay: new cloudinary.Layer().publicId("cloudinary_icon"), gravity: "south_east", x: 5, y: 5, width: 50, opacity: 60, effect: "brightness:200"},
  {angle: 10}
  ]})
sample transformation

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)

And here's the URL that would be included in the image tag that's automatically generated from the above code:

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:

Copy to clipboard
<input name="file" type="file" class="cloudinary-fileupload" data-cloudinary-field="image_id" 
   data-form-data="[upload-preset-and-other-upload-options-as-html-escaped-JSON-data]"></input>
Copy to clipboard
$(document).ready(function() {
    $("input.cloudinary-fileupload[type=file]").cloudinary_fileupload();
});

jQuery SDK features

  • Build URLs for image and video manipulations
  • jQuery helper methods for embedding and transforming images, and more
  • Direct unsigned file upload from the browser

Installation

Install the jQuery library using a package manager:

Copy to clipboard
# For NPM:   
npm install jquery --save
npm install blueimp-file-upload --save
npm install cloudinary-jquery-file-upload --save

# For Bower: 
bower install cloudinary-jquery --save

The optional --save parameter saves the dependency in your package.json or bower.json file, respectively.

Setup

1. Include jQuery

Include the files in your HTML page:

Copy to clipboard
<script src="[folder-path]/jquery/dist/jquery.js" type="text/javascript"></script>
// the following files only need to be included in order to support client-side uploading
<script src="[folder-path]/blueimp-file-upload/js/vendor/jquery.ui.widget.js" type="text/javascript"></script>
<script src="[folder-path]/blueimp-file-upload/js/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="[folder-path]/blueimp-file-upload/js/jquery.fileupload.js" type="text/javascript"></script>
<script src="[folder-path]/cloudinary-jquery-file-upload/cloudinary-jquery-file-upload.js" type="text/javascript"></script>
// [folder-path] is the mapping to the resources in your web application

2. Set Cloudinary configuration parameters

To use the Cloudinary jQuery library you have to configure at least your cloud_name. You can additionally define a number of optional configuration parameters if relevant. You can find your account-specific configuration credentials in the dashboard of our Management Console.

An instance of the Cloudinary jQuery main class, CloudinaryJQuery, is already instantiated as $.cloudinary. Setting the configuration parameters can be done either programmatically in each call to a Cloudinary method or globally using the Cloudinary config method, for example:

Copy to clipboard
$.cloudinary.config({ cloud_name: 'sample', secure: true});

Sample projects

For additional useful code samples and to learn how to integrate Cloudinary with your web applications, take a look at our sample projects for Ruby on Rails, PHP and Django. You should also take a look at the following sample project of a dynamic HTML page using Cloudinary's jQuery plugin that performs direct uploading from the browser with uploading progress, an image preview with advanced transformations:

Sample Project

✔️ Feedback sent!