Create a Portfolio Zoom Slider with jQuery

We are going to create some nice effects for a portfolio or similar website with jQuery.

We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin.

The idea is to give the user the option to view details of a portfolio item by zooming it on hover, and to allow a full view by clicking.

Moreover, we want to have a couple of images for each item, hence we will create a slider.

When integrating jQuery scripts, it sometimes happens that there are conflicts, be it because of some shared attribute or because of some specific structure that is needed by each jQuery plugin.

In this tutorial we will bump into some of these conflicts and we will adapt some lines of code in order to bypass them.