Help combining Simple Image Panner with existing Ajax image loader

[dargo]

1) Script Title: Simple Image Panner and Zoomer v1.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...magepanner.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]

Anybody got any ideas on how to make this script wait for the other one to load the image?

[jscheuer1]

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]

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]

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]

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]

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]

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]

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]

Brilliant.

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.