Details:
This component is needed for a web application so it needs to be using json as input.
The user needs the ability to adjust
1. Number of Rows (+/-)
2. Number of Columns (+/-)
3. Margin between Cell/Image
4. Scaling of each cell/image will be via aspect ratio
5. The Parent div/container needs drag/resize support
There is a sorting & organizing the images ui/function but that will be handled by another developer.
Jquery : dynamically-resized images keeping aspect ratio (no distorted stretching)
image stretching function 1
image stretching function 2
image stretching function 3
Live stretching function maintaining aspect ratio
Jquery UI : Resizing Parent Div
Jquery resizing
Jquery dragable
Jquery X/Y Position
Crop and Rotate Code
Jquery cropzoom
cropzoom demo
jquery zoom example 2
jquery zoom code 2
Image Drag n Drop Scale example code
live interactive Demo
Use Json as Data Structure – Example below
// Create a gallery with array source - JSON
var mediaPath = 'images/';
$('#gallery_3').dcThumbnailGallery({
'source':[
{'source':mediaPath+'large/o1.jpg','thumbnail':mediaPath+'thumb/o1.jpg'},
{'source':mediaPath+'large/o2.jpg','thumbnail':mediaPath+'thumb/o2.jpg'},
{'source':mediaPath+'large/o3.jpg','thumbnail':mediaPath+'thumb/o3.jpg'},
{'source':mediaPath+'large/f1.jpg','thumbnail':mediaPath+'thumb/f1.jpg'},
{'source':mediaPath+'large/f2.jpg','thumbnail':mediaPath+'thumb/f2.jpg'},
{'source':mediaPath+'large/f3.jpg','thumbnail':mediaPath+'thumb/f3.jpg'}
]
});
Other resources for Jquery Components
code & tutorials
stackoverflow jquery ui