menu

Facebook style cover image reposition in php jquery

Facebook style cover image reposition in php jquery : In this post we are going to explain the functionality implemented just like facbook style cover image repostion in php and jquery.

Jquery Ui : Jquery ui is used to enable the draggable functionality for the selected image.

Php : We are using php on sever side to resize and crop the image on co-ordinates provided. Co-ordinates are passed to the server selected by the user.

Jquery Ui Draggable : Provides the draggable functionality on element. Event is triggered when we move mouse on the
element ie image in this case.
Jquery Function used for draggable functionality.

Facebook style cover image in PHP with Syntax

Jquery Ui : Draggable

Main page with above code and main layout : index.php

Javascript Code to handle the drag and save event.

PHP Code On Server Side : functions.php

Php code to Resize And Crop the image to Fit on container

Main crop.php handling the complete server process :

Javascript Code to handle the drag and save event.

Demo »

DemoDownload