Using LightBox 2 with Cloudinary to generate thumbnails
Cloudinary is a cloud host for images that provides many features for manipulating images and serving them to your users in various formats. Cloudinary can transform your original images into other formats, as well as allow you to add transformations such as scaling, coloring, cropping, and many more.
Here is a simple example of what it can do when combined with a Light Box control.
This post uses the LightBox 2 plugin from @lokesh.
The above image has a thumbnail generated by using a different url to Cloudinary. The Light Box uses the full size image.
The link to the full size image is:
/image/upload/v1469237795/cerkit-off-air-16x9_sc0w3s.png
The link to the thumbnail is almost exactly the same, except it has the image width included as a transformation in the url, like so:
/image/upload/c_scale,w_200/v1469237795/cerkit-off-air-16x9_sc0w3s.png
There are many other transformations available from Cloudinary, this is just a small example.
In the following example, I will use Cloudinary's great scaling and zooming features to generate a series of images that will "zoom" in on the logo at the top right. I will do so by using Lightbox 2's grouping (use the same data-lightbox attribute values for all images to create a group).
Click on any of these images to see the non-transformed, full-size image
Each image group will display arrows on the right or left that you can use to navigate between them
The above three images were all stored on Cloudinary as a single image. The only difference was the url I used to access it. Each url has a different transformation applied to give me the desired result.
You can also apply different artistic effects. Here, I have pixelated my face:
You can also apply an oil paint transformation:
