jQuert斷頭臺插件 - 在哪裏設置高度和寬度

的jQuery插件鍘V1.3.1 http://matiasgagliano.github.com/guillotine/

我演示的代碼測試，但試圖設置寬度和高度。無論我在哪裏設置寬度和高度，getData方法都會失敗。如果我刪除的寬度和高度聲明（默認爲400×300像素）的getData工作再次和你點擊縮放等

<script type='text/javascript'> 
jQuery(function() { 

var picture = $('#memberPhoto'); 
//SETTING THE WIDTH AND HEIGHT CAUSES GETDATA() TO STOP WORKING 
//THE CONTROL PANEL DOES NOT UPDATE AND THE OUTPUT OF GETDATA IS EMPTY 
//picture.guillotine({width: 250, height: 300}); 


    // Make sure the image is completely loaded before calling the plugin 
    picture.one('load', function(){ 


    // Initialize plugin (with custom event) 
    picture.guillotine({eventOnChange: 'guillotinechange'}); 
    picture.guillotine('fit') 


    // Display inital data 
    var data = picture.guillotine('getData'); 
    for(var key in data) { $('#'+key).html(data[key]); } 

    // Bind button actions 
    $('#rotate_left').click(function(){ picture.guillotine('rotateLeft'); }); 
    $('#rotate_right').click(function(){ picture.guillotine('rotateRight'); }); 
    $('#fit').click(function(){ picture.guillotine('fit'); }); 
    $('#zoom_in').click(function(){ picture.guillotine('zoomIn'); }); 
    $('#zoom_out').click(function(){ picture.guillotine('zoomOut'); }); 

    // Update data on change 
    picture.on('guillotinechange', function(ev, data, action) { 
     data.scale = parseFloat(data.scale.toFixed(4)); 
     for(var k in data) { $('#'+k).html(data[k]); } 
     console.log(data); 
    }); 
    }); 

    // Make sure the 'load' event is triggered at least once (for cached images) 
    if (picture.prop('complete')) picture.trigger('load') 




});

如果我設置的高度和直接寬度控制面板更新在源代碼中一切都很好。任何人都可以幫忙..？那你有

感謝羅爾夫

來源

2016-02-29 Rolf Herbert

當您運行此腳本，你得到開發人員控制檯中的任何不確定的錯誤？ –

根本沒有錯誤......一切仍然有效..我可以調整大小，旋轉等，但沒有給予數據對象的值。 –

我剛下載演示。我會看一看，看看我能不能找出一些東西。 –

的問題是設置需要的圖像加載後傳遞英寸

的JavaScript：

 jQuery(function() {   


var picture = $('#sample_picture'); 
// Make sure the image is completely loaded before calling the plugin 

//SETTING THE WIDTH AND HEIGHT CAUSES GETDATA() TO STOP WORKING 
//THE CONTROL PANEL DOES NOT UPDATE AND THE OUTPUT OF GETDATA IS EMPTY 
//picture.guillotine({width: 250, height: 300}); 


     picture.one('load', function(){ 

      /*PATCH: Settings need to be passed in after the object has loaded*/ 

     // Initialize plugin (with custom event) 
     picture.guillotine({ 

      width: 250, height: 300,//<- Add plugin properties here. 
      eventOnChange: 'guillotinechange' 


     }); 
     // Display inital data 
     var data = picture.guillotine('getData'); 
     for(var key in data) { $('#'+key).html(data[key]); } 
     // Bind button actions 
     $('#rotate_left').click(function(){ picture.guillotine('rotateLeft'); }); 
     $('#rotate_right').click(function(){ picture.guillotine('rotateRight'); }); 
     $('#fit').click(function(){ picture.guillotine('fit'); }); 
     $('#zoom_in').click(function(){ picture.guillotine('zoomIn'); }); 
     $('#zoom_out').click(function(){ picture.guillotine('zoomOut'); }); 
     // Update data on change 
     picture.on('guillotinechange', function(ev, data, action) { 
      data.scale = parseFloat(data.scale.toFixed(4)); 
      for(var k in data) { $('#'+k).html(data[k]); } 
     }); 
     }); 
     // Make sure the 'load' event is triggered at least once (for cached images) 
     if (picture.prop('complete')) picture.trigger('load'); 
    });

來源

2016-02-29 18:44:34

jQuert斷頭臺插件 - 在哪裏設置高度和寬度

回答

相關問題