jQuery integration

Overview

Cloudinary is a cloud-based service that provides an end-to-end image and video management solution including uploads, storage, manipulations, optimizations and delivery. All your media resources are optimized and delivered through a fast CDN using industry best practices.

Using Cloudinary's jQuery SDK, you can perform smart image and video manipulations using code that integrates seamlessly with your existing jQuery application and deliver optimized and responsive media to your users.

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

Quick example

The following Cloudinary URL and corresponding jQuery code generates the image below including all of the following transformations:

  • A thumbnail crop to a size of 150x150 pixels using face detection gravity to automatically determine the location for the crop
  • Rotated 20 degrees
  • Sepia effect
  • Cloudinary logo overlay on the southeast corner (with a slight offset). The logo is scaled down to a 50 pixel width, with increased brightness, and partial transparency (opaqueness = 60%)
  • 10 degree rotation
  • Converted to and delivered in PNG format (the originally uploaded image was a JPG)

jQuery:
$.cloudinary.image("front_face.png", {transformation: [
  {width: 150, height: 150, gravity: "face", radius: 20, effect: "sepia", crop: "thumb"},
  {overlay: "cloudinary_icon", gravity: "south_east", x: 5, y: 5, width: 50, opacity: 60, effect: "brightness:200"},
  {angle: 10}
  ]})
Example dynamic delivery URL
.

jQuery SDK features

Cloudinary provides a jQuery library with an easy-to-use API for further simplifying the integration.

  • Build URLs for image and video transformation & manipulation.
  • jQuery helper methods for embedding and transforming images, and more.
  • Direct uploading from the browser.

Getting started

This section describes the information you need to know for installing and setting up jQuery.

Installation

The following instructions detail the installation of the Cloudinary jQuery library.

Installation options

Install the files using a package manager:

# 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 in your HTML page. For Example:

<script src="[folder-path]/jquery/dist/jquery.js" type="text/javascript"></script>
<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 configuration parameters 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:

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

Sample projects

To find additional useful code samples and 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