I am using the Guillotine plugin;
jQuery Guillotine Plugin v1.3.1 http://matiasgagliano.github.com/guillotine/
I am testing with the demo code but trying to set the width and height. No matter where I set the width and height the getData method fails. If I remove the width and height declaration (it defaults to 400 by 300 pixels) getData works again and the control panel is updated as you click zoom etc
<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')
});
If I set the height and width directly in the source code all is fine. Can anyone help..?
Thanks Rolf
The issue that you are having is that the settings need to be passed in after the image has loaded.
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');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.