PDA

View Full Version : Help combining Simple Image Panner with existing Ajax image loader



dargo
10-01-2012, 08:38 AM
1) Script Title: Simple Image Panner and Zoomer v1.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/imagepanner.htm

3) Describe problem:

I have a simple AJAX & PHP uploading script on a site that I am building that displays an image in a div on an html form.

I have looked at the Simple Image Panner and Zoomer script and it does exactly what I want and I would like to incorporate it into my site so that the Ajax uploaded image can be displayed in a smaller div than currently and can then make use of this functionality.

I have no experience of Javascript and so am in learning mode. Can anyone help me to apply the Image panning script to a dynamically generated div rather than a static one? Also the image loader makes use of jquery 1.5 and the panner script uses 1.4.2 can they co-exist or do I need to do something else to make them work together?

If it helps this is the code for the image uploader.



$(document).ready(function() {

$('#photoimg').live('change', function() {
$("#preview").html('');
$("#preview").html('<div class="image_center"><img src="loader.gif" alt="Uploading...."/></div>');
$("#imageform").ajaxForm({
target: '#preview'
}).submit();

});
});


Any help or advice would be most welcome.

Colin

dargo
10-03-2012, 04:32 PM
Anybody got any ideas on how to make this script wait for the other one to load the image?

jscheuer1
10-03-2012, 07:29 PM
Well, if ajaxform has a success property as most plugin functions of that sort do, you could use that. Something like:


jQuery(document).ready(function($) {
$('#photoimg').live('change', function(){
$("#preview").html('');
$("#preview").html('<div class="image_center"><img src="loader.gif" alt="Uploading...."/></div>');
$("#imageform").ajaxForm({
target: '#preview',
success: function(){
var id = 'z' + new Date().getTime(), $pancontainer, $img, options;
$("#preview").find('img').wrap('<div id="' + id + '" style="width:400px; height:300px;"></div>');
$pancontainer = $('div#' + id);
$pancontainer.css({position:'relative', overflow:'hidden', cursor:'move'});
$img = $pancontainer.find('img:eq(0)'); //image to pan
options = {
$pancontainer: $pancontainer,
pos: 'center',
curzoom: 1,
canzoom: 'yes',
wrappersize:[400, 300]
};
$img.imgmover(options);
}
});
}).submit();
});

Untested. Assumes ajaxform has a success property, and that there are no typos or logical inconsistencies in the code I wrote.

Save what you already have and put up a demo with this code. If it works, great! If not, give me a link to it.

dargo
10-03-2012, 07:54 PM
Thank you very much for this but unfortunately it doesn't work. The image fails to upload.

This is a temporary url with a test page on it http://collab.turnspain.com/1841a.php

Colin

jscheuer1
10-03-2012, 09:13 PM
Get rid of this:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="imagepanner.js">

/***********************************************
* Simple Image Panner and Zoomer- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

Move this:


<script type="text/javascript" src="scripts/imagepanner.js">

/***********************************************
* Simple Image Panner and Zoomer- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

To here and add the highlighted script:


<script src="gen_validatorv4.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/imagepanner.js">

/***********************************************
* Simple Image Panner and Zoomer- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script type="text/javascript">
var $ = jQuery;
</script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>

Clear the browser cache, reload the page. If it still doesn't work, let me know - and leave it up so I can see it.

dargo
10-04-2012, 04:25 AM
John

Thanks for all your help so far.

On my local test server I am getting a syntax error thrown on this line



}).submit();


But this error isn't being thrown in live.

But live still doesn't work no image is being uploaded.

Colin

jscheuer1
10-04-2012, 04:36 AM
We're getting there. You have an extra opening script tag:


<script src="gen_validatorv4.js" type="text/javascript"></script>
<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/imagepanner.js">

/***********************************************
* Simple Image Panner and Zoomer- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script>
<script type="text/javascript">
var $ = jQuery;
</script>

<script type="text/javascript" src="scripts/jquery.form.js"></script>

Get rid of that. Now I'm thinking (as I have been all along) there may still be problems, but let's get rid of the typos and obvious stuff first and see.

I'd test it out here locally, but owing to the nature of AJAX, that's a little impractical.

Clear the browser's cache and refresh the page. Same deal. Let me know.

dargo
10-04-2012, 04:57 AM
OOPS

Removed extra tag but still not loading.

I have put an 1841b.php file on the site so you can see how it is supposed to work.

Thanks John for all your help so far.

Colin

jscheuer1
10-04-2012, 05:38 AM
OK, I see a typo I made and you were right to mention the .submit(); it's in the wrong place. The code should be like so:


jQuery(document).ready(function($) {
$('#photoimg').live('change', function(){
$("#preview").html('');
$("#preview").html('<div class="image_center"><img src="loader.gif" alt="Uploading...."/></div>');
$("#imageform").ajaxForm({
target: '#preview',
success: function(){
var id = 'z' + new Date().getTime(), $pancontainer, $img, options;
$("#preview").find('img').wrap('<div id="' + id + '" style="width:400px; height:300px;"></div>');
$pancontainer = $('div#' + id);
$pancontainer.css({position:'relative', overflow:'hidden', cursor:'move'});
$img = $pancontainer.find('img:eq(0)'); //image to pan
options = {
$pancontainer: $pancontainer,
pos: 'center',
curzoom: 1,
canzoom: 'yes',
wrappersize:[400, 300]
};
$img.imgmover(options);
}
}).submit();
});
});

I have the feeling once we get this at least sort of working we will have to find a way to adjust the dimensions of the wrap div and the wrappersize property of the options object, perhaps other things, with information from the image somehow. But let's just get it ticking first.

Again, clear the cache, refresh, cross your fingers, let me know.

dargo
10-04-2012, 06:11 AM
Brilliant. :D

That works perfectly thank you very much John.

I can now start to play around to get the sizes that I want and get the zoom icons to display.

dargo
10-04-2012, 06:24 AM
CSS adjusted and now the page looks just how I want.

Thank you once again John for all your help.

And thanks for a great script that does what I want.

Colin