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？