[英]jQuery Guillotine plugin - where to set height and width
我正在使用斷頭台插件;
jQuery Guillotine插件v1.3.1 http://matiasgagliano.github.com/guillotine/
我正在測試演示代碼,但嘗試設置寬度和高度。 無論我在哪里設置寬度和高度,getData方法都會失敗。 如果我刪除了寬度和高度聲明(默認為400 x 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')
});
如果我直接在源代碼中設置高度和寬度,那一切都很好。 誰能幫忙..?
謝謝羅爾夫
您遇到的問題是圖像加載后需要傳遞設置。
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');
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.