Как Facebook редактирует миниатюры фотографий профиля?

Question

Я разрабатываю мини-галерею, и мне нужно редактировать эскизы, как это делает Facebook.Это возможно с Jquery?перетащите область с конкретным контейнером и получите координаты сверху и слева, я просто хочу получить координаты.

, пожалуйста, дайте мне некоторое представление, спасибо

Answer 1

Вы пробовали Jcrop ?

Answer 2

Использование jQuery Draggable UI: http://jsfiddle.net/antonysastre/j9UUm/10/

В основном используется локализация для перетаскиваемого элемента, который динамически вычисляется и скрывается с помощью переполнения.

Короче говоря:

HTML

<div class="body">
    <div class="thumbnail">
        <div class="containment">
            <div class="image"><img src="http://lorempixel.com/200/260/fashion" /></div>
        </div>
    </div>
</div>​

Javascript

$(document).ready(function() {
    $('.thumbnail .containment img').each(function() {
        var height = $(this).height();
        var overflow = (height - 160); // Using explict value here for now.
        var containerHeight = (overflow * 2) + 160; // And also here.
        var containerTop = Math.abs(overflow) * -1;
        $(this).parents('.containment').css({'top': containerTop});
        $(this).parents('.containment').css({'height': containerHeight});
    })

    $('.image').draggable({
        containment: 'parent',
        axis: 'y'
    });
});​

CSS

.containment { position: relative; }
.thumbnail {
    width: 160px;
    height: 160px;
    position: relative;
    overflow: hidden;
}
.thumbnail .image { position: relative; }
.thumbnail img { max-width: 160px; }​