?
Solved

multizoom.js breaks my scripts

Posted on 2014-12-18
11
Medium Priority
?
376 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 2000 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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.
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…

649 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