Facebook如何编辑个人资料照片缩略图？

Question

我正在开发一个迷你画廊，需要像facebook那样编辑缩略图。 Jquery有可能吗？ 用特定的容器拖动一个区域并获取顶部和左侧坐标，我只想获取坐标。

，请给我一些想法，感谢

Answer 1

使用jQuery可拖动的用户界面：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; }​ 

Answer 2

你试过Jcrop？