Solved

multizoom.js breaks my scripts

Posted on 2014-12-18
11
307 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 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone 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

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
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…
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…

840 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