Solved

multizoom.js breaks my scripts

Posted on 2014-12-18
11
323 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 43

Expert Comment

by:Rob
ID: 40506749
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 43

Accepted Solution

by:
Rob earned 500 total points
ID: 40506754
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 31

Author Comment

by:Marco Gasi
ID: 40506756
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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
LVL 43

Expert Comment

by:Rob
ID: 40506762
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 31

Author Comment

by:Marco Gasi
ID: 40506771
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
 
LVL 31

Author Closing Comment

by:Marco Gasi
ID: 40506772
Thank you, Rob
0
 
LVL 43

Expert Comment

by:Rob
ID: 40506776
Well, if these points were dollars, I'd make you happy today, uh? ;-)
*laughing* oh how i wish they were...
0
 
LVL 43

Expert Comment

by:Rob
ID: 40506777
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 31

Author Comment

by:Marco Gasi
ID: 40506792
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 43

Expert Comment

by:Rob
ID: 40506798
ok and thanks Marco, however I"m off to bed 11pm here in Australia :)
0
 
LVL 31

Author Comment

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

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…

737 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