jqPuzzle

$(function() {
    var params = {
          rows     : 4
        , cols     : 4
        , hole     : 16
        , shuffle  : true
        , numbers  : false
        , language : 'jp'
        , control : {
              shufflePieces  : true
            , confirmShuffle : true
            , toggleOriginal : true
            , toggleNumbers  : true
            , counter        : true
            , timer          : true
            , pauseTimer     : false
        }
        , success : {
              fadeOriginal    : true
            , callback        : undefined
            , callbackTimeout : 300
        }
        , animation : {
              shuffleRounds     : 3
            , shuffleSpeed      : 800
            , slidingSpeed      : 200
            , fadeOriginalSpeed : 600
        }
        , style : {
              gridSize          : 2
            , overlap           : true
            , backgroundOpacity : 0.1
        }
    };
    //$('img.jqPuzzle').each(function() { $(this).jqPuzzle(params); });
    $('#puzzle img').jqPuzzle(params);
});

<div id="puzzle">
 <img src="400/1.jpg" width="400" height="400" class="jqPuzzle" />
</div>

// thumbnail から画像を替える
$('#thumbnails img').click(function() { 
    $('#thumbnails img.selected').removeClass('selected');
    $(this).addClass('selected');
    var src = $(this).attr('src').replace(/-100/, '-400'); 
    
    //切り替わるときにレイアウトが動かないように幅を固定
    var dim = {width:'404px',height:'443px'};
    $('#container')
        //.css(dim)
        .html($('<img  />').css(dim)
        .attr({src:src,width:400,height:400,id:'puzzle'})
        .addClass("jqPuzzle")
    );
    $('#puzzle').attr({src:src}).jqPuzzle(params);
}).filter(':first').click();

  <div id="thumbnails">
   <img src="img/1-100.jpg" width="100" height="100" />
   <img src="img/2-100.jpg" width="100" height="100" />
   <br />
   ..
  </div>

CSS