jQuery Image Magnify v1.11 can't get to work

**drakebarb** · 03-03-2013, 05:12 AM

1) Script Title: jQuery Image Magnify v1.11

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...agemagnify.htm

3) Describe problem: I can not get this script to work. Put script in the <HEAD>, saved the two files: jquery.magnifier.js. in folder called js and the magnify.cur is in the root directory. I added the class="magnify" to a picture at Line 185, Line 187 and it won't work. Help!...what am I doing wrong?

Here's the page I am working on: http://www.sleezybarbhorsewear.com/bootcovers.htm

**jscheuer1** · 03-03-2013, 06:21 PM

First off, save a backup just in case. Then in the head of the page, replace:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

with:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

After the script for jQuery Image Magnify, add this highlighted script as shown:

Code:

<script type="text/javascript" src="js/jquery.magnifier.js">

/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">
var $ = jQuery
</script>

Remove this line from the head:

Code:

<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>

Finally you need to replace the semi-colon (red) in the compound class name with a space:

Code:

<img  src="webpictures/BootCoverpic_small.jpg"  alt="horse Professional Choice boots covers, 
				horse splint boot covers" class="style3;magnify" style="float: right" width="100" height="131"/>

So you get:

Code:

<img  src="webpictures/BootCoverpic_small.jpg"  alt="horse Professional Choice boots covers, 
				horse splint boot covers" class="style3 magnify" style="float: right" width="100" height="131"/>

Save all those changes and use that version of the page.

The browser cache may need to be cleared and/or the page refreshed to see changes.