Solved

multizoom.js breaks my scripts

Posted on 2014-12-18
11
283 Views
Last Modified: 2014-12-18
Hi all.
I'm trying to implement the jquery multizoom plugin (http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm)
but when I add it in my body after the inclusion of jquery, I get this error message by Firebug

TypeError: $ is not a function
      $(document).ready(function ()

related to my file admin.js. Commentig out multizoom link all works fine.
Any idea?
Thank you
0
Comment
Question by:Marco Gasi
  • 6
  • 5
11 Comments
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
Post your code around this and it may make more sense.  I only ever post my <script> in the <head> section.  Others will do it at the very bottom of the <body>.  I noticed yours (from your previous question) were at the top of your <body>
0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
Comment Utility
Look at the multizoom code... the first line is jQuery.noConflict();.  This releases the $ variable to other frameworks that may need it.

At the top of your admin.js file, just add jQuery.noConflict( true );
i.e.
jQuery.noConflict( true );
$(document).ready(function ()
{

Open in new window

0
 
LVL 30

Author Comment

by:Marco Gasi
Comment Utility
I put css in the head and javascitp at the very bottom of the body: perhaps you aw my code in one of my numerous tests and perhaps I tried even to move javascript in the head...

<!DOCTYPE HTML>
<html>
	<head>
		<title></title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<link href="http://fonts.googleapis.com/css?family=Ubuntu+Condensed" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="../css/kickstart.css" media="all" /><!-- KICKSTART -->
		<link rel="stylesheet" type="text/css" href="../css/jquery.fancybox-1.3.4.css" media="all" /><!-- CUSTOM STYLES -->
		<link rel="stylesheet" href="../css/multizoom.css" type="text/css" />
		<link rel="stylesheet" type="text/css" href="../css/style.css" media="all" /><!-- CUSTOM STYLES -->
	</head>
	<body>
		<!-- ********************************************************* -->
		<div class="col_2">
			{__LEFTCOL__}
		</div>		
		<div class="col_10">
			{__MAINCOL__}
		</div>

		<!-- ********************************************************* -->
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="../js/kickstart.js"></script>
	<script type="text/javascript" src="../js/jquery.form.js"></script>
	<script type="text/javascript" src="../js/multizoom.js">
		// Featured Image Zoomer (w/ optional multizoom and adjustable power)- By Dynamic Drive DHTML code library (www.dynamicdrive.com)
		// Multi-Zoom code (c)2012 John Davenport Scheuer
		// as first seen in http://www.dynamicdrive.com/forums/
		// username: jscheuer1 - This Notice Must Remain for Legal Use
		// Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
	</script>
	<script type="text/javascript" src="../js/admin.js"></script>
	</body>
</html>

Open in new window


This is the base markup of may page: if I delete multizoom, all works fine otherwise I get the error above. :(
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
I realised you'd moved your <scripts> after I posted *grin*.  Take a look above at the jQuery.noConflict(true); comment i made
0
 
LVL 30

Author Comment

by:Marco Gasi
Comment Utility
Yes, it is (replying to the other thread)
But not adding

jQuery.noConflict( true );

Open in new window


to my script: this didn't work. So I commented out that line in multizoom.js!
And now, I can see multizoom doesn't work lol. Probably I'll have to open a new question but I think this is the ususl problem with elemnt added dynamically.
Well, if these points were dollars, I'd make you happy today, uh? ;-)
Thank you again
0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 30

Author Closing Comment

by:Marco Gasi
Comment Utility
Thank you, Rob
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
Well, if these points were dollars, I'd make you happy today, uh? ;-)
*laughing* oh how i wish they were...
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
What you can do is wrap your $(document).ready(function() { ... }); in an anonymous function that passes the jQuery variable to it where the anon function maps the jQuery variable to the $ one:

(function($) {
     $(document).ready(function() { ... });
}
)(jQuery);
0
 
LVL 30

Author Comment

by:Marco Gasi
Comment Utility
Unfortunately, your tip avoids the error, but no script works anymore. It seems I get it working only if I comment the noConflict line in multizoom script. I know it is brutal, but... For some reason, I don't know if I'm the only one or if it's a common event, but usually the commonly suggested solutions never work in my cases
Keep yourself ready to earn some other point today: I'm loosing patience with this page :-) I'll post here the link, if I'll open a new question...
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
Comment Utility
ok and thanks Marco, however I"m off to bed 11pm here in Australia :)
0
 
LVL 30

Author Comment

by:Marco Gasi
Comment Utility
Okay, good night; maybe tomorrow we'll chat a bit again... I'm in Tenerife and here are 12.25 am
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now