Run 2 JQuery pieces of code on the same page

Hi,

I have 2 jQuery functions as shown in the code below (crop and rotate).

As is, only the first one works (crop). There is no error in Chrome's console
If I comment out the first one (crop), the second one (rotate) works fine

I have only one version of JQuery loaded and it's located before the first function..

Can someone please advise on the changes needed to get this to work?
Thanks in advance

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

	var jcrop_api;

	$('#thumbnail').Jcrop({
	trueSize: [<?php echo $current_large_image_width; ?>,<?php echo $current_large_image_height; ?>],
	onSelect:    showCoords,
	bgColor:     'black',
	bgOpacity:   .4,
	setSelect:   [ 125, 100, 650, 520 ],
	aspectRatio: 550 / 420,
	},function(){
	  jcrop_api = this;
	});

	$('#coords').on('change','input',function(e){
	  var x1 = $('#x1').val(),
		  x2 = $('#x2').val(),
		  y1 = $('#y1').val(),
		  y2 = $('#y2').val();
	  jcrop_api.setSelect([x1,y1,x2,y2]);
	});

  });

  // Simple event handler, called from onChange and onSelect
  // event handlers, as per the Jcrop invocation above
  function showCoords(c)
  {
	$('#x1').val(c.x);
	$('#y1').val(c.y);
	$('#x2').val(c.x2);
	$('#y2').val(c.y2);
	$('#w').val(c.w);
	$('#h').val(c.h);
  };

  function clearCoords()
  {
	$('#coords input').val('');
  };

</script>

<script type="text/javascript">
jQuery(function($){
	var value = 0
	$('#rotatemainimage').click(function() {
	value +=90;
	$('#thumbnail').rotate({ animateTo:value})
	});
});
</script>

Open in new window

kbitAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
would a combination work for you?

<script type="text/javascript">
	jQuery(function($){
		var jcrop_api;

		$('#thumbnail').Jcrop({
			trueSize: [<?php echo $current_large_image_width; ?>,<?php echo $current_large_image_height; ?>],
			onSelect:    showCoords,
			bgColor:     'black',
			bgOpacity:   .4,
			setSelect:   [ 125, 100, 650, 520 ],
			aspectRatio: 550 / 420,
		},function(){
			jcrop_api = this;
		});

		$('#coords').on('change','input',function(e){
			var x1 = $('#x1').val(),
				x2 = $('#x2').val(),
				y1 = $('#y1').val(),
				y2 = $('#y2').val();
			jcrop_api.setSelect([x1,y1,x2,y2]);
		});

		var value = 0;
		$('#rotatemainimage').click(function() {
			value +=90;
			$('#thumbnail').rotate({ animateTo:value})
		});
	});

	// Simple event handler, called from onChange and onSelect
	// event handlers, as per the Jcrop invocation above
	function showCoords(c)
	{
		$('#x1').val(c.x);
		$('#y1').val(c.y);
		$('#x2').val(c.x2);
		$('#y2').val(c.y2);
		$('#w').val(c.w);
		$('#h').val(c.h);
	}

	function clearCoords()
	{
		$('#coords input').val('');
	}

</script>

Open in new window


HTH
Rainer
0
kbitAuthor Commented:
Hi Rainer, nice idea thanks, unfortunately that change didnt work...still no error in the console :-(
0
Rainer JeschorCommented:
Hi,
hm, that strange.

Is that page available through the Internet?
Then I might have a look on the site.

Thanks.
Rainer
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

kbitAuthor Commented:
Thanks very much for your offer. Please find attached a ZIP file containing:

a sample image
a HTML file with the above crop and rotate code in it
Unmodified versions of jquery, jcrop and jqueryrotate JS files
Unmodified versions of jcrop CSS files
test.zip
0
Rainer JeschorCommented:
Hi,
I am just "playing" around with it but it seems that JCrop does not work together with jquery.rotate. I found also some other people having the same issue.
Perhaps I can find a solution but honestly I think this is simply not working due to the way JCrop interacts with the DOM.

KR
Rainer
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kbitAuthor Commented:
No problem, many thanks for looking into it for me.

I think I'll just allow the user to rotate the image if they wish and then move onto another screen to do the cropping. The workaround should still be user-friendly, thanks again
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.