jQuery SDK
Last updated: Sep-02-2024
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.
For details on all new features and fixes from previous versions, see the CHANGELOG.
Quick example: Transformations
Take a look at the following transformation code and the image it delivers:
![sample transformation sample transformation](https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_150,w_150/r_20/e_sepia/l_cloudinary_icon/e_brightness:90/o_60/c_scale,w_50/fl_layer_apply,g_south_east,x_5,y_5/a_10/front_face.png)
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:
In a similar way, you can transform a video.
- See all possible transformations in the Transformation URL API reference.
- See more examples of image and video transformations using jQuery.
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:
jQuery SDK features
- Build URLs for image and video transformations
- 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:
The optional --save
parameter saves the dependency in your bower.json
file.
Setup
1. Include jQuery
Include the files in your HTML page:
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 Cloud name in the Programmable Media Dashboard of the Cloudinary Console, and you can find all of your credentials, including API Key and API Secret, on the API Keys page of the Cloudinary Console Settings.
- Most functionality implemented on the client side does not require authentication, so only your
cloud_name
is required to be configured, and not your API key or secret. Your API secret should never be exposed on the client side, so if you want to use signed uploads or generate delivery signatures, you'll also need server-side code, for which you can use one of our backend SDKs. - For backward compatibility reasons, the default value of the optional
secure
configuration parameter isfalse
. However, for most modern applications, it's recommended to configure thesecure
parameter totrue
to ensure that your transformation URLs are always generated as HTTPS.
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:
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: